31:T886,groupSelection = html` `32:Td21,chart = { const nodes = data.nodes.map(d => Object.create(d)); const index = new Map(nodes.map(d => [d.id, d])); const links = data.links.map(d => Object.assign(Object.create(d), { source: index.get(d.source), target: index.get(d.target) })); const membership = new Map(nodes.map((d,i) => [i,d.group])); const container = d3.select( html`

${groupSelection}

` ); // const svg = d3.select(DOM.svg(width, height)); const svg = container.append("svg").attr("viewBox", `0 0 ${width} ${height}`); const layout = cola.d3adaptor(d3) .size([width, height]) .nodes(nodes) .links(links) .jaccardLinkLengths(40, 0.7) .start(30); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("class", d => `_${membership.get(d.source.index)} _${membership.get(d.target.index)}`) .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("class", d => `_${d.group}`) .attr("r", 5) .attr("fill", d => color(d.group)) .text(d => d.id) .on("mouseover", mouseover) .on("mouseout", mouseout) .call(layout.drag); // node.append("title") // .text(d => d.id); layout.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => layout.stop()); function mouseover(e, d) { d3.select(this).attr("stroke", "#000"); tooltip.style("display", null); tooltip.attr("transform", `translate(${e.x},${e.y})`); console.log(d3.select(this).text()); const path = tooltip.selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip.selectAll("text") .data([,]) .join("text") .call(text => text .selectAll("tspan") .data(`${d3.select(this).text()}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d)); const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } const tooltip = svg.append("g") .style("pointer-events", "none") function mouseout() { d3.select(this).attr("stroke", null); tooltip.style("display", "none"); } function update(){ container.selectAll("input").each(function(d){ const cb = d3.select(this); const grp = cb.property("value") if(cb.property("checked")) { svg.selectAll("._"+grp).style("opacity",1) } else { svg.selectAll("._"+grp).style("opacity",0.1) } }) } container.selectAll("input").on("change",update); return container.node(); }33:[] 2f:{"title":"Hello, CoLa! With group selection","cells":[{"id":0,"value":"md`# Hello, CoLa! With group selection\n\nThis network of character co-occurence in _Les Misérables_ is positioned by constraint-based optimization using [WebCoLa](https://ialab.it.monash.edu/webcola/). Compare to [d3-force](/@mbostock/d3-force-directed-graph).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof groups = Inputs.checkbox(new Map(colorMap), {value: colorNames, label: html`Groups`, format: x => html`${x[1]}`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"new Map(colorMap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"// colorNames = [\"cyan\",\"blue\",\"orange\",\"green\",\"red\",\"purple\",\"brown\",\"pink\",\"grey\",\"yellow\"]\ncolorNames = Array.from({length: 11}, (v, i) => i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"colorCodes = Array.from({length: 11}, (v, i) => color(i))","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"groupMin = data.nodes.reduce((prev, curr) => (prev.group < curr.group) ? prev : curr).group","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"groupMax = data.nodes.reduce((prev, curr) => (prev.group > curr.group) ? prev : curr).group","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"// colorMap = Object.assign(...colorCodes.map((k, i)=>({[k]: colorNames[i]}) ))\ncolorMap = colorCodes.map((e,i) => [e, i])","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"color = d3.scaleOrdinal(d3.schemeCategory10.concat(\"#f5429b\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = d3.json(\"https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"data.nodes[76]","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"cola = require(\"webcola@3/WebCola/cola.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}