D3 Examples - cities-column-chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body { 
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
​
        .title {
            font-family: "Georgia";
            font-size: 32px;
            fill: #000;
        }
​
        .axis {
            font-family: "Arial";
            font-size: 11px;
            fill: #808080;
        }
​
        .bar {
            fill: pink;
            fill-opacity: 1;
        }
    </style>
</head>
<body>
    <script>
        var city = "San Francisco";
        var margin = { top: 20, right: 20, bottom: 20, left: 20};
        var width = 960 - margin.left - margin.right;
        var height = 500 - margin.top - margin.bottom;
        d3.tsv("cities.tsv", (error, data) => {
            if (error) throw error;
            data.forEach(function(d) { 
                d.date = d3.timeParse("%Y%m%d")(d.date);
                d.date = new Date(d.date);  // x
                d[city] = ++d[city];        // y
            })
​
            // scales
            var xExtent = d3.extent(data, d => d.date);
            var xScale = d3.scaleTime()
                .domain(xExtent)
                .range([margin.left, width - margin.left - margin.right]);
            var yMax = d3.max(data, d => d[city]);
            var yScale = d3.scaleLinear()
                .domain([0, yMax])
                .range([height - margin.bottom, margin.top]);
            var heightScale = d3.scaleLinear()
                .domain([0, yMax])
                .range([0, height - margin.top - margin.bottom]);
​
            // create rects
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
​
            var rect = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", d => xScale(d.date))
                .attr("y", d => yScale(d[city]))
                .attr("width", 2)
                .attr("height", d => heightScale(d[city]))
                .attr("fill", "pink")
                .attr("stroke", "white");
​
            var xAxis = d3.axisBottom()
                .scale(xScale)
                .tickFormat(d3.timeFormat("%b %Y"));
            var yAxis = d3.axisLeft()
                .scale(yScale);
​
            svg.append("g")
                .attr("transform", "translate(" + [0, height - margin.bottom] + ")")
                .call(xAxis);
            svg.append("g")
                .attr("transform", "translate(" + [margin.left, 0] + ")")
                .call(yAxis);
        })
    </script>
</body>
</html>
    