//only chrome...
//labels spaz
{
await Lines(await visibility());
await Horizons();
await Areas();
await StackedArea();
await StreamAreas();
await OverlappingArea();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
line(Symbols[0].values)
data = Symbols[0]
html`<style>
path{
fill:none;
stroke:black;
}
</style>`
svg = d3.select(SVG)
series = d3
.stack()
.keys(keys)
.offset(d3.stackOffsetWiggle)
.order(d3.stackOrderReverse)(Symbols2)
Symbols2 = d3
.groups(csvData, d => +d.date)
.map(x => {
let obj = {};
obj.date = new Date(x[0]);
x[1].map(v => {
obj[v.symbol] = +v.price;
});
return obj;
})
values = d3.rollups(csvData, ([d]) => d.price, d => +d.date, d => d.symbol)
// values = Array.from(
// d3.rollup(csvData, ([d]) => d.price, d => +d.date, d => d.symbol)
// ).map(x => {
// x[0] = d3.timeParse('%Q')(x[0]);
// return x;
// })
Symbols.map((x, i) => {
x.values.map((v, ii) => {
let symbols = Symbols.filter((_, j) => j > i);
v.price0 = d3.sum(symbols.map(x => x.values[ii].price));
return v;
});
return x;
})
axis = d3
.line()
.x(({ date }) => x(date))
.y(h)
.curve(d3.curveNatural)
keys = Symbols.map(x => x.key)
radius = 5
// symbolGroup = svg
// .selectAll(".symbol")
// .data(Symbols, d => d.key)
// .join("g")
// .attr("class", "symbol")
area(Symbols[0].values)
area = d3
.area()
.x(({ date }) => x(date))
.y1(({ price }) => y(price))
.curve(d3.curveNatural)
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.
