valueYear
desiredDataGapminder = gapminder.filter(d => d.year === valueYear)
.map(d => {return {
year : +d.year,
country : d.country,
cluster : +d.cluster,
pop : +d.pop,
life_expect : +d.life_expect,
fertility : +d.fertility
};}
)
//.filter(d => d.year != null)
.sort((a,b) => b.life_expect - a.life_expect);
width = 1000;
height = 500;
// Add X axis
xScale = d3.scaleLinear()
.domain([0,d3.max(desiredDataGapminder, d => d.fertility)])
.range([ 0, width - 50 ]);
// Add Y axis
yScale = d3.scaleLinear()
.domain([0,d3.max(desiredDataGapminder, d => d.life_expect)])
.range([ height - 50, 50]);
// escala para las areas
popScale = d3.scaleSqrt()
.domain([0,d3.max(desiredDataGapminder, d => d.pop)])
.range([0,40]);
xAxis = g => g
.attr("transform", `translate(0,${height - 50})`)
.call(d3.axisBottom(xScale).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", 50)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(desiredDataGapminder.fertility))
yAxis = g => g
.attr("transform", `translate(50,0)`)
.call(d3.axisLeft(yScale))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", 0)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(desiredDataGapminder.life_expect))
viewof valueYear = html`<input type=range min="1955" max="2005" value="1955" step="5">`
valueYear
scatterplot = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("fill", "none")
.selectAll("circle")
.data(desiredDataGapminder)
.join("circle")
.attr("cx", d => xScale(d.fertility))
.attr("cy", d => yScale(d.life_expect))
.attr("r", d => popScale(d.pop));
//.attr("fill", d => d3.schemeCategory10[d.clauster]);
// Specific to Observable
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
