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 dataset1 = [];
var dataset2 = [];
d3.csv("billionaires.csv", function(error, data) {
if(error) throw error;
// format the data
data.forEach(function(d) {
if(d.year=="2014"&&d.gender=="male"){
dataset1.push({age:parseInt(d.age), worth:parseFloat(d.worth)});
}
if(d.year=="2014"&&d.gender=="female"){
dataset2.push({age:parseInt(d.age), worth:parseFloat(d.worth)});
}
});
console.log(dataset1);
console.log(dataset2);
var xScale1 = d3.scaleLinear()
.range([0,innerWidth])
.domain([0, d3.max(dataset1, function(d){ return d.age; })]);
var yScale1 = d3.scaleLinear()
.range([innerHeight,innerHeight/2+30])
.domain([0, d3.max(dataset1, function(d){ return d.worth; })]);
var xScale2 = d3.scaleLinear()
.range([0,innerWidth])
.domain([0, d3.max(dataset2, function(d){ return d.age; })]);
var yScale2 = d3.scaleLinear()
.range([innerHeight/2,20])
.domain([0, d3.max(dataset1, function(d){ return d.worth; })]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (700) + " ," +
(220) + ")")
.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("Female Age vs worth");
// text label for the x axis
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) + " ," +
(220) + ")")
.attr("dy", "1em")
.style("font-size", "13px")
.style("text-anchor", "middle")
.text("billion USD");
svg.append("text")
.attr("x", (width / 2)-100)
.attr("y", 250-(margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Male Age vs worth");
var g = svg.append('g')
.attr('transform', "translate("+margin.left + "," + margin.top +")")
.attr('width', innerWidth)
.attr('height',innerHeight)
var xAxis1 = d3.axisBottom()
.scale(xScale1)
.tickPadding(15);
var yAxis1 = d3.axisLeft()
.scale(yScale1)
.tickPadding(15);
var xAxis2 = d3.axisBottom()
.scale(xScale2)
.tickPadding(15);
var yAxis2 = d3.axisLeft()
.scale(yScale2)
.tickPadding(15);
var xAxisG1 = g.append('g')
.attr("transform", "translate(0," + innerHeight/2 + ")");
var yAxisG1 = g.append('g')
// .attr("transform", "translate(0," + innerHeight/2 + ")");
var xAxisG2 = g.append('g')
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG2 = g.append('g');
// var circle = svg.data(dataset1)
// .enter().append("g")
// .attr("cx", function (d) { if(d.age!=-1&&d.gender=="male"){return xScale1(d.age);} if(d.age!=-1&&d.gender=="female"){return xScale2(d.age);}})
// .attr("cy", function (d) { if(d.age!=-1&&d.gender=="male"){return yScale1(d.worth);} else if(d.age!=-1&&d.gender=="male"){return yScale2(d.worth);}})
// .attr("r", 2)
// .attr("fill","red");
g.selectAll('circle')
.data(dataset2)
.enter().append('svg:circle')
.attr('cx', function (d) { if(d.age>0){return xScale2(d.age)}; } )
.attr('cy', function (d) { if(d.age>0){return yScale2(d.worth)}; } )
.attr('r', 2)
.attr("fill", "blue");
g.selectAll('circle')
.data(dataset1)
.enter().append('svg:circle')
.attr('cx', function (d) { if(d.age>0){return xScale1(d.age)}; } )
.attr('cy', function (d) { if(d.age>0){return yScale1(d.worth)}; } )
.attr('r', 2)
.attr("fill", "blue");
// g
// .data(dataset2)
// .enter().append('svg:circle')
// .attr('cx', function (d) { if(d.age!=-1){return xScale2(d.age)}; } )
// .attr('cy', function (d) { if(d.age!=-1){return yScale2(d.worth)+100}; } )
// .attr('r', 2)
// .attr("fill", "blue");
xAxisG1.attr("class","axis").call(xAxis1);
yAxisG1.attr("class","axis").call(yAxis1);
xAxisG2.attr("class","axis").call(xAxis2);
yAxisG2.attr("class","axis").call(yAxis2);
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js