xxxxxxxxxx<html lang="en"><meta charset="utf-8"><head> <title>AS4 Scatterplot Matrix</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .circle { fill: rgb(70,130,180); /*stroke: black;*/ /*stroke-weight: 0.2px;*/.; opacity: 0.5; } .title { font-family: sans-serif; font-size: 20px; } .axisLabels { font-family: sans-serif; font-size: 12px; } .plotnames { font-family: sans-serif; font-size: 14px; } .line { fill: none; stroke: black; stroke-width: 1; } </style></head><body> <script type="text/javascript"> // declare dimensions var h = 800, w = 800, margin = 100, H = 200, W = 200; // coordinates for lines var h1 = [[margin, margin], [margin+H,margin], [margin+2*H,margin], [margin+3*H,margin]], h2 = [[margin, margin+H], [margin+H,margin+H], [margin+2*H,margin+H], [margin+3*H,margin+H]], h3 = [[margin, margin+2*H], [margin+H,margin+2*H], [margin+2*H,margin+2*H], [margin+3*H,margin+2*H]], h4 = [[margin, margin+3*H], [margin+H,margin+3*H], [margin+2*H,margin+3*H], [margin+3*H,margin+3*H]], v1 = [[margin, margin], [margin,margin+H], [margin,margin+2*H], [margin,margin+3*H]], v2 = [[margin+H, margin], [margin+H,margin+H], [margin+H,margin+2*H], [margin+H,margin+3*H]], v3 = [[margin+2*H, margin], [margin+2*H,margin+H], [margin+2*H,margin+2*H], [margin+2*H,margin+3*H]], v4 = [[margin+3*H, margin], [margin+3*H,margin+H], [margin+3*H,margin+2*H], [margin+3*H,margin+3*H]]; // create svg variable var svg = d3.select("body") .append("svg") .attr("height", h) .attr("width", w); // load in data d3.csv("calData.csv", function(dataset) { // make strings numeric dataset.forEach(function(d) { d.Year = +d.Year; d.ConsumptionIndustrialCoal = +d.ConsumptionIndustrialCoal; d.ConsumptionIndustrialDistillateFuelOil = +d.ConsumptionIndustrialDistillateFuelOil; d.ConsumptionIndustrialNaturalGas = +d.ConsumptionIndustrialNaturalGas; }); var line = d3.line() .x(function(d) { return d[0]; }) .y(function(d) { return d[1]; }) // draw lines svg.append("path") .datum(h1) .attr("class", "line") .attr("d", line); svg.append("path") .datum(h2) .attr("class", "line") .attr("d", line); svg.append("path") .datum(h3) .attr("class", "line") .attr("d", line); svg.append("path") .datum(h4) .attr("class", "line") .attr("d", line); svg.append("path") .datum(v1) .attr("class", "line") .attr("d", line); svg.append("path") .datum(v2) .attr("class", "line") .attr("d", line); svg.append("path") .datum(v3) .attr("class", "line") .attr("d", line); svg.append("path") .datum(v4) .attr("class", "line") .attr("d", line); // define scales and axes var xScale1 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000]) .range([0, W]), xScale2 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialDistillateFuelOil})/20000)*20000]) .range([0, W]), xScale3 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialNaturalGas})/100000)*100000]) .range([0, W]), yScale1 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000]) .range([H, 0]), yScale2 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialDistillateFuelOil})/20000)*20000]) .range([H, 0]), yScale3 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialNaturalGas})/100000)*100000]) .range([H, 0]); var xAxis1 = d3.axisBottom() .scale(xScale1), xAxis2 = d3.axisTop() .scale(xScale2), xAxis3 = d3.axisBottom() .scale(xScale3), yAxis1 = d3.axisLeft() .scale(yScale1), yAxis2 = d3.axisRight() .scale(yScale2) .ticks(7), yAxis3 = d3.axisLeft() .scale(yScale3); // draw x axes svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin + " , " + margin*7 + ")") .call(xAxis1) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-1em") .attr("dy", "-0.6em") .attr("transform", "rotate(-90)"); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin*3 + " , " + margin + ")") .call(xAxis2) .selectAll("text") .style("text-anchor", "start") .attr("dx", "1em") .attr("dy", "1.2em") .attr("transform", "rotate(-90)"); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin*5 + " , " + margin*7 + ")") .call(xAxis3) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-1em") .attr("dy", "-0.6em") .attr("transform", "rotate(-90)"); // draw y axes svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin + ", " + margin + ")") .call(yAxis1); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin*7 + ", " + margin*3 + ")") .call(yAxis2); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin + ", " + margin*5 + ")") .call(yAxis3); // add chart title svg.append("text") .text("Scatterplot Matrix of Industrial Energy Consumption") .attr("class", "title") .attr("x", w/2) .attr("y", margin/2 - 10) .attr("text-anchor", "middle"); // add axis labels svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(40," + margin*2 + ")rotate(270)") // translate and rotate y axis label .text("Coal"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(40," + margin*4 + ")rotate(270)") // translate and rotate y axis label .text("Distilled Fuel Oil"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(40," + margin*6 + ")rotate(270)") // translate and rotate y axis label .text("Natural Gas"); svg.append("text") .attr("class", "axisLabels") .attr("x", margin*2) .attr("y", h-30) .attr("text-anchor", "middle") .text("Coal"); svg.append("text") .attr("class", "axisLabels") .attr("x", margin*4) .attr("y", h-30) .attr("text-anchor", "middle") .text("Distilled Fuel Oil"); svg.append("text") .attr("class", "axisLabels") .attr("x", margin*6) .attr("y", h-30) .attr("text-anchor", "middle") .text("Natural Gas"); // draw circles svg.selectAll("circle1") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin + ", " + margin + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale1(d.ConsumptionIndustrialCoal); }) .attr("cy", function(d) { return yScale1(d.ConsumptionIndustrialCoal); }) .attr("r", 3); svg.selectAll("circle2") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin*3 + ", " + margin + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .attr("cy", function(d) { return yScale1(d.ConsumptionIndustrialCoal); }) .attr("r", 3); svg.selectAll("circle3") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin*5 + ", " + margin + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale3(d.ConsumptionIndustrialNaturalGas); }) .attr("cy", function(d) { return yScale1(d.ConsumptionIndustrialCoal); }) .attr("r", 3); svg.selectAll("circle4") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin + ", " + margin*3 + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale1(d.ConsumptionIndustrialCoal); }) .attr("cy", function(d) { return yScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .attr("r", 3); svg.selectAll("circle5") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin*3 + ", " + margin*3 + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .attr("cy", function(d) { return yScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .attr("r", 3); svg.selectAll("circle6") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin*5 + ", " + margin*3 + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale3(d.ConsumptionIndustrialNaturalGas); }) .attr("cy", function(d) { return yScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .attr("r", 3); svg.selectAll("circle7") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin + ", " + margin*5 + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale1(d.ConsumptionIndustrialCoal); }) .attr("cy", function(d) { return yScale3(d.ConsumptionIndustrialNaturalGas); }) .attr("r", 3); svg.selectAll("circle8") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin*3 + ", " + margin*5 + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .attr("cy", function(d) { return yScale3(d.ConsumptionIndustrialNaturalGas); }) .attr("r", 3); svg.selectAll("circle9") .data(dataset) .enter() .append("circle") .attr("transform", "translate(" + margin*5 + ", " + margin*5 + ")") .attr("class", "circle") .attr("cx", function(d) { return xScale3(d.ConsumptionIndustrialNaturalGas); }) .attr("cy", function(d) { return yScale3(d.ConsumptionIndustrialNaturalGas); }) .attr("r", 3); }); </script></body> https://d3js.org/d3.v4.min.js