year1955 = gapminder.filter(d => d.year === 1955)
margin = [{ 'top':10, 'right': 20, 'bottom': 10, 'left': 20 }]
width = 600 - margin[0].left - margin[0].right
height = 600 - margin[0].top - margin[0].bottom
heightScale = d3.scaleLinear()
.domain([0, d3.max(year1955, d=> d.fertility)]) //data
.range([height-20, 0]) // maps to drawing area
widthScale = d3.scaleLinear()
.domain([0, d3.max(year1955, d=> d.life_expect)]) //data
.range([0, width-20]) // maps to drawing area
chart1995 = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('circle')
.data(year1955)
.join('circle')
.attr('fill', 'lightblue')
.attr('r' ,10)
.attr('cx', d => widthScale(d.life_expect))
.attr('cy', d => heightScale(d.fertility))
const x_axis = d3.axisBottom()
.scale(widthScale)
const y_axis = d3.axisLeft()
.scale(heightScale)
svg.append('g').attr("transform",`translate(50, ${height-20})`).call(x_axis)
svg.append('g').attr("transform", "translate(70, 10)").call(y_axis)
return svg.node();
}
import {form} from "@mbostock/form-input"
viewof yearInput = form(html`<form>
<div>
<label>
<input name="yr" type=range min="1955" max="2005" step="5">
<i>year</i>
</label>
</div>
</form>`)
selectedYr = gapminder.filter(d => d.year == yearInput.yr)
yearInput.yr
scatterPlot = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('circle')
.data(selectedYr)
.join('circle')
.attr('fill', 'lightblue')
.attr('r' ,10)
.attr('cx', d => widthScale(d.life_expect))
.attr('cy', d => heightScale(d.fertility))
const x_axis = d3.axisBottom()
.scale(widthScale)
const y_axis = d3.axisLeft()
.scale(heightScale)
svg.append('g').attr("transform",`translate(50, ${height-20})`).call(x_axis)
svg.append('g').attr("transform", "translate(70, 10)").call(y_axis)
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.
