Public
Edited
May 3, 2020
1 fork
arc_basic = d3.arc()
.innerRadius(50)
.outerRadius(75)
.startAngle(0)
.endAngle(2*Math.PI)
html`<svg viewBox="-150 -150 300 300" style="max-width: 300px;">
${Array.from({length: n}, (_, i) => svg`<path stroke="black" fill="steelblue" d="${arc()}"></path>`)}
</svg>`
arc = d3.arc()
.innerRadius(n+50)
.outerRadius(n+75)
.startAngle(0)
.endAngle(2*Math.PI)
html`<svg viewBox="-150 -150 300 300" style="max-width: 300px;">
${svg`<path stroke="black" fill="#8c241b" d="${arc()}"></path>`}
</svg>`
// this is a secondary inner tubing
arc2 = d3.arc()
.innerRadius(n+30)
.outerRadius(n+50)
.startAngle(0)
.endAngle(2*Math.PI)
html`<svg viewBox="-150 -150 300 300" style="max-width: 300px;">
${svg`<path stroke="none" fill="#8c241b" d="${arc()}"></path>`}
${svg`<path stroke="none" fill="#c98a7d" d="${arc2()}"></path>`}
</svg>`
outer_arc = d3.arc()
.innerRadius(55)
.outerRadius(60)
.startAngle(0)
.endAngle(2*Math.PI)
inner_arc = d3.arc()
.innerRadius(50 - inflammation/3)
.outerRadius(55)
.startAngle(0)
.endAngle(2*Math.PI)
html`<svg viewBox="0 0 400 400" style="max-width: 600px;">
${my_chart_styled}
</svg>`
d3 = require("d3@5")
chart_width=400;
chart_height=400
formatDay = d => "SMTWTFS"[d.getUTCDay()]
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.
