import {coursenames} from "@course-munk2/donut"
donutchart
{
// this is what you should be doing... see what "debug" returns.
// do you need help understanding d3 selections? it's important because it's one of the cornerstones in d3
const slices = d3.select(donutchart)
.selectAll("path")
// make text elements transparent for mouse pointer
const texts = d3.select(donutchart)
.selectAll("text")
.style("pointer-events", "none")
const debug = html`<p>${slices.size()} slices selected</p>`;
//same with lines
const lines = d3.select(parallelchart)
.selectAll(".dataline"); //note the added class "dataline" in the parallel coordinates chart
slices.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.style("fill", "red");
lines.filter(e => {
console.log(d, e) // open dev tools and use console.log to see how it works, what are d and e?
return coursenames[d.data].Name === e.Name;
})
.raise()
.transition()
.style("stroke", "red")
.style("stroke-width", "5");
d3.select(debug).text(`Bar: ${coursenames[d.data].Name}`);
});
slices.on("mouseout", function(event, d) {
d3.select(this)
.transition()
.style("fill", donutchart.scales.color(coursenames[d.data].Category));
//donutchart.scales.color()
lines
.style("stroke-width", "2")
.style("stroke", e => z(e[keyz])); //change color of all data lines back (code copied from parallel coordinates)
});
return debug;
}
//data = FileAttachment("cars.csv").csv({typed: true})
data = d3.csv(linkToSpreadsheet)
col = data.columns
keys = col.slice(0,6)
keys1 = keys.slice(2,6)
types = {
let types = {};
keys.forEach(key => types[key] = isNaN(+data[0][key]) ? "string" : "number")
return types;
}
y = {
let getXScale = (key) => types[key] === "number"
? d3.scaleLinear()
: d3.scalePoint().padding(0);
let getXdomain = (key) => types[key] === "number"
? d3.extent(data, d => d[key])
: [... new Set(data.map(m => m[key]))];
let scales = {};
keys.forEach(key => {
scales[key] = getXScale(key)
.domain(getXdomain(key))
.range([height - margin.bottom, margin.top])
})
return scales;
}
x = d3.scalePoint(keys, [margin.left, width - margin.right])
z = {
let getCScale = (key) => types[key] === "number"
? d3.scaleSequential(d3.interpolateViridis)
: d3.scaleOrdinal(d3.schemeCategory10)
return getCScale(keyz).domain(y[keyz].domain())
}
import {chart} from "@course-munk2/donut"
d3 = require("d3@6")
import {legend as Legend} from "@d3/color-legend"
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.
