All examples By author By category About

jo6gauri

Full window Github gist

Assignment 4 - Trellis plots using D3

<!DOCTYPE html>
<meta charset="utf-8">

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>
    
    <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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js