Public
Edited
Aug 29, 2020
1 fork
viewof ingredientsInput = form(html`<form>
${ingredients.map(
d => `
<div>
<strong>${d}</strong>
<input name="${d}" type="range" min=0 max=360>
</div>
`
)}
</form>`)
md`Hello`
chart = {
const svg = d3
.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("font", "11px sans-serif");
const radius = Math.min(width, height) * 0.35;
const arcsIngredients = pie(dataIngredients);
const arcIngredients = d3
.arc()
.innerRadius(radius - 10)
.outerRadius(radius - 1);
const arcText = d3
.arc()
.innerRadius(radius)
.outerRadius(radius + 30);
const groupIngredients = svg.append("g").attr("class", "ingredients");
groupIngredients
.selectAll(".arc")
.data(arcsIngredients)
.join("path")
.attr("class", "arc")
.attr("fill", (d, i) => color(i))
.attr("d", d => {
const a = arcIngredients(d);
console.log(a);
return a;
});
let minY = -1000;
const minGap = 20;
svg
.selectAll(".label")
.data(arcsIngredients)
.join("text")
.attr("class", "label")
.text(d => d.data.name)
.attr("transform", d => {
const c = arcText.centroid(d);
let y = c[1];
if (y < minY + minGap) {
y = minY + minGap;
minY = minY + minGap;
} else {
minY = y;
}
return `translate(350,${y})`;
});
const arcsModes = pie(dataModes);
const arcModes = d3
.arc()
.innerRadius(radius - 45)
.outerRadius(radius - 20);
const arcModesText = d3
.arc()
.innerRadius(radius - 60)
.outerRadius(radius - 60);
const groupModes = svg.append("g").attr("class", "modes");
groupModes
.selectAll(".arc")
.data(arcsModes)
.join("path")
.attr("class", "arc")
.attr("fill", (d, i) => color(i))
.attr("d", d => {
const a = arcModes(d);
console.log(a);
return a;
});
minY = -1000;
groupModes
.selectAll(".label")
.data(arcsModes)
.join("text")
.attr("class", "label")
.text(d => d.data.name)
.attr("transform", d => {
const c = arcModesText.centroid(d);
let y = c[1];
if (y < minY + minGap) {
y = minY + minGap;
minY = minY + minGap;
} else {
minY = y;
}
return `translate(0,${y})`;
});
return svg.node();
}
dataModes = modes.map(d => ({ name: d, value: modesInput[d] }))
pie = d3.pie()
.padAngle(0.01)
.startAngle(0)
.endAngle(Math.PI)
.value(d => d.value)
.sort(null)
color = d3.scaleOrdinal().range(colors)
import {form} from "@mbostock/form-input"
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.
