Built with blockbuilder.org
xxxxxxxxxx
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.title {
font-family: "Courier";
font-size: 32px;
fill: #000;
}
.axis {
font-family: "Courier";
font-size: 11px;
fill: #808080;
}
.circle {
fill: lime;
fill-opacity: 1.0;
stroke: limegreen;
}
</style>
</head>
<body>
<script>
d3.json("nations.json", function(error, json) {
if (error) throw error;
// set variables
var data = json;
var width = 960;
var height = 500;
var margin = { top: 75, right: 30, bottom: 20, left: 30};
// set min-max
var xExtent = d3.extent(data, function(d) { return d.income });
var yExtent = d3.extent(data, function(d) { return d.lifeExpectancy });
// set scales
var xScale = d3.scaleLinear()
.domain(xExtent)
.range([margin.left, width - margin.right]);
var yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margin.bottom, margin.top]);
// set axes
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
// create svg
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// create circles
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {return xScale(d.income) })
.attr("cy", function(d) { return yScale(d.lifeExpectancy)} )
.attr("r", 10)
.attr("class", "circle");
// create axes
var axisX = svg.append("g")
.call(xAxis)
.attr("transform", "translate(" + [0, height - margin.bottom] + ")")
.attr("class", "axes")
var axisY = svg.append("g")
.call(yAxis)
.attr("transform", "translate(" + [margin.left, 0] + ")")
.attr("class", "axes");
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js