Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
circle {fill: blue; opacity: 0.5}
.axis {font-size: 12px;}
.axis-title {font-size: 15px; fill: gray;}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
const width = 960;
const height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
const margins = {
top: 50,
bottom: 50,
left: 50,
right: 50
};
d3.json("nations.json", function(err, data) {
const circleRadius = 8;
const xExtent = d3.extent(data, (d) => d.income);
const yExtent = d3.extent(data, (d) => d.lifeExpectancy);
const xScale = d3.scaleLinear()
.domain(xExtent)
.range([margins.left, width - margins.right]);
const yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margins.bottom, margins.top]);
var circles = svg.append("g")
.attr("class", "circles")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d.income))
.attr("cy", (d) => yScale(d.lifeExpectancy))
.attr("r", circleRadius);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
const axisX = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - margins.bottom) + ")")
.call(xAxis);
const axisY = svg.append("g")
.call(yAxis)
.attr("class", "axis")
.attr("transform", "translate(" + margins.left + ",0)");
const titleX = axisX.append("text")
.text("Per capita income")
.attr("transform", "translate(" + [width - margins.right, 0 - margins.bottom / 4] + ")")
.attr("text-anchor", "end")
.attr("class", "axis-title");
const titleY = axisY.append("text")
.text("Life expectancy")
.attr("transform", "translate(" + [margins.left / 2, margins.top] + ")" + " rotate(-90)")
.attr("text-anchor", "end")
.attr("class", "axis-title");
})
</script>
</body>
https://d3js.org/d3.v4.min.js