xxxxxxxxxx<html lang="en"><meta charset="utf-8"><head> <title>AS4 Trellis Plot</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .circle { /*fill: rgb(220,20,60);*/ /*stroke: black;*/ /*stroke-weight: 0.2px;*/ opacity: 0.7; } .title { font-family: sans-serif; font-size: 20px; } .axisLabels { font-family: sans-serif; font-size: 10px; } .plotnames { font-family: sans-serif; font-size: 14px; } </style></head><body> <script type="text/javascript"> // declare dimensions var h = 500, w = 1000, margin = 100, plotH = 200, plotW = 200; var d = ["ConsumptionIndustrialCoal", "ConsumptionIndustrialDistillateFuelOil", "ConsumptionIndustrialNaturalGas"]; var xAxisYPos = h-margin, yAxisXPos = margin*2, yAxisXPos2 = margin*2 + plotW, yAxisXPos3 = margin*3 + 2*plotW; var titleY = margin/2, titleX1 = plotW/2, titleX2 = margin + plotW/2 + plotW, titleX3 = margin*2 + plotW/2 + 2*plotW; var yLabXTrans = h - margin - plotH/2; // 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; }); // define scales and axes var xScale = d3.scaleLinear() .domain([d3.min(dataset, function(d) { return d.Year;}), d3.max(dataset, function(d) { return d.Year})]) .range([0, plotW]), yScale1 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000]) .range([plotH, 0]), yScale2 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialDistillateFuelOil})/20000)*20000]) .range([plotH, 0]), yScale3 = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialNaturalGas})/100000)*100000]) .range([plotH, 0]); var xAxis = d3.axisBottom() .scale(xScale) .tickValues(d3.range(d3.min(dataset, function(d) { return d.Year;}), d3.max(dataset, function(d) { return d.Year;}) + 1, 18)) // add 1 to include upper bound .tickFormat(d3.format("d")), yAxis1 = d3.axisLeft() .scale(yScale1), yAxis2 = d3.axisLeft() .scale(yScale2), yAxis3 = d3.axisLeft() .scale(yScale3); // draw axes svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin + " , " + xAxisYPos + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin + ", " + yAxisXPos + ")") .call(yAxis1); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisXPos2 + " , " + xAxisYPos + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisXPos2 + ", " + yAxisXPos + ")") .call(yAxis2); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisXPos3 + " , " + xAxisYPos + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisXPos3 + ", " + yAxisXPos + ")") .call(yAxis3); // add chart title svg.append("text") .text("Industrial Consumption of Various Energy Types by Year") .attr("class", "title") .attr("x", w/2) .attr("y", margin/2) .attr("text-anchor", "middle"); // add plot titles svg.append("text") .text("Coal") .attr("class", "plotnames") .attr("x", plotW/2) .attr("y", plotH/2) .attr("transform", "translate(" + titleX1 + ", " + titleY + ")") .attr("text-anchor", "middle"); svg.append("text") .text("Distillate Fuel Oil") .attr("class", "plotnames") .attr("x", plotW/2) .attr("y", plotH/2) .attr("transform", "translate(" + titleX2 + ", " + titleY + ")") .attr("text-anchor", "middle"); svg.append("text") .text("Natural Gas") .attr("class", "plotnames") .attr("x", plotW/2) .attr("y", plotH/2) .attr("transform", "translate(" + titleX3 + ", " + titleY + ")") .attr("text-anchor", "middle"); // add axis labels svg.append("text") .attr("class", "axisLabels") .attr("x", plotW*2 + 3*margin + plotW/2) .attr("text-anchor", "middle") .attr("y", h - margin/2) .text("Year"); svg.append("text") .attr("class", "axisLabels") .attr("x", w/2) .attr("text-anchor", "middle") .attr("y", h - margin/2) .text("Year"); svg.append("text") .attr("class", "axisLabels") .attr("x", margin + plotW/2) .attr("text-anchor", "middle") .attr("y", h - margin/2) .text("Year"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(30, " + yLabXTrans + ")rotate(270)") // translate and rotate y axis label .text("Consumption (Million BTU)"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(330, " + yLabXTrans + ")rotate(270)") // translate and rotate y axis label .text("Consumption (Million BTU)"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(630, " + yLabXTrans + ")rotate(270)") // translate and rotate y axis label .text("Consumption (Million BTU)"); // draw circles svg.selectAll("circle1") .data(dataset) .enter() .append("circle") .attr("transform", "translate(100,200)") .attr("class", "circle") .attr("cx", function(d) { return xScale(d.Year); }) .attr("cy", function(d) { return yScale1(d.ConsumptionIndustrialCoal); }) .style("fill", "rgb(165,42,42)") .attr("r", 3); svg.selectAll("circle2") .data(dataset) .enter() .append("circle") .attr("transform", "translate(400,200)") .attr("class", "circle") .attr("cx", function(d) { return xScale(d.Year); }) .attr("cy", function(d) { return yScale2(d.ConsumptionIndustrialDistillateFuelOil); }) .style("fill", "rgb(204,204,0)") .attr("r", 3); svg.selectAll("circle3") .data(dataset) .enter() .append("circle") .attr("transform", "translate(700,200)") .attr("class", "circle") .attr("cx", function(d) { return xScale(d.Year); }) .attr("cy", function(d) { return yScale3(d.ConsumptionIndustrialNaturalGas); }) .style("fill", "rgb(95,158,160)") .attr("r", 3); }); </script></body> https://d3js.org/d3.v4.min.js