Built with blockbuilder.org
xxxxxxxxxx
<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), gender:d.gender});
}
});
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 vs Gender");
svg.append("text")
.attr("x", 150)
.attr("y", 30)
.attr("text-anchor", "middle")
.style("font-size", "10px")
.text("Male");
svg.append("text")
.attr("x", 150)
.attr("y", 50)
.attr("text-anchor", "middle")
.style("font-size", "10px")
.text("Female");
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", function(d){if(d.gender=="male"){return "blue"} else{return "red"}});
// var svgContainer = d3.select("body").append("svg")
// .attr("width", 200)
// .attr("height", 200);
//Draw the Circle
var circle = svg.append("circle")
.attr("cx", 130)
.attr("cy", 27)
.attr("r", 5)
.attr("fill","blue");
var circle = svg.append("circle")
.attr("cx", 130)
.attr("cy", 47)
.attr("r", 5)
.attr("fill","red");
xAxisG.attr("class","axis").call(xAxis);
yAxisG.attr("class","axis").call(yAxis);
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js