Built with blockbuilder.org
xxxxxxxxxx<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