D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kcsluis
Full window
Github gist
NYC Shops, Bar Charts
<!DOCTYPE html> <meta charset="utf-8"> <style type="text/css"> /* svg { border: 1px solid #f0f; }*/ body { font-family: 'arial', sans-serif; font-size: 9px; width: 960px; margin: 40px auto; } h1 { font-size: 36px; } .bar { fill: steelblue; } .bar:hover { fill: blue; } .category_label { text-align: right; } </style> <body> <h1>NYC Shops, Categorized</h1> <div class="mainContainer1"></div> <h1>NYC Shops, Neighborhoods</h1> <div class="mainContainer2"></div> <h1>NYC Shops, Chains</h1> <div class="mainContainer3"></div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> <script> var margin = {top: 1, right: 60, bottom: 1, left: 120}; var width = 960 - margin.left - margin.right, height = 10 - margin.top - margin.bottom; var xScale = d3.scale.linear() .range([0,width]); function barChart(JSONdata, thisContainer, whatItIs) { d3.json(JSONdata, function(error, data) { if (error) throw error; var xcount = data.map( function (d) { return d.count; }); var xMax = d3.max(xcount); xScale.domain([0,xMax]); data.sort( function (a,b) { return b.count - a.count; }); console.log(data); var container = d3.select("body").select("div." + thisContainer).selectAll("svg.container") .data(data) .enter() .append("svg") .attr("class", "container") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var svgContainer = container.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svgContainer .append("rect") .attr("class", "bar") .attr("width", function (d) { return xScale(d.count); }) .attr("height", height) .attr("x", 0) .attr("y", 0); svgContainer .append("text") .attr("class", "category_label") .attr("text-anchor", "end") .attr("dy", height-1) .attr("dx", -4) .text( function (d) { return d[whatItIs]; }); svgContainer .append("text") .attr("class", "count_label") .attr("text-anchor", "start") .attr("dy", height-1) .attr("dx", function (d) { return xScale(d.count)+4; }) .text( function (d) { return d.count; }); }); }; barChart("nycShops_categories.json", "mainContainer1", "category"); barChart("nycShops_neighborhoods.json", "mainContainer2", "neighborhood"); barChart("nycShops_chains.json", "mainContainer3", "key"); </script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js