viewof boxWidth = Inputs.range([0, 1], {label: "Box width"})
<svg width=${width} height=${height} id="mySVG">
<rect x=0 y =0 width=${width/4} height=${height/4} fill="red"/>
<rect x=${width/2} y =0 width=${width/4} height=${height/4} fill="yellow"/>
<rect x=0 y =${height/2} width=${width/4} height=${height/4} fill="blue"/>
<rect x=${width/2} y =${height/2} width=${width/4} height=${height/4} fill="green"/>
<line x1=0 x2=${width} y1=${height/2} y2=${height/2} stroke="black" stroke-width=2 />
<line x1=${width/2} x2=${width/2} y1=${0} y2=${height} stroke="black" stroke-width=2 />
</svg>
{
const mySVG = d3.select('#mySVG')
const zoom = d3.zoom().extent([[0,0],[width/2,height/2]]).scaleExtent()
}
height = 400
width=800
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.
