Teacher Salary Between 2016 and 2020
Number of Middle Age Himalayan Climbers Is Increasing Over Time
overlap = 7
height = 1292
//data.series.length * 17
margin = ({top: 120, right: 40, bottom: 50, left: 100})
x = d3.scaleLinear()
.domain(d3.extent(data.age))
.range([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(data.series.map(d => d.name))
.range([margin.top,height - margin.bottom])
z = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()
// define distance between bars
.range([0,-overlap * y.step()])
width
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom + 10})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickPadding(10)
.tickSizeOuter(0)
.tickSizeInner(10))
// .call(g => g.select(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSize(0).tickPadding(10))
.call(g => g.select(".domain").remove())
area = d3.area()
.curve(d3.curveBasis)
.defined(d => !isNaN(d))
.x((d, i) => x(data.age[i]))
.y0(0)
.y1(d => z(d))
line = area.lineY1()
color = d3.scaleSequential(d3.interpolate('#6D83F2','white'))
// a7a29f
data2 = d3.csvParse(await FileAttachment("data@4.csv").text(), d3.autoType)
data.series.reverse()
data = {
const data = d3.csvParse(await FileAttachment("data@4.csv").text(), d3.autoType);
const age = Array.from(d3.group(data, d => +d.age).keys()).sort(d3.ascending)
return {
age: age,
series: d3.groups(data, d => d.year).map(([name, values]) => {
const value = new Map(values.map(d => [+d.age, d.n]));
return {name, values: age.map(d => value.get(d))};
})
}
}
d3 = require("d3@6")
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.
