D3 Examples - Assignment 4 - Trellis plots using D3

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Example based on https://bl.ocks.org/weiglemc/6185069 -->
<!-- Example based on https://bl.ocks.org/d3noob/5987480 -->
<!-- Example based on https://dimplejs.org/advanced_examples_viewer.html?id=advanced_trellis_bar -->
​
<style>
    /* set the CSS */
​
    body {
        font: 12px Arial;
    }
​
    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }
​
    .dot {
        stroke: #000;
    }
​
    .title {
        font-family: sans-serif;
        font-size: 20px;
    }
</style>
​
<body>
    <!-- load the d3.js library -->
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        // Set the dimensions of the canvas / graph
        var margin = {
            top: 30,
            right: 10,
            bottom: 20,
            left: 30
        },
            width = 400 - margin.left - margin.right,
            height = 240 - margin.top - margin.bottom;
        var maxX, maxY;
​
        d3.csv("cars.csv", function (csv) {
            csv = csv.filter(function (row) {
                return row['Year'] == '2011';
            })
            renderChart(csv);
        });
​
        function renderChart(data) {
            data = data.map(function (d) {
                return {
                    Height: +d.Height,
                    Width: +d.Width,
                    Make: d.Make,
                    Driveline: d.Driveline
                }
            });
​
            maxX = d3.max(data, function (d) {
                return d.Width;
            });
​
            maxY = d3.max(data, function (d) {
                return d.Height;
            });
​
            var carsByMake = d3.nest()
                .key(function (d) {
                    return d.Make;
                })
                .entries(data);
​
            // setup fill color
            var cValue = function (d) {
                return d.Driveline;
            },
                color = d3.scale.category10();
​
            // Set the ranges
            var x = d3.scale.linear().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);
​
            // Define the axes
            var xAxis = d3.svg.axis().scale(x)
                .orient("bottom").ticks(5);
​
            var yAxis = d3.svg.axis().scale(y)
                .orient("left").ticks(5);
​
            // Adds the svg canvas
            var chart1 = d3.select("body")
                .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 + ")");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart1.selectAll(".dot")
                .data(carsByMake[0].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart1.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[0].key);
​
            // Add the X Axis
            chart1.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart1.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
​
            // Adds the svg canvas
            var chart2 = d3.select("body")
                .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 + ")");
​
            //Create Title 
            chart2.append("text")
                .attr("class", "title")
                .attr("x", width / 2)
                .attr("y", 0)
                .style("text-anchor", "middle")
                .style("font-weight", "bolder")
                .text("Trellis plots using D3");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart2.selectAll(".dot")
                .data(carsByMake[1].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart2.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[1].key);
​
            // Add the X Axis
            chart2.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart2.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            // Adds the svg canvas
            var chart3 = d3.select("body")
                .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 + ")");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart3.selectAll(".dot")
                .data(carsByMake[2].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart3.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[2].key);
​
            // Add the X Axis
            chart3.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart3.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            // Adds the svg canvas
            var chart4 = d3.select("body")
                .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 + ")");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart4.selectAll(".dot")
                .data(carsByMake[3].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart4.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[3].key);
​
            // Add the X Axis
            chart4.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart4.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            // Adds the svg canvas
            var chart5 = d3.select("body")
                .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 + ")");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart5.selectAll(".dot")
                .data(carsByMake[4].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart5.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[4].key);
​
            // Add the X Axis
            chart5.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart5.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            // Adds the svg canvas
            var chart6 = d3.select("body")
                .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 + ")");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart6.selectAll(".dot")
                .data(carsByMake[5].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart6.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[5].key);
​
            // Add the X Axis
            chart6.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart6.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            // Adds the svg canvas
            var chart7 = d3.select("body")
                .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 + ")");
​
            chart7.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[6].key);
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart7.selectAll(".dot")
                .data(carsByMake[6].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            // Add the X Axis
            chart7.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart7.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            // Adds the svg canvas
            var chart8 = d3.select("body")
                .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 + ")");
​
            // Scale the range of the data
            x.domain([0, maxX]);
            y.domain([0, maxY]);
​
            chart8.selectAll(".dot")
                .data(carsByMake[7].values)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", function (d, i) {
                    return x(d.Width);
                })
                .attr("cy", function (d) {
                    return y(d.Height);
                })
                .attr("r", 3.5)
                .style("fill", function (d) {
                    return color(cValue(d));
                });
​
            chart8.append("g")
                .append("text")
                .attr("x", (width / 2))
                .attr("y", (height / 2))
                .attr("class", "label")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px")
                .attr("fill", '#6600ff')
                .text(carsByMake[7].key);
​
            // Add the X Axis
            chart8.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end")
                .text("Width");
​
            // Add the Y Axis
            chart8.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Height");
​
            var chart9 = d3.select("body")
                .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 + ")");
​
            // draw legend
            var legend = chart9.selectAll(".legend")
                .data(color.domain())
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) {
                    return "translate(0," + i * 22 + ")";
                });
​
            // draw legend colored rectangles
            legend.append("rect")
                .attr("x", width - 18)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", color);
​
            // draw legend text
            legend.append("text")
                .attr("x", width - 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function (d) {
                    return d;
                })
        }
    </script>
</body>
    