md`# Weighted Circle Packing`
// viewof size = slider({min: "150", max: 700, step:10, title: "Size:"})
size = 900
// viewof marginSize = slider({min: 0 , max:50, step:10, title: "Margin:"})
// margin = ({top: marginSize, right: marginSize, bottom: marginSize, left: marginSize })
colorDepth = d3.scaleLinear()
.domain([0, 5])
.range([fromColor,toColor])
.interpolate(d3.interpolateHcl)
ramp(d3.interpolateHcl(fromColor, toColor))
viewof toColor = color({
value: "#2171b5",
title: "To Color"
})
pack = data => d3.pack()
.size([size, size])
.padding(3)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
md`# Library`
import {ramp} from "@mbostock/color-ramp"
d3 = require("d3@6")
import {slider, radio, text, select, color} from '@jashkenas/inputs'
md`## Reference
* https://observablehq.com/@d3/zoomable-circle-packing
* https://observablehq.com/@d3/working-with-color
`
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.
