Built with blockbuilder.org
forked from dejso2's block: D3 práctica
forked from dejso2's block: D3 práctica
xxxxxxxxxx
!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.barras div {
margin: 2px;
padding: 10px;
text-align: right;
color: white;
}
</style>
</head>
<body>
<h1>Life expectancy vs. Fertility</h1>
<script>
const totalWidth = 900;
const totalHeight = 500;
var margin = {top: 80, right: 180, bottom: 100, left:100};
var width = totalWidth - margin.left - margin.right;
var height = totalHeight - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", totalWidth)
.attr("height", totalWidth);
var scatter = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
function typeClean(row){
r = {}
r.country = row['Country']
r.year = row["Year"]
r.fertility = parseFloat(row["fertility"]) //eje x
r.life = parseFloat(row["life"]) //eje y
r.population = parseFloat(row["population"])
r.child_mortality = row['child_mortality']
r.gdp = row['gdp']
r.region = row["region"]
if (r.year == 1970){
return r;
}
}
d3.csv("gapminder_data.csv",
row => typeClean(row)).then(datos =>
{
//Scales
const xExtent = d3.extent(datos, d => d.fertility)
const reg = d3.keys(datos, d => d.region)
const xScale = d3.scaleLinear()
.domain(xExtent)
.range([0,width])
.nice();
const yMax = d3.max(datos, d => d.life)
const yScale = d3.scaleLinear()
.domain([0,yMax])
.range([height,0])
.nice();
const popMax = d3.max(datos, d => d.population)
const popMin = d3.min(datos, d => d.population)
var sqrtScale = d3.scaleSqrt()
.domain([0, popMax])
.range([2, 30])
var colorScale = d3.scaleOrdinal(d3.schemeCategory10)
const xAxis = d3.axisBottom()
.scale(xScale)
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10)
scatter.append('g')
.call(yAxis)
scatter.append('g')
.call(xAxis)
.attr("transform", `translate(0,${height})`)
scatter.selectAll("circle")
.data(datos)
.enter().append("circle")
.attr("cx",d => xScale(d.fertility))
.attr("cy",d => yScale(d.life))
.attr("r", d => sqrtScale(d.population))
.attr("width",2)
.attr("height",d => yScale(d.fertility))
.attr("stroke", "#FFF")
.attr("fill", d => colorScale(d.region));
svg.append("g")
.append("text")
.classed("label", true)
.attr("x", totalHeight-50)
.attr("y", totalHeight-65)
.style("text-anchor", "end")
.text("Fertility");
svg.append("g")
.append("text")
.classed("label", true)
.attr("transform", "rotate(-90)")
.attr("x", -margin.right*1.6)
.attr("y", height/2.7)
.attr("dy", "-3em")
.style("text-anchor", "start")
.text("Life Expectancy");
// draw legend
var legend = svg.selectAll(".legend")
.data(colorScale.domain())
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.data(datos)
.attr("x", totalWidth-margin.right+150)
.attr("y", margin.top)
.attr("width", 18)
.attr("height", 18)
.style("fill", d => colorScale(d.region));
// draw legend text
legend.append("text")
.data(datos)
.attr("x", totalWidth-margin.right+140)
.attr("y", margin.top+9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(d => d.region)
});
</script>
</body>
https://d3js.org/d3.v5.min.js