2c:null 2d:["$","title",null,{"children":"Energy Clusters | Lawrence Thatcher | Observable"}] 32:T7f3,chart = { const svg = d3.select(DOM.svg(width, height)); let pointsX = svg.append("g").selectAll('circle.point.energy') .data(energy_sum) .enter() .append("circle") .attr("class", "point energy") .attr('fill', d => getColor(d)) .attr("cx", (q,i) => x2(i)) .attr("cy", (q,i) => y2(q)) .on('mouseover', highlightPoint) .on('mouseout', deselect) // let pointsY = svg.append("g").selectAll('circle.point.y') // .data(qy) // .enter() // .append("circle") // .attr("class", (d,i) => pointClass(d,i) + " y") // .attr('fill', (q,i) => colors(labels[i])) // .attr("cx", (q,i) => x2(i)) // .attr("cy", (q,i) => y2(q)) // .on('mouseover', highlightPoint) // .on('mouseout', deselect) // svg.append("g") // .call(xAxis); // svg.append("g") // .call(yAxis); // let points = d3.selectAll("circle.point"); // dendrogram let g = svg.append("g").attr("transform", "translate("+ margin.left +"," + margin.top +")"); let root = tree; let links = g.selectAll('.link') .data(nonLeafLinks) .enter().append("path") .attr("stroke", (d) => getColor(d.target)) .attr("class", linkClass) .attr("d", draw_link); let connections = g.selectAll('.connection') .data(leafLinks) .enter().append("path") .attr("stroke", (d) => getColor(d.source)) .attr("class", connectionClass) .attr("d", draw_connection) let node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) .attr("transform", function(d) { return "translate(" + d.x + "," + y1(d) + ")"; }) node.append("circle") .attr("fill", d => getColor(d)) .attr("class", nodeClass) .on("mouseover", highlightNode) .on("mouseout", deselect) svg.append('path') .datum(energy_sum) .attr("class", "energy") .attr("d", line); return svg.node(); }33:[] 30:{"id":"1b858362beeabd32","slug":"energy-clusters","title":"Energy Clusters","thumbnail":"665a19c42c3f85a5e84fcd23927c830e16e9913788c9f9709e8eafb733a774e3","access_level":"public","create_time":"$D2018-09-21T03:30:47.704Z","update_time":"$D2019-01-18T00:57:03.262Z","view_time":null,"first_public_time":"$D2018-09-21T04:01:51.219Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"fe780737d88b9b25","login":"lwthatcher","name":"Lawrence Thatcher","avatar_url":"https://avatars-next.observableusercontent.com/0a65531a6560640a422e9d867df27dfaf6b6082c1ff4f92a53372ecbeb785ba0","tier":"starter_2024"},"version":278,"publish_version":278,"role":null,"authored":false,"authors":[{"type":"individual","id":"8450d56c8907b6b4","login":"lwthatcher","name":"Lawrence Thatcher","avatar_url":"https://avatars-next.observableusercontent.com/0a65531a6560640a422e9d867df27dfaf6b6082c1ff4f92a53372ecbeb785ba0","tier":null}],"members":[{"type":"individual","id":"8450d56c8907b6b4","login":"lwthatcher","name":"Lawrence Thatcher","avatar_url":"https://avatars-next.observableusercontent.com/0a65531a6560640a422e9d867df27dfaf6b6082c1ff4f92a53372ecbeb785ba0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Energy Clusters","cells":[{"id":0,"value":"md`# Energy Clusters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof ds_name = DOM.select([\"pills-blue\", \"run-pink\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof dendrogram_scale = DOM.select([\"log distance\", \"distance\", \"cumulative\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof color_hinge = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`depth threshold: **${color_hinge}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`## hierarchy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"tree = {\n let cluster = d3.cluster().size([width-margin.left-margin.right, h1-margin.top]);\n let _root = d3.stratify()(nodes).copy()\n let result = cluster(_root);\n result.sum((d) => d.dist);\n result.each((d) => d.dist = d.data.dist);\n result.each((d) => d.id = d.data.id);\n result.dist = result.children.reduce((acc,cur) => acc + cur.dist, 0); // root dist = sum of 2 children dists\n result.each(addLeafInfo);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"leaves = tree.leaves()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"nonLeafLinks = tree.links().filter((d) => !!d.target.children)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"leafLinks = {\n let leaves = tree.leaves();\n let toTarget = (d) => {\n let z = d.leaf.energy;\n let result = {point: true, x: x2(d.leaf.i), y: y2(z), label: d.label, q:'energy', id: d.id}\n return result;\n }\n return leaves.map((d) => { return {source: d, target: toTarget(d)}})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"nodes = dataset.energy_nodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"nonLeafNodes = tree.descendants().filter(d => !!d.children)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"data = dataset.short","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"dists = nodes.map(n => n.dist)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"cum_dists = tree.descendants().map(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"addLeafInfo = (d) => {\n if (d.children) return;\n d.leaf = {\n energy: energy_sum[d.id],\n i: d.id\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`### energy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"energy = dataset.energy","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"energy_extents = [d3.min(energy, (d) => d3.min(d)), d3.max(energy, (d) => d3.max(d))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"energy_sum = energy.map(arr => d3.sum(arr))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`### visualization params`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40, middle: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"h1 = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"h2 = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"height = h1 + h2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`### scales and drawing functions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`#### scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"y1 = (d) => {\n if (dendrogram_scale === \"cumulative\") return y1_cum(d.value);\n else if (dendrogram_scale === \"distance\") return y1_dist(d.dist);\n else if (dendrogram_scale === \"log distance\") return y1_logdist(d.dist+1);}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"y1_dist = d3.scaleLinear()\n .domain([0, tree.dist])\n .range([h1-margin.middle, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"y1_logdist = d3.scaleLog()\n .domain([1, tree.dist+1])\n .range([h1-margin.middle, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"y1_cum = d3.scaleLinear()\n .domain(d3.extent(cum_dists))\n .range([h1-margin.middle, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"x2 = d3.scaleLinear()\n .domain([0, energy.length])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"y2 = d3.scaleLog()\n .domain(energy_extents)\n .range([h1 + h2 - margin.bottom, margin.top + h1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`#### drawing functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"line = d3.line()\n .x((d,i) => x2(i))\n .y((d,i) => y2(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"draw_link = d3.linkVertical()\n .x((d) => d.x)\n .y((d) => {\n if (d.point) return d.y;\n else return y1(d);\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"draw_connection = d3.linkVertical()\n .x((d) => {\n if (d.point) return d.x - margin.left;\n else return d.x;\n })\n .y((d) => {\n if (d.point) return d.y - margin.top;\n else return y1(d);\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`#### style helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"connectionClass = (d) => \"connection connection-\" + d.target.q + \" id-\" + d.target.id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"linkClass = (d) => \"link id-\" + d.target.id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"pointClass = (d,i) => \"point id-\" + i","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"nodeClass = (d) => \"node id-\" + d.id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`#### callbacks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"highlightPoint = (d, i) => {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"highlightNode = (d) => {\n if (!d.children) {\n let related = d3.selectAll(\".id-\"+d.id);\n related.classed('highlight', true);\n }\n else {\n let descendants = d.descendants().map(d => d.id);\n let selector = \"\";\n for (let c of descendants) {selector += \".id-\" + c + \", \"}\n selector = selector.slice(0,-2);\n d3.selectAll(selector).classed(\"highlight\", true);\n }\n highlightParents(d);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"highlightParents = (d) => {\n let p = d;\n while (p.parent) {\n d3.select(\".link.id-\"+p.id).classed('highlight', true);\n p = p.parent;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"deselect = (d) => {\n d3.selectAll('.highlight')\n .classed('highlight', false);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`#### coloring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"color = d3.scaleOrdinal().range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"getColor = (d) => { \n if (!d.parent) return \"black\";\n while (d.depth > color_hinge) d = d.parent;\n return color(d.data.id); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { datasets } from \"@lwthatcher/datasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dataset = datasets[ds_name]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`### css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"html`

scales + energy-bar

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"html`

scales + energy-bar

points + nodes

links + connections