| license: mit |
A standalone D3 scatter plot.
This is example 106 of the screencast Introduction to D3
forked from curran's block: Standalone Scatter Plot
forked from uicoded's block: Standalone Scatter Plot
forked from uicoded's block: Standalone Scatter Plot
forked from uicoded's block: MPG vs Cost
forked from uicoded's block: Milage vs Price
| Year | Model | Type | MPG | Price | |
|---|---|---|---|---|---|
| 2017 | BMW i3 BEV | electric | 124 | 42000 | |
| 2017 | BMW 328d xDrive 2.0L 4 cyl Automatic (S8) | Diesel | 34 | 42000 | |
| 2017 | Audi A3 e-tron 1.4L 4 cyl Automatic (AM-S6) | Gas and Electricity | 84 | 47000 | |
| 2017 | Honda Odyssey 3.5L 6 cyl Automatic 6-spd | Gas | 22 | 30000 |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 Example</title> | |
| <script src="https://cdn.jsdelivr.net/npm/d3@3.5.17/d3.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet"> | |
| <style> | |
| .axis text { | |
| font-family: 'PT Sans Narrow', sans-serif; | |
| font-size: 16pt; | |
| } | |
| .axis .label { | |
| font-size: 20pt; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var outerWidth = 960; | |
| var outerHeight = 500; | |
| var margin = { left: 60, top: 5, right: 10, bottom: 60 }; | |
| var r = 10; | |
| var xColumn = "MPG"; | |
| var yColumn = "Price"; | |
| var xAxisLabelText = "Miles per Gallon"; | |
| var xAxisLabelOffset = 48; | |
| var yAxisLabelText = "Price"; | |
| var yAxisLabelOffset = 30; | |
| var innerWidth = outerWidth - margin.left - margin.right; | |
| var innerHeight = outerHeight - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", outerWidth) | |
| .attr("height", outerHeight); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var xAxisG = g.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + innerHeight + ")") | |
| var xAxisLabel = xAxisG.append("text") | |
| .style("text-anchor", "middle") | |
| .attr("x", innerWidth / 2) | |
| .attr("y", xAxisLabelOffset) | |
| .attr("class", "label") | |
| .text(xAxisLabelText); | |
| var yAxisG = g.append("g") | |
| .attr("class", "y axis"); | |
| var yAxisLabel = yAxisG.append("text") | |
| .style("text-anchor", "middle") | |
| .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)") | |
| .attr("class", "label") | |
| .text(yAxisLabelText); | |
| var xScale = d3.scale.linear().range([0, innerWidth]); | |
| var yScale = d3.scale.linear().range([innerHeight, 0]); | |
| var xAxis = d3.svg.axis().scale(xScale).orient("bottom") | |
| .ticks(10) | |
| .tickFormat(d3.format("s")) | |
| .outerTickSize(0); | |
| var yAxis = d3.svg.axis().scale(yScale).orient("left") | |
| .ticks(5) | |
| .tickFormat(d3.format("s")) | |
| .outerTickSize(0); | |
| function render(data){ | |
| xScale.domain(d3.extent(data, function (d){ return d[xColumn]; })); | |
| yScale.domain(d3.extent(data, function (d){ return d[yColumn]; })); | |
| xAxisG.call(xAxis); | |
| yAxisG.call(yAxis); | |
| var circles = g.selectAll("circle").data(data); | |
| circles.enter().append("circle"); | |
| circles | |
| .attr("cx", function (d){ return xScale(d[xColumn]); }) | |
| .attr("cy", function (d){ return yScale(d[yColumn]); }) | |
| .attr("r", r) | |
| .attr("fill", "gray"); | |
| circles.exit().remove(); | |
| } | |
| function row(d){ | |
| d.Year = +d.Year; | |
| d.Price = +d.Price; | |
| d.MPG = +d.MPG; | |
| return d; | |
| } | |
| d3.csv("car-makers.csv", row, render); | |
| </script> | |
| </body> | |
| </html> |