31:T1f34,svg = { // create plot const plot = d3.create('svg') .attr('width', width) .attr('height', height) .style('background-color', background); // group for links const plotLinks = plot .append('g') .attr('class', 'links') .attr('transform',`translate(${margin.left}, ${margin.top}`); // group for nodes const plotNodes = plot .append('g') .attr('class', 'nodes') .attr('transform',`translate(${margin.left}, ${margin.top}`); // family names const plotFamilies = plot .append('g') .attr('class', 'family-names') .selectAll('text') .data(families.filter(d => d.key !== 'Universe 1 * Kohler')) .join('text') .text(d => d.key.split(' * ')[1]) .attr('class', d => { const universe = d.key.split(' ')[1]; const family = d.key.split(' * ')[1]; return `${family}_${universe}`; }) .attr('x', d => scaleX(d.value)) .attr('y', d => scaleFamilyNames(d.key.split(' * ')[0])) .style('font-weight', 'bold') .style('font-size', '14px') .style('fill', d => { const colours = d.key.split(' * '); return scaleColourUniverses(colours[0]); }); // group for tooltip const plotTooltip = plot .append('g') .attr('class', 'tooltip') .attr('transform',`translate(${margin.left}, ${margin.top}`); // links const link = plotLinks .selectAll("line") .data(drawLinks.filter(d => d.name !== 'Unknown 1' && d.name !== 'Unknown 2')) .join("path") .attr('class', d => { const universe_source = d.source.universe.split(' ')[1]; const universe_target = d.target.universe.split(' ')[1]; return `${d.source.Family_name}_${universe_source}_${d.target.Family_name}_{universe_target}` }) .style('display', d => d.hide) .style('fill', 'none') .style("stroke-width", d => scaleThickness(d.type)) .style("stroke-dasharray", d => scaleDash(d.type)) .style('stroke', d => checkLinksColours(d)); // nodes const node = plotNodes .selectAll("circle") .data(drawNodes.filter(d => d.Family_name !== 'Unknown')) .join("circle") .attr('class', d => { const universe = d.universe.split(' ')[1]; return `${d.Family_name}_${universe}`; }) .style("stroke", d => checkNodeColours(d)) .style("stroke-width", 3) .attr("r", radius) .style("fill", background) .style('display', d => { if (d.season > +season) return 'none'; return 'inherit' }) .on('mouseover', d => mouseOver(d)) .on('mouseleave', mouseLeave); simulation.on("tick", () => { link .attr('d', (d, i) => { let sourceX = d.source.x; let sourceY = d.source.y; let targetX = d.target.x; let targetY = d.target.y; const parents = (d.parents.toString()).split(" - "); if (d.type === 'Child' && parents.length > 1) { if ((d.target.name === 'Regina Tiedemann' || d.target.name === 'Katharina Nielsen') && season < 3) { } else { const pt = findParents(parents, drawNodes); const xyPt = pt.sort((a,b) => a.x - b.x); const xPt1 = xyPt[0].x; const xPt2 = xyPt[1].x; sourceX = xPt1 + (xPt2 - xPt1) / 2; const yPt1 = xyPt[0].y; const yPt2 = xyPt[1].y; sourceY = yPt1 + (yPt2 - yPt1) / 2; } } return `M${sourceX},${sourceY} C ${sourceX},${(sourceY + targetY) / 2} ${targetX},${(sourceY + targetY) / 2} ${targetX},${targetY}` }) node .attr("cx", d => d.x) .attr("cy", d => d.y); }); function mouseOver(d) { const universe = d.universe.split(' ')[1]; const nameFamily = `${d.Family_name}_${universe}`; // highlight nodes plotNodes .selectAll('circle') .style('fill', e => { if (e.name === d.name) return white; return background; }) .style('stroke', e => { const thisNameFamily = `${e.Family_name}_${e.universe.split(' ')[1]}`; if (e.name === 'Mikkel Nielsen / Michael Kahnwald' && e.universe === 'Universe 1' && d.name === 'Jonas Kahnwald / The Stranger') return white; else if (e.name === 'Martha Nielsen' && e.universe === 'Universe 2' && d.name === 'Jonas Kahnwald / The Stranger') return white; else if (e.name === 'Infinite' && d.name === 'Jonas Kahnwald / The Stranger') return white; else if (d.name === 'Martha Nielsen' && d.universe === 'Universe 2' && e.name === 'Jonas Kahnwald / The Stranger') return white; else if (d.name === 'Martha Nielsen' && d.universe === 'Universe 2' && e.name === 'Infinite') return white; else if (d.name === 'Hannah Waller' && e.name === 'Jonas Waller') return white; else if (e.name === 'Hannah Waller' && d.name === 'Jonas Waller') return white; else if (thisNameFamily === nameFamily) return white; else if (d.name === 'Infinite' && thisNameFamily === 'Nielsen_2') return white; else if (d.name === 'Infinite' && thisNameFamily === 'Kahnwald_1') return white; return checkNodeColours(e); }); // highlight links plotLinks .selectAll('path') .style('stroke', e => { const source = `${e.source.Family_name}_${e.source.universe.split(' ')[1]}`; const target = `${e.target.Family_name}_${e.target.universe.split(' ')[1]}`; if (nameFamily === source || nameFamily === target) return white; else if (e.target.name === 'Infinite' && d.name === 'Jonas Kahnwald / The Stranger') return white; else if (e.target.name === 'Infinite' && d.name === 'Martha Nielsen' && d.universe === 'Universe 2') return white; else if (d.name === 'Infinite' && source === 'Nielsen_2') return white; else if (d.name === 'Infinite' && source === 'Kahnwald_1') return white; else if (d.name === 'Infinite' && target === 'Nielsen_2') return white; else if (d.name === 'Infinite' && target === 'Kahnwald_1') return white; else return checkLinksColours(e); }); // highlight family name plot.select('.family-names') .select(`.${nameFamily}`) .style('fill', white); // add information about selected person let pX = 20; let anchor = 'start'; if (d.x > width / 2) { pX = -20; anchor = 'end'; } const plotRect = plotTooltip .append('rect') .attr('class', 'information') .style('fill', background) .style('opacity', 0.8) .style('stroke', 'none'); plotTooltip .append('text') .attr('class', 'information') .text(d.name) .style('fill', white) .style('text-anchor', anchor) .attr('x', d.x + pX) .attr('y', d.y + 5); const rectWidth = Math.round(plotTooltip.select('text').node().getBoundingClientRect().width) + 20; const rectHeight = Math.round(plotTooltip.select('text').node().getBoundingClientRect().height) + 20; plotRect .attr('width', rectWidth) .attr('height', rectHeight) .attr('x', () => { if (d.x > width / 2) { return (d.x + pX / 2 - rectWidth) } return (d.x + pX / 2) }) .attr('y', (d.y - rectHeight / 2)); } function mouseLeave() { plotNodes .selectAll('circle') .style('fill', background) .style("stroke", d => checkNodeColours(d)); plotLinks .selectAll('path') .style('stroke', d => checkLinksColours(d)); plot.select('.family-names') .selectAll('text') .style('fill', d => { const colours = d.key.split(' * '); return scaleColourUniverses(colours[0]); }); plotTooltip .selectAll('.information') .remove(); } invalidation.then(() => simulation.stop()); return plot.node(); }32:T7c6,function createLinks(data) { const people = []; for (var i = 0; i < data.length; i++) { const universe = people_dark.filter(d => data[i].target === d.id); const thisSeason = data[i].season; const parents = (data[i].source.toString()).split(' - '); // if it's a child if (data[i].type === 'Child' && parents.length === 2) { // if it's Regina Tiedemann, add the father only for the second season let season_b = thisSeason; if ((data[i].target_names === 'Regina Tiedemann' || data[i].target_names === 'Katharina Nielsen') && data[i].season !== 4) { season_b = 3; } // create two links for both parents people.push({ id: universe[0].id, name: universe[0].name, source_names: data[i].source_names, target_names: data[i].target_names, source: +parents[0], target: +data[i].target, type: data[i].type, hide: 'inherit', parents: data[i].source, universe: universe[0].universe, season: thisSeason, }, { id: universe[0].id, name: universe[0].name, source_names: data[i].source_names, target_names: data[i].target_names, source: +parents[1], target: +data[i].target, type: data[i].type, hide: 'inherit', parents: data[i].source, universe: universe[0].universe, season: season_b, }) } else if (data[i].type === 'Dating -') { // don't add them } else { people.push({ id: universe[0].id, name: universe[0].name, source_names: data[i].source_names, target_names: data[i].target_names, source: +data[i].source, target: +data[i].target, type: data[i].type, hide: 'inherit', parents: data[i].source, universe: universe[0].universe, season: thisSeason, }) } } return people; }33:[{"id":"e831a63be1c8e5b2569720155e534fd1cf54f2a076e81ba0ec4dfb75d37450c2ff40a38087e20ac1a8d02e1f6f5b38a3f9d13959f510a80ba54387ed3dc83dd2","href":"https://static.observableusercontent.com/files/e831a63be1c8e5b2569720155e534fd1cf54f2a076e81ba0ec4dfb75d37450c2ff40a38087e20ac1a8d02e1f6f5b38a3f9d13959f510a80ba54387ed3dc83dd2","name":"dark_links.csv","type":"text/csv","lastModified":1600623740984.64,"size":6510},{"id":"67c4d01b9f173bbbb13f84a5666b3fc54f5bb6c928e0589cdd2701c728bd2862beff9c919b048169f07354fd134c32d8ae8e2595bf62bfc401e010d2c993b489","href":"https://static.observableusercontent.com/files/67c4d01b9f173bbbb13f84a5666b3fc54f5bb6c928e0589cdd2701c728bd2862beff9c919b048169f07354fd134c32d8ae8e2595bf62bfc401e010d2c993b489","name":"dark_nodes@1.csv","type":"text/csv","lastModified":1600624528002.473,"size":5295}] 2f:{"title":"D3 Force layout - Dark Family tree","cells":[{"id":0,"value":"md`# D3 Force layout - Dark Family tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2035,"value":"md`A month ago I finished watching Netflix's tv-show Dark. The third and last season ends up answering most of the viewer's questions, many of them around the family tree of the protagonists. Be aware that the following network will show **spoilers** of the three seasons.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"viewof object_season = {\n const seasons = html`\n

Select a season

\n \n \n \n `;\n\n seasons.onclick = event => {\n mutable season = +event.target.id;\n };\n \n return seasons;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"md`## Season ${writeSeason} --- Spoilers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"legend = {\n \n const plot = d3.create('svg')\n .attr('width', width)\n .attr('height', padding * 4);\n \n const plotLegend = plot\n .selectAll('legend')\n .data(legend_text);\n \n plotLegend\n .join('text')\n .text(d => d.type)\n .attr('class', '.legend')\n .style('fill', background)\n .attr('x', (d, i) => 50 + (200 * i))\n .attr('y', padding * 2.5);\n \n plotLegend\n .join('line')\n .attr('class', '.line')\n .attr('x1', (d, i) => 10 + i * 200)\n .attr('x2', (d, i) => 40 + i * 200)\n .attr('y1', (d, i) => padding * 2)\n .attr('y2', (d, i) => padding * 2)\n .style('stroke', background)\n .style('stroke-width', d => scaleThickness(d.type))\n .attr('stroke-dasharray', d => {\n if (d.type === 'Dating') {\n return (4, 4)\n }\n })\n \n return plot.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`## Forces to draw the network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2039,"value":"md`I've always had a love and hate relationship with d3's force layouts. For this reason, I considered doing Dark's family tree a good challenge. As the show unfolds, the traditional genealogic tree changes into a network full of unexpected links. I structured the CSV that builds the layout as I coded it to have better control of the vertical and horizontal position of the dots. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"md`### Nodes and links`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"md`Map of external nodes and links to avoid using the master array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"drawLinks = linksBySeason[season - 1].map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"drawNodes = nodesBySeason[season - 1].map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"simulation = d3.forceSimulation(drawNodes)\n .force('collide', forceCollide)\n .force('xAxis', d3.forceX(d => scaleX(d.family)).strength(1))\n .force('yAxis', d3.forceY(d => scaleY(d.level)).strength(1))\n // .force('cluster', forceCluster)\n // .force(\"center\", forceCenter)\n .force(\"charge\", foceManyBody)\n .force(\"link\", forceLink)\n .alpha(1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1774,"value":"md`### ForceCluster`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`forceCluster comes from https://bl.ocks.org/ericsoco/4e1b7b628771ae77753842e6dabfcef3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`Create a force to attract the nodes to their level point, which is determined by their family group and their genealogical level.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"md`forceCluster is currently not being implemented becase the force link has 0 strength, and the pull comes from forceX and forceY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"forceCluster = d3_cluster.forceCluster()\n .centers(d => gen_levels[d.cluster])\n .strength(0.5);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1784,"value":"md`### ForceCenter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`Keep the simulation balanced around the screen center. It's currently off because it moves the network out of the svg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"forceCenter = d3.forceCenter();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1789,"value":"md`### ForceCollide`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`Avoid nodes overlapping with each other`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"forceCollide = d3.forceCollide()\n // .strength(1)\n .radius(d => radius + padding)\n // .iterations(0.5);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1794,"value":"md`### ForceManyBody`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"foceManyBody = d3.forceManyBody()\n .distanceMin([radius + padding])\n .distanceMax([padding * 4])\n .strength(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1798,"value":"md`### ForceLink`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"md`Control the links' pull to the nodes. The higher the strength, the bigger the network's distortion `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"forceLink = d3.forceLink(drawLinks)\n .id(d => d.id)\n .strength([0])\n // .distance([80])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1803,"value":"md`### FindParents`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"md`If the link is between parents and children, find both parents x and y and create a middle point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function findParents(parents, all_nodes) {\n \n const origin_points = all_nodes.filter(e => {\n return e.id === +parents[0] || e.id === +parents[1]; \n });\n \n return origin_points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"padding = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"margin = ({top: padding * 6, right: padding * 2, bottom: padding, left: padding * 6})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = width / 1.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"chart_width = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"chart_height = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"radius = 5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"legend_text = [\n { type: 'Married' },\n { type: 'Child'},\n // { type: 'Dating'}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"scaleFamilyNames = d3.scaleOrdinal().domain([1, 2]).range([margin.top / 2, height - margin.bottom * 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"md`Variable to control which season to draw`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"mutable season = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"writeSeason = function checkSeason() {\n let thisSeason = season;\n if (season === 4) thisSeason = '3 --- End'\n return thisSeason;\n}()","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"md`### Colours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"background = \"#080B10\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"white = '#F0F2F2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"universe_1 = '#3C7F8E'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"universe_2 = '#BFA27E'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2098,"value":"universe_0 = '#75AB6A'","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"infinite = '#D8B900'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"md`Pick different colours depending on the universe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"scaleColourUniverses = d3.scaleOrdinal()\n .domain(['Universe 1', 'Universe 2', 'Infinite', 'Universe 0'])\n .range([universe_1, universe_2, infinite, universe_0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1822,"value":"function checkLinksColours(link) {\n if (link.source.universe === 'Universe 2' && link.target.universe === 'Universe 1') return infinite;\n return scaleColourUniverses(link.target.universe)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"function checkNodeColours(node) {\n if (node.name === 'Jonas Kahnwald / The Stranger' || node.name === 'Infinite' || (node.season === 3 && node.name === 'Martha Nielsen')) return infinite;\n return scaleColourUniverses(node.universe);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"value":"md`### Scales to control the position of the nodes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"md`Check the minimum and maximum level of the families, and create a scaleY related to these values `","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"minLevels = d3.min(nodesBySeason, d => {\n const min_season = d3.min(d, e => e.level);\n return min_season; \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"maxLevels = d3.max(nodesBySeason, d => {\n const max_season = d3.max(d, e => e.level);\n return max_season; \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"scaleY = d3.scaleLinear().range([margin.top, chart_height]).domain([minLevels, maxLevels])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"md`Check the maximum number of people in a family that are in the same horizontal level (brothers and sisters, partners...), and create a scale to control X `","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"maxFamilies = d3.max(nodesBySeason[season - 1], d => {\n // const max_season = d3.max(d, e => e.family);\n \n return d.family; \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"scaleX = d3.scaleLinear().domain([0, maxFamilies]).range([margin.left, chart_width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"md`Create different stroke styles depending on the type of link`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"scaleThickness = d3.scaleOrdinal().domain(['Married', 'Child', 'Adopted', 'Dating', 'Divorced']).range([4, 1, 1, 4, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"scaleDash = d3.scaleOrdinal().domain(['Married', 'Child', 'Adopted', 'Dating', 'Divorced']).range([0, 0, 0, (2, 2), (2, 2)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`Import data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"people_dark = d3.csvParse(await FileAttachment(\"dark_nodes@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"connections = d3.csvParse(await FileAttachment(\"dark_links.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"md`Create the links, add the nodes information into the array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"links = createLinks(connections);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1946,"value":"md`Prepare information per season`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"nodesBySeason = [ people_dark.filter(d => d.season === 1), people_dark.filter(d => d.season <= 2), people_dark.filter(d => d.season <= 3 && d.universe !== 'Universe 0'), people_dark.filter(d => d.universe === 'Universe 0')]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"linksBySeason = [ links.filter(d => d.season === 1), links.filter(d => d.season <= 2), links.filter(d => d.season <= 3 && (d.source_names !== 'Unknown 1 - Unknown 2' )), links.filter(d => d.season === 4)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`Group the position (levels) of the clusters in a different array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"gen_levels = createClusters();","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"function createClusters() {\n const clusters = [];\n \n (nodesBySeason[season - 1]).forEach((node) => {\n node.x = scaleX(node.family);\n node.y = scaleY(node.level);\n node.radius = radius;\n \n // cluster by family group and by level within it\n const clusterID = `family_${node.family_group}_${node.level}`;\n node.cluster = clusterID;\n \n if (!clusters[clusterID] || (radius > clusters[clusterID].radius)) {\n clusters[clusterID] = node;\n }\n });\n \n return clusters\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`Create new array just with the family information`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"families = d3.nest()\n .key(d => `${d.universe} * ${d.Family_name}`)\n .rollup(v => v[0].family_group,)\n .entries(nodesBySeason[season - 1].filter(d => d.Family_name !== 'Unknown' && d.Family_name !== '-'));","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## JavaScript libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`Import D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"d3_cluster = require(\"https://unpkg.com/d3-force-cluster@latest\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}