D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
hoverLinechart_implementation
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" type="text/css" href="style.css" /> <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="notes"></div> <h1>Heading</h1> <p>Description</p> <div id="demographics"> <div id="emplyment section"> <h3>variable1</h3> <div class="employment section"> <h3>Employment Status</h3> <div class="button current" data-val="empEMP">Employed</div> <div class="button" data-val="empUNEMP">Unemployed</div> <div class="button" data-val="empNILF">Not in Labor Force</div> </div> <div class="education section"> <h3>Education</h3> <div class="button" data-val="eduHS">High School or Less</div> <div class="button" data-val="eduBS">Bachelor's</div> <div class="button" data-val="eduADV">Advanced</div> </div> <div class="race section"> <h3>Race or Origin</h3> <div class="column"> <div class="button" data-val="raceW">White</div> <div class="button" data-val="raceB">Black</div> <div class="button" data-val="origH">Hispanic</div> </div> <div class="column"> <div class="button" data-val="raceA">Asian</div> <div class="button" data-val="raceN">Native</div> </div> <!-- column sclass --> <div class="clr"></div> </div> <div class="clr"></div> </div> </div> <div id="chart"></div> </div> <!-- Wrapper --> <script> var USER_GRP = "empEMP"; var FIRST_MAR = "values_first"; var USER_FIELD = "emp"; var median_ages = { "values_first": 27, "values_all": 30 }; var margin = {top: 50, right: 10, bottom: 50, left: 0}, width = 720 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var bisectAge = d3.bisector(function(d) { return d.age; }).left; var percent = d3.format('%'); var min_age = 14; var fields = ['emp', 'edu', 'race', 'orig']; var groups = {}; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.category20b() // .domain([0, 1]); // console.log(color(1)) var svg = d3.select("#chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var dataURL = "divorced_ormarriedmorethanonce_byage.tsv" d3.tsv(dataURL, formatingFunc, function(error, data) { if (error) throw errow } ) function formatingFunc () { // d3.keys(d).forEach(function(key) { // }) } // thanks for flowingdata's example </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js