pixel flipper, data sifter. trying to see what I can while I'm here
Published
Edited
Nov 23, 2021
8 stars
import { Treemap } from "@d3/treemap"
import { csv } from "@kerryrodden/sequences-sunburst"
chart = Treemap(csv, {
path: d => d[0].replace(/-/g, "/"),
value: d => d ? +d[1] : 0,
group: d => {
return d[0] // this wouldn't be what you usually want, but it does make for a pretty tree map
},
title: d => d[0],
width: width,
height: width
})
// this will give back 1000s of swatches since we give each unique sequence a color via the `group` accessor above. it's the mistake that made it beautifu...
// key = Swatches(chart.scales.color)
chart2 = Treemap(csv, {
path: d => d[0].replace(/-/g, "/"),
value: d => d ? +d[1] : 0,
group: d => {
let s = d[0].split("-").slice(-2)
if(s[1] === "end" || !s[1]) return s[0]
return s[1]
},
title: d => d[0],
width: width,
height: width
})
Swatches(chart2.scales.color)
import {Swatches} from "@d3/color-legend"
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.
