Observable Educators Network
Unlisted
Edited
Feb 3
4 forks
3 stars
data = d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv", d => {
d.price = +d.price
d.date = parseDate(d.date)
return d
})
parseDate = d3.timeParse("%b %Y")
parseDate("Jul 2001")
layers = d3.stack().keys(symbols)(grouped_stacked)
// grouped = Array.from(d3.group(data, d => d.date.getFullYear(), d => d.symbol))
grouped_rollup = Array.from(d3.rollup(data, v => d3.mean(v, v => v.price), d => d.date.getFullYear(), d => d.symbol))
symbols = Array.from(grouped_rollup[0][1]).map(d => d[0])
years = grouped_rollup.map(d => d[0])
grouped_stacked = grouped_rollup.map(d => {
let res = {}
res.year = d[0]
d[1].forEach((e, j) => {
res[j] = e
})
return res
})
x = d3.scaleBand()
.domain(years)
.range([margin.left, width - margin.right])
.padding(0)
x2 = d3.scaleBand()
.domain(symbols)
.range([0, x.bandwidth()])
x2.range()
max = d3.max(layers[layers.length - 1].map(d => d[1]))
y = d3.scaleLinear()
.domain([0, max])
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 20, right: 30, bottom: 30, left: 40})
height = 500
stream_chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
let c = d3.scaleOrdinal(d3.schemeCategory10).domain(symbols)
svg.append("g").selectAll("path").data(layers).enter()
.append("path")
.attr("d", function(d, i) {
return area(d)
})
.attr("fill", (d, i) => c(d.key))
return svg.node();
}
layers
area = d3.area().x(d => x(d.data.year)).y0(d => y(d[0])).y1(d => y(d[1]))
area(layers[0])
pie_data = Array.from(grouped_rollup[year][1])
pie_data.map(d => d[0])
x.domain()
x.domain()[year]
viewof year = html`<input type=range min=0 step=1 max=${x.domain().length - 1}>`
pie_chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width/2, -100, width, 200]);
const arc = d3.arc()
.innerRadius(0)
.outerRadius(100)
const pie = d3.pie().value(d => d[1])
let c = d3.scaleOrdinal(d3.schemeCategory10).domain(pie_data.map(d => d[0]))
svg.selectAll("path").data(pie(pie_data)).enter()
.append("path")
.attr("d", arc)
.attr("fill", d => c(d.data[0]))
.attr("stroke", "black")
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.
