mutable directionFilter = Object.assign({}, ...directions.map((d) => ({[d.angle]: d.selected})));
directionFilter[0]
directionFilter[0]
mutable selectedData = rawdata.filter(d => directionFilter[d[1]])
chart = {
const svg = d3
.select("#compass")
.append("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", width)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
svg
.selectAll("g")
.data(directions)
.join("g")
.call((g) => {
g.append("path")
.attr("id", (d) => d.text)
.attr("class", "direction-button")
.attr("stroke", "black")
.attr("fill", d=> d.selected?"orange":"grey")
.attr("d", (d) =>
d3
.arc()
.innerRadius(30)
.outerRadius(80)
.startAngle(((d.angle - 22.5) / 180) * Math.PI)
.endAngle(((d.angle + 22.5) / 180) * Math.PI)()
);
})
.call((g) => {
g.append("text")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("pointer-events", "none")
.style("user-select", "none")
.attr("x", d => 55*Math.sin(d.angle/180*Math.PI))
.attr("y", d => -55*Math.cos(d.angle/180*Math.PI))
.text((d) => d.text);
});
svg.append("g")
.call(g =>
g
.append("circle")
.attr("r", 30)
.attr("fill", "white")
.on('click', function(e) {
directions.map(d => d.selected = d.selected? false: true);
d3.selectAll(".direction-button").attr("fill", d=> d.selected?"orange":"grey");
mutable directionFilter = Object.assign({}, ...directions.map((d) => ({[d.angle]: d.selected})));
}))
.call(g =>g.append("text")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("pointer-events", "none")
.style("user-select", "none")
.text("All"));
svg.selectAll('.direction-button')
.on('click', function(e, d) {
directions.filter(d => d.text == this.id).map(d => d.selected = d.selected? false: true);
d3.selectAll(".direction-button").attr("fill", d=> d.selected?"orange":"grey");
mutable directionFilter = Object.assign({}, ...directions.map((d) => ({[d.angle]: d.selected})));
});
return svg.node();
}
width = 200
height = width
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.
