33:T603,chart = { const swatch = Swatches(d3.scaleOrdinal(category, d3.schemeSet2), { columns: "300px", swatchSize: 30 }); const parallelchart = createParallelchart(); 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`

${slices.size()} slices selected

`; //same with lines const lines = d3.select(parallelchart) .selectAll(".dataline"); //note the added class "dataline" in the parallel coordinates chart slices.on("click", function(event, d) { d3.select(this) lines .style("stroke-width", "2") .style("stroke", d => d.Color); lines.filter(e => { console.log(d, e) return coursenames[d.data].Name === e.Name; }) .raise() .transition() .style("stroke", "red") .style("stroke-width", "5"); d3.select(debug).text(`Slice: ${coursenames[d.data].Name}`); }); slices.on("mouseover", function(event, d) { d3.select(this) .transition() .style("fill", "red"); }); slices.on("mouseout", function(event, d) { d3.select(this) .transition() .style("fill", donutchart.scales.color(coursenames[d.data].Category)); }); return htl.html`

${swatch}

${donutchart} ${parallelchart} `; }34:T68d,/* TRYING TO ADD MINI BOXES const svg = d3 .select("#chart-container") .append("svg") .attr("width", width) .attr("height", height); const arc = d3 .arc() .innerRadius(70) .outerRadius(150); const data =[ {label: "A", value: 13.333}, {label: "B", value: 13.333}, {label: "C", value: 13.333}, {label: "D", value: 13.333}, {label: "E", value: 13.333}, {label: "F", value: 13.333}, {label: "G", value: 13.333}, {label: "H", value: 13.333}, {label: "I", value: 13.333}, {label: "J", value: 13.333}, {label: "K", value: 13.333}, {label: "L", value: 13.333}, {label: "M", value: 13.333}, {label: "N", value: 13.333}, {label: "O", value: 13.333}, {label: "P", value: 13.333}, {label: "Q", value: 13.333}, {label: "R", value: 13.333}, {label: "S", value: 13.333}, {label: "T", value: 13.333}, {label: "U", value: 13.333}, {label: "V", value: 13.333}, {label: "W", value: 13.333}, {label: "X", value: 13.333}, {label: "Y", value: 13.333}, {label: "Z", value: 13.333}, {label: "Z1", value: 13.333}, ] const g = svg .append("g") .attr("transform", 'translate(${width / 2}, ${height / 2})'); //add boxes const boxes = [ {label: "A", color: #98abc5"}, {label: "B", color: #8a89a6"}, {label: "C", color: #7b6888"}, {label: "D", color: #a05d56"}, ]; svg . append("g") .selectAll("rect") .data(boxes) .enter() .append("rect" .attr("x", 800)) .attr("y", (d, I) => 50 + i * 25) .attr("width", 20) .attr("height", 20) .attr("fill", (d) => d.color); svg .append("g") .selectAll("text") .data(boxes) .enter() .append("text") .attr("x", 430) .attr("y", (d, I) => 65 + i * 25) .text((d => d.label)); */35:T5ca,createParallelchart = () => { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //line generator let line = d3.line() .defined(([, value]) => value != null) .y(([key, value]) => y[key](value)) .x(([key]) => x(key)) //data lines svg.append("g") .attr("transform", `translate(0, ${margin.top})`) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke-opacity", 1) .selectAll("path") .data(data.slice().sort((a, b) => d3.ascending(a[keys], b[keys]))) .join("path") .attr("class", "dataline") .attr("stroke", d => d.Color) .attr("d", d => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))) //generated line .append("title") .text(d => d.name); //axes svg.append("g") .selectAll("g") .data(keys) .join("g") .attr("transform", d => `translate( ${x(d)} , ${margin.top})`) .each(function(d) { d3.select(this).call(d3.axisLeft(y[d]).ticks(5)); }) .call(g => g.append("text") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("fill", "currentColor") .style("font-size", "16px") .text(d => d)) .call(g => g.selectAll("text") //.attr('transform', 'rotate(-30)') .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke", "white")); return svg.node(); }36:T7bd,function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }37:[] 31:{"title":"SP2023 C🍩urse Munk (d3)","cells":[{"id":0,"value":"# SP2023 C🍩urse Munk (d3)\n\nTestable interactive prototype (5/4)\n\nHello! Welcome to CourseMunk, a visualization about courses at DIS. Every student in the Data Visualization course at DIS answered a survey about the courses they are taking this semester, and we have compiled the results in the parallel coordinate and donut charts below. Based on student experiences, we hope to provide feedback to DIS on the quality, usefulness, enjoyment, and difficulty of their courses. This may also help future students plan their schedules as well.\n\nClick a slice on the donut to highlight lines on the parallel coordinates chart.\n","pinned":false,"hidden":false,"mode":"md"},{"id":971,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":647,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"----\n## Getting the data\n\nBelow i replaced the data to a custom google sheet. I demonstrated this trick in class once, see first answer [here](https://stackoverflow.com/questions/33713084/download-link-for-google-spreadsheets-csv-export-with-multiple-sheets)","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"linkToSpreadsheet = \"https://docs.google.com/spreadsheets/d/1HdATGSycXsz0DWcUAd8fLfAHEuInhrGgl835nR0brVQ/gviz/tq?tqx=out:csv&sheet=Sheet5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"//data = FileAttachment(\"cars.csv\").csv({typed: true})\ndata = d3.csv(linkToSpreadsheet)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"col = data.columns","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"keys = col.slice(0,6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"----\n## Creating scales\nHere i modified the original code in order to support parallel coordinates for nominal and ordinal data","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"types = {\n let types = {};\n keys.forEach(key => types[key] = isNaN(+data[0][key]) ? \"string\" : \"number\")\n return types;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"### Horizontal scale for all the axes:","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"x = d3.scalePoint(keys, [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"### A set of Y scales:","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"y = {\n let getXScale = (key) => types[key] === \"number\"\n ? d3.scaleLinear()\n : d3.scalePoint().padding(0);\n \n let getXdomain = (key) => types[key] === \"number\"\n ? d3.extent(data, d => d[key])\n : [... new Set(data.map(m => m[key]))];\n \n let scales = {};\n keys.forEach(key => {\n scales[key] = getXScale(key)\n .domain(getXdomain(key))\n .range([height - margin.bottom, margin.top])\n })\n return scales;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"----\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":446,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = keys.length * 120\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({top: 20, right: 150, bottom: 30, left: 300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"import {donutchart} from \"@course-munk2/donut-2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"import {coursenames} from \"@course-munk2/donut-2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"import {category} from \"@course-munk2/donut-2\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}