This is where I prototype and experiment
Published
Edited
Aug 2, 2020
1 fork
2 stars
chart3 = {
const svg = d3.create('svg')
.attr('viewBox', [-width/2, -100, width, 200]);
svg.selectAll('circle')
.data([0.5, 1.5, 2.5, 3.5, 4.5])
.join('circle')
.attr('r', (d) => scale(d))
.attr('fill', "transparent")
.attr('stroke', "whitesmoke");
const g = svg.selectAll('g')
.data(data)
.join('g')
.attr('transform', (d, i) => d.value < 4.5 ? `rotate(${(4*45 + i * 45)})` : `rotate(${(i * 45)})`);
g.append('line')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 0)
.attr('y2', (d) => d.value < 4.5 ? scale(Math.abs(d.value - 4.5)) : scale(d.value - 4.5))
.attr('stroke-width', 3)
.attr("stroke-linecap", "round")
.attr('stroke', d => color(d.key));
g.append('text')
.attr('x', 0)
.attr('y', scale.range()[1] + 10)
.attr('dominant-baseline', 'middle')
.attr('font-size', '12px')
.attr('transform', `rotate(90 0 ${scale.range()[1] + 10})`)
.text((d) => d.labels[+(d.value >= 4.5)]);
return svg.node();
}
scale = d3.scaleLinear()
.domain([0, 4.5])
.range([0, 50])
color = d3
.scaleOrdinal()
.domain(data.map(d => d.key))
.range(d3.schemeTableau10);
data = [
{key: "leftRight", value: 2 - 1, labels: ["left", "right"]},
{key: "stateMarket", value: 2 - 1, labels: ["state", "market"]},
{key: "libertyAuthority", value: 4 - 1, labels: ["lib", "auth"]},
{key: "euAntiPro", value: 4 - 1, labels: ["anti", "pro"]},
]
d3 = require("d3@5")
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.
