D3 Examples - Assignment4 BarChart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> D3: A Bar Chart with MPG for Different Cars</title>
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css"></style>
    </head>
​
    <body>
        <script type="text/javascript">
        // Reference: https://www.pshrmn.com/tutorials/d3/bar-charts/
        var title = "City MPG on Selected Cars";
​
        var margin = {top:5, right:5, bottom:100, left:100};
        var w_full = 1200;
        var h_full = 600;
​
        var w = w_full - margin.right - margin.left;
        var h = h_full - margin.top - margin.bottom;
​
        var x = d3.scaleBand()
                  .range([0,w])
                  .paddingInner(0.1);
​
        var y = d3.scaleLinear()
                  .range([h,0]);
​
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width",w_full)
                    .attr("height",50)
                    .append("g")
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
        svg.append("text")
           .text(title)
           .attr("x",w_full/2)
           .attr("y",25)
           .style("text-anchor","middle")
           .style("fill","black")
           .style("font-size",16);
        // Set up a svg on the top to put title
​
        
​
​
        dataset = d3.csv("https://gist.githubusercontent.com/jacquessham/d7a3626991f4d540162805a52eb1bf30/raw/fc26e530a6df6792d0503d176e13f77091c38567/cars.csv", function(error, data){
            if(error) throw error;
​
            data.forEach(function(d) {
                //cars = data;
                d.CityMpg = +d.CityMpg;
                d.Model = d.Model; 
            });
​
        console.log(data);
​
        x.domain(data.map(function(d){return d.Model;}));
        y.domain([0, d3.max(data, function(d){return d.CityMpg;})]);
​
        svg = d3.select('body').append('svg')
                .attr("width",w_full)
                .attr("height",h_full)
                .append("g")
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
        // Create a second svg for putting graphs
​
        var xAxis = d3.axisBottom(x);
        var yAxis = d3.axisLeft(y);
​
        var xAxisEle = svg.append('g')
                          .classed('x axis',true)
                          .attr('transform','translate(0,'+h+')')
                          .call(xAxis);
        // Append x-axis and its labels
​
        xAxisEle.append("text")
                .attr("x",w_full/2)
                .attr("y",100)
                .style("text-anchor","middle")
                .style("fill","black")
                .attr("dy","-2.5em")
                .style("font-size",12)
                .text("Car Make and Model");
​
        var yAxisEle = svg.append("g")
                          .classed("y axis",true)
                          .call(yAxis);
​
        var yText = yAxisEle.append("text")
                            .attr('transform', 'rotate(-90)translate(-' + h/2 + ',0)')
                            .style("text-anchor","middle")
                            .style("fill","black")
                            .attr("dy","-2.5em")
                            .style("font-size",12)
                            .text("City MPG");
        // Append y-axis and its labels
​
        var barHolder = svg.append("g")
                           .classed("bar-holder",true);
​
        var bars = barHolder.selectAll("rect.bar")
                            .data(data)
                            .enter()
                            .append("rect")
                            .classed("bar",true)
                            .attr("x", function(d){return x(d.Model); })
                            .attr("width",x.bandwidth())
                            .attr("y", function(d){return y(d.CityMpg); })
                            .attr("height", function(d){return h-y(d.CityMpg);})
                            .attr("fill","teal");
​
        barHolder.selectAll("text")
                 .data(data)
                 .enter()
                 .append("text")
                 .attr("x", function(d,i){return x(d.Model)+50; })
                 .attr("y",function(d){return y(d.CityMpg)+20; })
                 .text(function(d){return d.CityMpg;})
                 .attr("fill","white");
        // Add labels for each bar
​
    });
        
        
        </script>
    </body>
​
</html>
    