2b:null 2c:["$","title",null,{"children":"C🍩urse Munk fix, compute angles for modififed donut slice visual | Course Munk | Observable"}] 31:T44e,# C🍩urse Munk fix, compute angles for modififed donut slice visual Testable interactive prototype (4/27) Hello! 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. Thank you for agreeing to participate in this testing session. Please fill out this feedback form while you complete the tasks below: https://forms.gle/J5VKZxywoT1VVDoK8 Your task: Choose a course that interests you and answer the questions. Tip: To get the clearest highlighting on the parallel coordinates chart, click the donut before hovering over the class of interest. Or hover off the slice for a few seconds and slowly hover back on. Your answers will be used only by us to improve the design. Thanks! 32:T5be,parallelchart = { 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(); }33:T4b6,{ 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 debug; }34: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)}`)}

`; }35:[] 2f:{"id":"2097503d881b8a77","slug":null,"title":"C🍩urse Munk fix, compute angles for modififed donut slice visual","thumbnail":"20e40203006054b278c780005784dfb5cbc1859773026ca6635c34d9ffc6b167","access_level":"public","create_time":"$D2023-05-02T19:27:50.275Z","update_time":"$D2023-05-02T19:29:18.781Z","view_time":null,"first_public_time":"$D2023-05-02T19:27:50.275Z","has_unpublished_edits":null,"fork":{"id":"b84556f73b0506cc","slug":null,"title":"C🍩urse Munk fix!","owner":{"id":"44d081517d552344","login":"course-munk2","name":"Course Munk"}},"stars":0,"starred":false,"owner":{"type":"team","id":"44d081517d552344","login":"course-munk2","name":"Course Munk","avatar_url":"https://avatars-next.observableusercontent.com/c0de06b44feb9fd5aca46933b2701c70245ebc2c8605481458e51b0d40725735","tier":"starter_2024"},"version":1084,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16a1ea7dba57484e","login":"ajear12","name":"Annalise","avatar_url":"https://avatars-next.observableusercontent.com/bf514243e8fee5717fe99a7130c11dca8f721cee281171141a51e1b041dda19b","tier":null}],"members":[{"type":"individual","id":"16a1ea7dba57484e","login":"ajear12","name":"Annalise","avatar_url":"https://avatars-next.observableusercontent.com/bf514243e8fee5717fe99a7130c11dca8f721cee281171141a51e1b041dda19b","tier":null,"role":"editor"},{"type":"team","id":"44d081517d552344","login":"course-munk2","name":"Course Munk","avatar_url":"https://avatars-next.observableusercontent.com/c0de06b44feb9fd5aca46933b2701c70245ebc2c8605481458e51b0d40725735","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"C🍩urse Munk fix, compute angles for modififed donut slice visual","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1075,"value":"colorView = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":788,"value":"swatch = Swatches(d3.scaleOrdinal(category, d3.schemeSet2), {\n columns: \"180px\",\n swatchSize: 30\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":656,"value":"donutchart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"linkToSpreadsheet = \"https://docs.google.com/spreadsheets/d/1HdATGSycXsz0DWcUAd8fLfAHEuInhrGgl835nR0brVQ/gviz/tq?tqx=out:csv&sheet=Sheet5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"//data = FileAttachment(\"cars.csv\").csv({typed: true})\ndata = d3.csv(linkToSpreadsheet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"col = data.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"keys = col.slice(0,6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"### Horizontal scale for all the axes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"x = d3.scalePoint(keys, [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"### A set of Y scales:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"----\n## Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":647,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"----\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = keys.length * 120\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({top: 20, right: 150, bottom: 30, left: 300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"import {donutchart} from \"@course-munk2/donut-2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"import {coursenames} from \"@course-munk2/donut-2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"import {category} from \"@course-munk2/donut-2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"