xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title> D3: A Scatterplot with length and width for Different Cars</title> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css"></style> </head> <body> <script type="text/javascript"> /* Reference: https://www.pshrmn.com/tutorials/d3/bar-charts/ Skills from bar chart was the key to create scatter plot, especially appending svg. */ var title = "Length and Width on Selected Cars"; var margin = {top:5, right:5, bottom:100, left:100}; var w_full = 1200; var h_full = 600; var w = w_full - margin.right - margin.left; var h = h_full - margin.top - margin.bottom; var x = d3.scaleLinear() .range([0,w]); var y = d3.scaleLinear() .range([h,0]); var svg = d3.select("body") .append("svg") .attr("width",w_full) .attr("height",50) .append("g") .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); svg.append("text") .text(title) .attr("x",w_full/2) .attr("y",25) .style("text-anchor","middle") .style("fill","black") .style("font-size",20); // Set up a svg on the top to put title d3.csv("cars.csv", function(error, data){ if(error) throw error; data.forEach(function(d){ d.Height = +d.Height; d.Hybrid = +d.Hybrid; d.Length = +d.Length; d.Model = d.Model; d.Width = +d.Width; }); // Import data console.log(data); x.domain([d3.min(data, function(d){return d.Length;})-10, d3.max(data, function(d){return d.Length;})+60]); y.domain([d3.min(data, function(d){return d.Length;})-20, d3.max(data, function(d){return d.Width;})+20]); svg = d3.select('body').append('svg') .attr("width",w_full) .attr("height",h_full) .append("g") .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var xAxis = d3.axisBottom(x); var yAxis = d3.axisLeft(y); var xAxisEle = svg.append('g') .classed('x axis',true) .attr('transform','translate(0,'+h+')') .call(xAxis); // Append x-axis and its labels xAxisEle.append("text") .attr("x",w_full/2) .attr("y",100) .style("text-anchor","middle") .style("fill","black") .attr("dy","-2.5em") .style("font-size",12) .text("Car Length"); var yAxisEle = svg.append("g") .classed("y axis",true) .call(yAxis); var yText = yAxisEle.append("text") .attr('transform', 'rotate(-90)translate(-' + h/2 + ',0)') .style("text-anchor","middle") .style("fill","black") .attr("dy","-2.5em") .style("font-size",12) .text("Car Width"); // Add y-axis label var dotPlotter = svg.append("g"); dotPlotter.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d){return x(d.Length);}) .attr("cy", function(d){return y(d.Width);}) .attr("r", 5) .attr("fill","black"); // Plot data dotPlotter.selectAll("text") .data(data) .enter() .append("text") //.append("circle") //.attr("r",4) .text(function(d){return d.Model;}) .attr("x", function(d){return x(d.Length);}) .attr("y", function(d){return y(d.Width)-10;}) .attr("fill","red") .attr("font-size","12px"); }); </script> </body></html> https://d3js.org/d3.v4.min.js
| cars.csv | index.html |