D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ByronHan333
Full window
Github gist
scatterbi
Built with
blockbuilder.org
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://d3js.org/d3.v4.min.js"></script> <title>scatter</title> <style> body { margin: 0px; } </style> </head> <body> <script> var width = 960; var height = 500; var margin = { left: 100, right: 250, top: 20, bottom: 120 }; var innerWidth = width - margin.left - margin.right; var innerHeight = height - margin.top - margin.bottom; var dataset = []; d3.csv("billionaires.csv", function(error, data) { if(error) throw error; // format the data data.forEach(function(d) { if(d.year=="2014"){ dataset.push({age:parseInt(d.age), worth:parseFloat(d.worth)}); } }); console.log(dataset); var xScale = d3.scaleLinear() .range([0,innerWidth]) .domain([0, d3.max(dataset, function(d){ return d.age; })]); var yScale = d3.scaleLinear() .range([innerHeight,0]) .domain([0, d3.max(dataset, function(d){ return d.worth; })]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) svg.append("text") .attr("transform", "translate(" + (700) + " ," + (400) + ")") .style("text-anchor", "middle") .style("font-size", "13px") .text("Age"); // text label for the y axis svg.append("text") .attr("transform", "translate(" + (60) + " ," + (20) + ")") .attr("dy", "1em") .style("font-size", "13px") .style("text-anchor", "middle") .text("billion USD"); svg.append("text") .attr("x", (width / 2)-100) .attr("y", 30-(margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Age vs worth"); var g = svg.append('g') .attr('transform', "translate("+margin.left + "," + margin.top +")") .attr('width', innerWidth) .attr('height',innerHeight) var xAxis = d3.axisBottom() .scale(xScale) .tickPadding(15); var yAxis = d3.axisLeft() .scale(yScale) .tickPadding(15); var xAxisG = g.append('g') .attr("transform", "translate(0," + innerHeight + ")"); var yAxisG = g.append('g'); g.selectAll('circle') .data(dataset) .enter().append('svg:circle') .attr('cx', function (d) { if(d.age!=-1){return xScale(d.age)}; } ) .attr('cy', function (d) { if(d.age!=-1){return yScale(d.worth)}; } ) .attr('r', 2) .attr("fill", "blue"); xAxisG.attr("class","axis").call(xAxis); yAxisG.attr("class","axis").call(yAxis); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js