2a:null 2b:["$","title",null,{"children":"Humanities departments | Mike Lynch | Observable"}] 30:Tb4a,chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const { nodes, links } = graph; // nodes // div for pop-up comments var comment = d3.select("body").append("div") .attr("class", "comment"); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .attr("opacity", nodeOpacity * 0.01) .on("mouseover", function(d) { if( comments[d.id] ) { comment.transition() .duration(200) .style("opacity", commentOpacity * 0.01); comment.html(comments[d.id]) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY) + "px"); } }).on("mouseout", function(d) { comment.transition() .duration(200) .style("opacity", 0); comment.html(""); }); // node labels svg.append("g") .style("font", "12px sans-serif") .selectAll("text") .data(nodes.filter(d => d.label)) .join("text") .attr("class", "label") .attr("x", d => (d.x < width / 2 ? d.x1 + 6 : d.x0 - 6) + 15) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", "start") .text(d => d.name); // d => d.name // adjust for overlaps // d3.selectAll(".label").text(d => { console.log(d); }); // links const link = svg.append("g") .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); // gradients for links if (edgeColor === "path") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); } link.append("path") .attr("d", d3.variableWidthLink()) .attr("fill", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) .attr("opacity", linkOpacity * 0.01); // axes var lnode = d3.min(nodes, d => (d.x0 + d.x1) / 2); var rnode = d3.max(nodes, d => (d.x0 + d.x1) / 2); var yearScale = d3.scalePoint(years, [ lnode, rnode]) const axis = d3.axisBottom(yearScale).tickSizeInner(height - padding); svg.append("g") .call(axis); return svg.node(); }31:Ta0b,rows2graph = { // convert an array of row objects from a CSV into sankey nodes and links // expects each row to have an index field "Departments" // node ids are ${dept}${year} return raw => { const index = 'Departments'; const nodes = []; const nodesbyid = {}; const dseen = {}; const links = []; // iterate through the rows and build the nodes and links, // leaving link values for a second pass so that they can be calculated raw.forEach((row) => { const dept = row[index]; var last = null; Object.keys(row).sort().forEach((y) => { if( y !== index && row[y] ) { const values = row[y].split(';'); const size = Number(values.shift()); const id = dept + y; const label = ! (dept in dseen); nodesbyid[id] = { id: id, year: y, name: dept, label: label, size: size }; nodes.push(nodesbyid[id]); // link to previous node in this row, if it exists if( last ) { links.push({ name: dept, source: last, target: id }); } // links to any other ancestors as defined in the values values.forEach((ancestor) => { links.push({ name: dept, source: ancestor, target: id }); }); last = id; dseen[dept] = true; } else { // only automatically link to the immediately previous cell // see bug https://code.research.uts.edu.au/960700/d3-alludyn-faculty-vis/issues/16 last = null; } }); }); // solution for now: ignore sizes and just show existence only. // Calculate link values based on how many siblings they have at the end nodes.forEach((node) => { nodesbyid[node.id].nsourcelinks = links.filter((link) => link.source === node.id).length; nodesbyid[node.id].ntargetlinks = links.filter((link) => link.target === node.id).length; }); links.forEach((link) => { const source = nodesbyid[link.source]; if( ! source ) { console.log("Source link not found: " + JSON.stringify(link)); } if( source.nsourcelinks > 0 ) { link.svalue = 100 / source.nsourcelinks; } else { link.svalue = 100; } const target = nodesbyid[link.target]; if( target.ntargetlinks > 0 ) { link.tvalue = 100 / target.ntargetlinks; } else { link.tvalue = 100; } }); return { nodes: nodes, links: links }; } }32:[] 2e:{"id":"bcfbc01466e3c253","slug":"visualising-department-sizes","title":"Humanities departments","thumbnail":"ae0736881ee6f9abffbe26df49aeae6d8effacdfa1c4273105c14ca85dc2063f","access_level":"public","create_time":"$D2019-03-27T00:01:46.552Z","update_time":"$D2019-06-28T07:00:12.402Z","view_time":null,"first_public_time":"$D2019-03-27T00:11:01.457Z","has_unpublished_edits":null,"fork":{"id":"99b2e903e7df3b0a","slug":"sankey-component","title":"Sankey diagram component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":5,"starred":false,"owner":{"type":"team","id":"f666f233786937c1","login":"spikelynch","name":"Mike Lynch","avatar_url":"https://avatars-next.observableusercontent.com/fd762b83c0d3b5d82c56bb899009a73866e68a54fb94dbfcaecd6a0196dd4c6d","tier":"starter_2024"},"version":881,"publish_version":881,"role":null,"authored":false,"authors":[{"type":"individual","id":"20a52d44d079d455","login":"spikelynch","name":"Mike Lynch","avatar_url":"https://avatars-next.observableusercontent.com/fd762b83c0d3b5d82c56bb899009a73866e68a54fb94dbfcaecd6a0196dd4c6d","tier":null}],"members":[{"type":"individual","id":"20a52d44d079d455","login":"spikelynch","name":"Mike Lynch","avatar_url":"https://avatars-next.observableusercontent.com/fd762b83c0d3b5d82c56bb899009a73866e68a54fb94dbfcaecd6a0196dd4c6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Humanities departments","cells":[{"id":0,"value":"md`# Humanities departments\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"viewof useData = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"md`\n### TODO\n\n* Better affordances for comments - right now it's not obvious which nodes have them - highlight as mouse gets close to them?\n* The year gridlines have gotten out of whack with the centers of the nodes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"md`Node width`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"viewof nodeWidth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`Node opacity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"viewof nodeOpacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"md`Link opacity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"viewof linkOpacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof edgeColor = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"color\") || \"path\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"commentOpacity = { return 100 }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"md`rows2graph converts the raw json into a graph suitable for the alludyn visualisation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"padding = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"alludyn = {\n const nWidth = nodeWidth * 0.01 * (width - padding * 2) / (years.length + 1);\n const alludyn = d3.alludyn()\n .nodeAlign(d => d.year - Number(years[0]))\n .nodeWidth(nWidth)\n .nodePadding(12)\n .extent([[padding, padding], [width - padding, height - padding]]);\n alludyn.nodeId(d => d.id);\n return (graph) => alludyn({\n nodes: graph.nodes.map(d => Object.assign({}, d)),\n links: graph.links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`## Data loading and transformation\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"\ndataOptions = {\n return {\n 'sydney_updated': d3.csv(\"https://gist.githubusercontent.com/spikelynch/18f5094343dd49ef1ec25367489cde8a/raw/77d334c344b4b6b30458022b2e3d7584bb5f3f55/sydney_full_v2.csv\"),\n 'monash': d3.csv(\"https://gist.githubusercontent.com/spikelynch/643c9d0aa15caee559068203bfc4b15d/raw/3b405a0752cd8e608a93d1ee3bea4cc454c2a4f4/Monash.csv\"),\n 'melbourne': d3.csv(\"https://gist.githubusercontent.com/spikelynch/9ebc59b28ed64551b057799a011ca59c/raw/eab358fae0d12384ab5776d22ed4b9828bb18258/Melbourne.csv\"),\n 'deakin': d3.csv(\"https://gist.githubusercontent.com/spikelynch/59a7cf64f84fac292463ac127783053a/raw/ccc51547bf95b4aca3b8e1391f87422b2f5c7884/Deakin.csv\"),\n 'latrobe': d3.csv(\"https://gist.githubusercontent.com/spikelynch/16874c8ec6509d6a2623231129ccc444/raw/df669358d907f09afcb4318785f51cc55b576cbe/LaTrobe.csv\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"raw = dataOptions[useData]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"data = rows2graph(raw)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\",\"d3-alludyn@1.0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"graph = alludyn(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"years = [ ... new Set(data.nodes.map((n) => n.year))].sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"comments_json = {\n return {\n sydney_updated: d3.json(\"https://gist.githubusercontent.com/spikelynch/922e420510c1d014163b33de3c9ae908/raw/b10698c907e65c18345259836bb813620e8c3e3e/Sydney%2520commentary.json\"),\n melbourne: d3.json(\"https://gist.githubusercontent.com/spikelynch/b07c78be201b2aefbda1f761a7ae6bf5/raw/ac43b9dc5657d106c20d2d68bcce2092b48ea74e/Melbourne%2520commentary.json\"),\n deakin: d3.json(\"https://gist.githubusercontent.com/spikelynch/8b3aff5b473c65bc085d65e7d0a7afac/raw/e90d71d94050b09aef89062af7029d15481413ea/Deakin%2520commentary.json\"),\n monash: d3.json(\"https://gist.githubusercontent.com/spikelynch/3c7146197ca1e6c2e0e8a32c54e89096/raw/ddb048a02fa565e70850a783bde24d5e22f40f28/Monash%2520commentary.json\"),\n latrobe: d3.json(\"https://gist.githubusercontent.com/spikelynch/3d90faa32c5e3dd75d5d70e4d8c5cadb/raw/dcf36b8cd8b0a25a7c6dd0f7a3aff52f39880ae2/La%2520Trobe%2520commentary.json\")\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"comments = comments_json[useData]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"