xxxxxxxxxx<html lang="en"><meta charset="utf-8"><head> <title>AS4 Bivariate Scatterplot</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.6; } .title { font-family: sans-serif; font-size: 20px; } .axisLabels { font-family: sans-serif; font-size: 14px; } </style></head><body> <script type="text/javascript"> // declare dimensions var h = 500, w = 800, margin = 100, axisBuffer = 20; var xAxisYPos = h-margin, yAxisXPos = margin; // 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.ConsumptionIndustrialCoal = +d.ConsumptionIndustrialCoal; d.ConsumptionIndustrialKerosene = +d.ConsumptionIndustrialKerosene; }); // define scales and axes var xScale = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return Math.log(d.ConsumptionIndustrialKerosene)})/1)*1]) .range([margin, w-margin]), yScale = d3.scaleLinear() .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.ConsumptionIndustrialCoal})/10000)*10000]) .range([h-margin, margin]); var xAxis = d3.axisBottom() .scale(xScale), yAxis = d3.axisLeft() .scale(yScale); // draw x axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(0, " + xAxisYPos + ")") .call(xAxis); // draw y axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisXPos + ", 0)") .call(yAxis); // add chart title svg.append("text") .text("Kerosene Consumption against Coal Consumption by Industrial Sector") .attr("class", "title") .attr("x", w/2) .attr("y", margin/2) .attr("text-anchor", "middle"); // add axis labels svg.append("text") .attr("class", "axisLabels") .attr("x", w/2) .attr("text-anchor", "middle") .attr("y", h - margin/2) .text("Log Kerosene Consumption by Industrial Sector (Million BTU)"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(25, " + h/2 + ")rotate(270)") // translate and rotate y axis label .text("Coal Consumption by Industrial Sector (Million BTU)"); // draw circles svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("class", "circle") .attr("cx", function(d) { return xScale(Math.log(d.ConsumptionIndustrialKerosene)); }) .attr("cy", function(d) { return yScale(d.ConsumptionIndustrialCoal); }) .attr("r", 3); }); </script></body> https://d3js.org/d3.v4.min.js