D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
nitaku
Full window
Github gist
Clock
A clock!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Clock</title> <link type="text/css" href="index.css" rel="stylesheet"/> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="suncalc.js"></script> <script src="seasons.js"></script> </head> <body> <svg width="1024" height="748"> <defs> <symbol id="sun_symbol" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="33.715"/> <g> <polygon points="50,5 47.275,13.334 52.725,13.334 "/> <polygon points="50,95 47.275,86.667 52.725,86.667 "/> </g> <g> <polygon points="95,50 86.666,47.276 86.666,52.725 "/> <polygon points="5,50 13.333,47.276 13.333,52.725 "/> </g> <g> <polygon points="18.18,18.18 22.146,26 26,22.146 "/> <polygon points="81.82,81.82 74.002,77.854 77.854,74 "/> </g> <g> <polygon points="81.82,18.18 74.002,22.146 77.854,25.999 "/> <polygon points="18.18,81.82 22.146,74 26,77.854 "/> </g> <g> <polygon points="32.961,8.351 33.595,17.095 38.638,15.032 "/> <polygon points="67.039,91.649 61.361,84.968 66.405,82.904 "/> </g> <g> <polygon points="91.649,32.961 82.905,33.595 84.969,38.638 "/> <polygon points="8.351,67.039 15.032,61.362 17.096,66.405 "/> </g> <g> <polygon points="8.501,32.598 15.133,38.333 17.239,33.308 "/> <polygon points="91.499,67.402 82.76,66.691 84.867,61.668 "/> </g> <g> <polygon points="67.402,8.501 61.668,15.133 66.691,17.24 "/> <polygon points="32.598,91.499 33.308,82.761 38.333,84.868 "/> </g> </symbol> <symbol id="moon_symbol" viewBox="-34 -34 68 68"> <circle r="30" style="fill: black; fill-opacity: 0.1;"/> <path d="M0 30 A30 30 0 1 1 0 -30 A30 30 0 1 1 0 30"/> </symbol> <symbol id="cloud_symbol" viewBox="0 0 100 100"> <path d="M642.02-364.11c-0.772,0-1.519,0.114-2.229,0.313c-0.17-6.744-5.679-12.162-12.464-12.162 c-4.368,0-8.201,2.251-10.428,5.65c-1.38-2.61-4.117-4.393-7.275-4.393c-2.621,0-4.95,1.229-6.456,3.139 c-2.865-6.496-9.357-11.031-16.913-11.031c-8.99,0-16.479,6.42-18.138,14.926c-0.937-0.248-1.911-0.393-2.925-0.393 c-6.312,0-11.427,5.116-11.427,11.427c0,0.907,0.117,1.787,0.317,2.634h95.921c0.146-0.609,0.229-1.243,0.229-1.896 C650.233-360.433,646.556-364.11,642.02-364.11z"/> <path d="M90.02,48.188c-0.771,0-1.518,0.113-2.229,0.312c-0.17-6.744-5.678-12.162-12.463-12.162 c-4.369,0-8.201,2.251-10.428,5.65c-1.381-2.61-4.117-4.393-7.275-4.393c-2.621,0-4.951,1.229-6.457,3.139 c-2.865-6.496-9.357-11.031-16.913-11.031c-8.99,0-16.479,6.42-18.138,14.926c-0.937-0.248-1.911-0.393-2.925-0.393 c-6.312,0-11.427,5.116-11.427,11.427c0,0.907,0.117,1.786,0.317,2.634h95.92c0.146-0.609,0.23-1.243,0.23-1.896 C98.234,51.863,94.557,48.188,90.02,48.188z"/> </symbol> </defs> <use id="sun" xlink:href="#sun_symbol" x="750" width="140" height="140"/> <use id="moon" xlink:href="#moon_symbol" x="148" width="100" height="100"/> <rect id="land" x="0" y="300" width="1024" height="448" fill="white"/> <rect id="haze" x="0" y="0" width="1024" height="748" fill="#888" fill-opacity="0"/> <g id="clouds" fill="white" fill-opacity="0.3" opacity="0"> <use xlink:href="#cloud_symbol" x="800" y="0" width="100" height="100"/> <use xlink:href="#cloud_symbol" x="40" y="50" width="200" height="200"/> <use xlink:href="#cloud_symbol" x="360" y="180" width="140" height="140"/> </g> <g id="more_clouds" fill="white" fill-opacity="0.3" opacity="0"> <use xlink:href="#cloud_symbol" x="240" y="-10" width="80" height="80"/> <use xlink:href="#cloud_symbol" x="10" y="84" width="160" height="160"/> <use xlink:href="#cloud_symbol" x="110" y="180" width="90" height="90"/> <use xlink:href="#cloud_symbol" x="710" y="60" width="280" height="280"/> <use xlink:href="#cloud_symbol" x="894" y="118" width="120" height="120"/> <use xlink:href="#cloud_symbol" x="590" y="-184" width="500" height="500"/> </g> <g transform="translate(0,25)"> <line stroke="black" stroke-width="1" x1="0" x2="10" y1="0" y2="0"/> <circle r="3" cx="10"/> </g> <a xlink:href="https://192.168.0.1" xlink:show="new" target="_blank"> <g id="router" class="status" transform="translate(35,25)"> <path class="icon" transform="scale(0.5) translate(-50,-50)" d="M49.249,17.499c-17.782,0-32.25,14.469-32.25,32.25c0,17.784,14.468,32.252,32.25,32.252 c17.78,0,32.251-14.469,32.251-32.252C81.5,31.968,67.029,17.499,49.249,17.499z M74.211,62.84c-0.006,0-0.012-0.006-0.018-0.006 h-6.654c0.986-3.357,1.666-7.1,1.852-11.121h7.979C77.086,55.717,75.992,59.461,74.211,62.84z M51.381,77.855V66.762h10.584 c-2.064,4.939-4.484,8.549-5.855,10.371C54.58,77.52,53.002,77.732,51.381,77.855z M42.543,77.182 c-1.364-1.799-3.809-5.432-5.896-10.42h10.808v11.127C45.774,77.781,44.131,77.57,42.543,77.182z M24.283,62.84 c-1.778-3.379-2.878-7.123-3.161-11.127h8.094c0.186,4.021,0.866,7.764,1.852,11.121h-6.763 C24.296,62.834,24.291,62.84,24.283,62.84z M24.469,36.313c0.019,0.003,0.032,0.012,0.048,0.012h6.681 c-1.24,3.988-1.821,7.815-1.971,11.462h-8.105C21.413,43.644,22.582,39.78,24.469,36.313z M47.456,21.606v10.792H36.892 c1.489-3.33,3.466-6.745,6.065-10.211C44.413,21.853,45.924,21.705,47.456,21.606z M55.686,22.231 c2.584,3.453,4.549,6.851,6.031,10.167H51.381V21.643C52.848,21.751,54.293,21.905,55.686,22.231z M63.246,36.325 c1.357,3.996,2.006,7.828,2.174,11.462H51.381V36.325H63.246z M47.456,36.325v11.462H33.187c0.17-3.634,0.819-7.466,2.18-11.462 H47.456z M33.182,51.713h14.274v11.121H35.202C34.143,59.516,33.381,55.783,33.182,51.713z M51.381,62.834V51.713h14.045 c-0.203,4.07-0.959,7.803-2.02,11.121H51.381z M69.379,47.787c-0.146-3.647-0.729-7.474-1.971-11.462h6.568 c0.014,0,0.031-0.009,0.049-0.012c1.883,3.467,3.055,7.331,3.344,11.474H69.379z M71.465,32.398h-5.52 c-1.045-2.558-2.316-5.154-3.941-7.796C65.711,26.494,68.92,29.147,71.465,32.398z M36.675,24.501 c-1.651,2.678-2.955,5.307-4.012,7.897h-5.635C29.616,29.093,32.892,26.396,36.675,24.501z M26.749,66.762h5.641 c1.202,3.137,2.576,5.816,3.854,8.002C32.514,72.814,29.276,70.098,26.749,66.762z M62.414,74.668 c1.264-2.168,2.619-4.813,3.801-7.906h5.525C69.254,70.049,66.078,72.725,62.414,74.668z"/> <circle r="20" fill="transparent"/> </g> </a> <g transform="translate(0,730)"> <line stroke="black" stroke-width="1" x1="0" x2="10" y1="0" y2="0"/> <circle r="3" cx="10"/> </g> <a xlink:href="https://192.168.0.4" xlink:show="new" target="_blank"> <g id="wifirouter" class="status" transform="translate(33,720)"> <g transform="scale(0.15) translate(-125,-100)"> <path class="icon" d="M137.085,39.439c-48.16,0-91.761,19.869-123.06,51.829l17.67,17.669c26.77-27.434,64.121-44.497,105.39-44.497 c41.268,0,78.618,17.063,105.39,44.497l17.67-17.669C228.846,59.307,185.245,39.439,137.085,39.439z"/> <path class="icon" d="M137.085,79.624c-37.081,0-70.638,15.361-94.658,40.046l17.669,17.669c19.492-20.159,46.801-32.715,76.989-32.715 s57.497,12.556,76.989,32.715l17.668-17.669C207.723,94.985,174.166,79.624,137.085,79.624z"/> <path class="icon" d="M137.085,121.341c-25.58,0-48.71,10.681-65.173,27.813l17.684,17.685c11.932-12.608,28.802-20.498,47.489-20.498 s35.558,7.89,47.488,20.497l17.685-17.684C185.795,132.021,162.664,121.341,137.085,121.341z"/> <circle class="icon" cx="136.754" cy="198.076" r="29.448"/> </g> </g> </a> <text id="calendar" class="tile" x="512" y="10" dy="1em"/> <text id="season" class="tile" x="512" y="60" dy="1em"/> <text id="clock" class="tile" x="512" y="160" dy=".35em"/> <text id="dst" class="tile" x="670" y="240" dy=".35em"/> <text id="temperature" class="tile" x="1014" y="10" dy="1em"/> <text id="humidity" class="tile" x="1004" y="90" dy="1em"/> </svg> </body> <script src="index.js"></script> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js