D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
setup_time_force_interactive
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <link href="style.css"></link> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width:100%; height: 100% } </style> </head> <body> <div id="main-wrapper"> <div id="sidebar"> <div id="current_time">1:00am</div> <div id="speed"> <div class="togglebutton slow current" data-val="slow">Langsam</div> <div class="togglebutton medium" data-val="medium">Mittel</div> <div class="togglebutton fast" data-val="fast">Schnell</div> <div class="clr"></div> </div> <div id="note"></div> <div id="cite"> Describe here the interactive project with the data source linked to: <a href="https://www.hello2/">Data source</a>, and other links that helped in that regards: <a href="https://www.hello.org/">LINK</a>. </div> </div> <div id="chart"></div> <div class="clr"></div> </div> <script> var USER_SPEED = "slow"; var w = 595, h = 800, padding = 1, maxRadius = 3; var svg = d3.select("#chart") .append("svg") .attr("width", w) .attr("height", h); var sched_objs = []; var curr_minute = 0; // Data load var act_counts = { "0": 0, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "13": 0, "14": 0, "15": 0, "16": 0 }; console.log(act_counts[0]) function readablePercent(n) { var pct = 100 * n / 1000; if (pct < 1 && pct > 0) { pct = "<1%"; } else { pct = Math.round(pct) + "%"; } return pct; } console.log(readablePercent(100)) // == 10% function minTime (min) { var minute = (min + 4*60) % 1440; var hh = Math.floor(minute / 60) var ampm; if (hh>12) { hh = hh - 12; ampm = "pm" } else if (hh == 12) { ampm = "pm" } else if (hh == 0) { hh = 12; ampm = "am"; } else { ampm = "am"; } var mm = minute % 60; if (mm < 10) { mm - "0" + mm; } return hh + ":" + mm + ampm; } console.log(minTime(1000)) </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js