chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", width)
.attr("height", height)
.style("border", "1px solid lightgrey");
// Radiale Achse:
const axisGrid = svg.append("g");
const labelLayout = (label, x) => {
let lines = label.split("|");
return `<tspan x="${x}">${lines[0]}</tspan><tspan x="${x}" dy="12">${lines[1]}</tspan>`;
};
// Kreise
axisGrid
.selectAll("circle")
.data(radialTicks)
.join("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", (d) => rScale(d))
.attr("fill", "none")
.attr("stroke", (d, i) => (i === 0 ? "black" : "darkgrey"))
.attr("stroke-width", 1);
// Circle Labels
axisGrid
.selectAll("text")
.data(radialTicks)
.join("text")
.attr("class", "legend")
.style("font-size", "10px")
.attr("text-anchor", "start")
.attr("font-family", "GT America")
.attr("fill", "darkgrey")
.attr("dy", "0.35em")
.attr("x", 7)
.attr("y", (d, i) => -rScale(d) + 10)
.text((d) => (d > 0 ? d : ""));
// Winkel-Achse:
const axis = svg.append("g");
// Y-Axis
axis
.selectAll("line")
.data(data)
.join("line")
.attr("x1", (d) => d3.pointRadial(x(d.label), innerRadius)[0])
.attr("y1", (d) => d3.pointRadial(x(d.label), innerRadius)[1])
.attr("x2", (d) => d3.pointRadial(x(d.label), outerRadius)[0])
.attr("y2", (d) => d3.pointRadial(x(d.label), outerRadius)[1])
.attr("stroke", "black")
.attr("stroke-width", 1);
// Labels 25, 50, 75, 100
axis
.append("g")
.selectAll("text")
.data(data)
.join("text")
.attr("class", "legend")
.style("font-size", "12px")
.attr("text-anchor", "middle")
.attr("font-family", "GT America")
.attr("dy", "0.35em")
.attr("transform", (d, i) =>
i === 1
? `translate(-50,-130)rotate(45)`
: i === 2
? `translate(${width / 2 - 10},${-height / 2})rotate(90)`
: "rotate(0)"
)
.attr(
"x",
(d, i) => rScale(100 * 1.1) * Math.cos(angleSlice * i - Math.PI / 2)
)
.attr(
"y",
(d, i) => rScale(100 * 1.1) * Math.sin(angleSlice * i - Math.PI / 2)
)
.html((d, i) =>
labelLayout(
d.label,
rScale(100 * 1.1) * Math.cos(angleSlice * i - Math.PI / 2)
)
);
// Inhalt:
const content = svg.append("g");
// Linie hinzufügen
content
.append("path")
.attr("fill", "none")
.attr("stroke", myPartyColor.color)
.attr("stroke-width", 1.5)
.attr("d", line.radius((d) => rScale(d.value))(data));
// Area einzeichnen
content
.append("path")
.attr("fill", myPartyColor.color)
.attr("fill-opacity", 0.2)
.attr(
"d",
area.innerRadius(innerRadius).outerRadius((d) => rScale(d.value))(data)
);
// Dots einzeichnen
content
.selectAll("circle")
.data(data)
.join("circle")
.attr(
"cx",
(d, i) => rScale(d.value) * Math.cos(angleSlice * i - Math.PI / 2)
)
.attr(
"cy",
(d, i) => rScale(d.value) * Math.sin(angleSlice * i - Math.PI / 2)
)
.attr("r", 4)
.attr("fill", myPartyColor.color);
return svg.node();
}
svgToCanvas(chart, 1)
width = {
if (select == "mw") return 370;
if (select == "cw") return 630;
}
height = width
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
margin = 20
innerRadius = 10
outerRadius = width / 2 - margin
labels = data.map((d) => d.label)
x = d3.scaleBand().domain(labels).range([0, 2 * Math.PI])
rScale = d3.scaleLinear()
.domain([0, 100])
.range([innerRadius, outerRadius])
line = d3.lineRadial()
.curve(d3.curveLinearClosed)
.angle(d => x(d.label))
area = d3.areaRadial()
.curve(d3.curveLinearClosed)
.angle(d => x(d.label))
angleSlice = Math.PI * 2 / 8
radialTicks = [0, 25, 50, 75, 100]
Inputs.table(data)
data = [
{ label: "Offene|Aussenpolitik", value: 20 },
{ label: "Liberale|Wirtschaftspolitik", value: 73 },
{ label: "Restriktive|Finanzpolitik", value: 60 },
{ label: "Law & |Order", value: 75 },
{ label: "Restriktive|Migrationspolitik", value: 85 },
{ label: "Ausgebauter|Umweltschutz", value: 21 },
{ label: "Ausgebauter|Sozialstaat", value: 33 },
{ label: "Liberale|Gesellschaft", value: 39 }
]
partyColors = [
{name: "SVP", color: "#316641"},
{name: "SP", color: "#ce4631"},
{name: "FDP", color: "#1b87aa"},
{name: "Die Mitte", color: "#df7c18"},
{name: "GPS", color: "#93a345"},
{name: "GLP", color: "#00988c"},
{name: "EVP", color: "#e3b13e"},
]
import { svgToCanvas } from "@jonasoesch/nzz-utils"
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.
