D3 Examples - NYC Eats, Bar Charts

xxxxxxxxxx
 
<!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 Eats, Categorized</h1>
    <div class="mainContainer1"></div>
    <h1>NYC Eats, Neighborhoods</h1>
    <div class="mainContainer2"></div>
    <h1>NYC Eats, 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("nycEats_categories.json", "mainContainer1", "category");
barChart("nycEats_neighborhoods.json", "mainContainer2", "neighborhood");
barChart("nycEats_chains.json", "mainContainer3", "key");
​
</script>
    