D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
small_multples_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 rel="stylesheet" href="style.css" media="screen" type="text/css"></link> <link rel="stylesheet" href="style/style.css" type="text/css" media="screen"/> <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="leftsider"> <h1>Heading</h1> <div id ="speedcontrol"> <div class="label">Speed</div> <div class="button" data-speed="pause">Pause</div> <div class="button" data-speed="3000">Slow</div> <div class="button current" data-speed="750">Medium</div> <div class="button" data-speed="300">Fast</div> </div> <div id="scalecontrol"> <div class="label" style="">Scale by</div> <div class="button current" data-scale="group">Group</div> <div class="button" data-scale="item">Item</div> </div> </div> <div id="year"> <div class="sublabel">Year</div> <div id="yearvalue" class="valuedesc">1970</div> </div> <div class="clr"></div> <!-- p.clear { allows to drop things below clear: both; } --> <div id="header"> <div class="sec"><h3>Meat</h3>Ounces</div> <div class="sec"><h3>Vegetables</h3>Cups</div> <div class="sec"><h3>Fruit</h3>Cups</div> <div class="sec"><h3>Grains</h3>Ounces</div> <div class="sec"><h3>Dairy</h3>Cups</div> <div class="sec"><h3>Fat</h3>Grams</div> </div> <div id="charts"></div> </div> <script> var START_YEAR = 1970; var CURR_YEAR = 1970; var PAUSED = false; var USER_SPEED = 750; var USER_SCALE = "group"; var food_groups = { "meat":{"max": 3.75}, "veg": { "max": 1 }, "fruit": { "max": .2 }, "grain": { "max": 7 }, "dairy": { "max": 1 }, "fat": { "max": 60 } } // console.log(food_groups["meat"]["max"]) var num_rows = 7, num_cols = 5; d3.tsv("dat.tsv", type, function (error, data) { console.log(data) }) function type (d, i) { d3.keys(d).map(function(key) { d[key] = +d[key] }) return d; } // dims for area charts of mutiples var margin = {top: 0, right: 20, bottom: 10, left: 15}, width = 180 - margin.left - margin.right, height = 90 - margin.top - margin.bottom; var bisectYear = d3.bisector(function(d) { return d.year; }).left; var numberFormat = d3.format(".2f"); // bisect example // data.sort()... // data = [2, 3, 4, 5, 6, 7, 8] // var bisect = d3.bisector(function(d) { return d; }).right; // undefined // bisect(data, 3) // 2 // var bisect = d3.bisector(function(d) { return d; }).left; // undefined // bisect(data, 3) // 1 // data // [2, 3, 4, 5, 6, 7, 8] </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js