2d:null 2e:["$","title",null,{"children":"SCALE Multiplier - Voronoi Table of Contents | Clément Renaud | Observable"}] 33:T136d,draw = () => { // SCALE logotype const title = svg.append("g") .attr('width', w) .attr('height', h) .attr('transform', `translate(0,${h - h / 3})`) const titleText = title.append("text") .attr('text-anchor', 'start') .attr('height', h) .style('stroke', 'purple') .style('paint-order', 'stroke') // show only outline .style('stroke-width', '.1') .style('stroke-linecap', 'butt') .style('stroke-linejoin', 'miter') .text('SCALE') // scale logotype to full screen size const bbox = titleText.node().getBBox() const widthTransform = w / bbox.width; const heightTransform = h / bbox.height; const transformValue = widthTransform < heightTransform ? widthTransform : heightTransform; console.log(transformValue) titleText.attr('transform', `scale(${transformValue})`) // draw cells const cells = relax.map((d, i) => [d, voronoi.cellPolygon(i)]); const path = polygon => "M" + polygon.join("L") + "Z" const shapes = svg.append("g") .attr('class', 'cells') .selectAll("path") .data(cells.map((d, i) => ({ coords: d[1], i }))) .enter() .append("path") .attr("d", d => path(d.coords)) .attr("fill", "transparent") .style('stroke', '#bbb') .style('cursor', 'pointer') .on('mouseover', function(e, d) { d3.select(this).attr("fill", (d, i) => colorScale(d.i)) }) .on('mouseout', function(e, d) { d3.select(this).attr("fill", 'transparent') }) // .on('click', function(e, d) { // showArticle(d.i) // }) // vertices svg.append("g") .attr('class', 'vertices') .selectAll('circle') .data(cells.map(c => c[1]).flat()) .enter() .append('circle') .style('fill', '#ccc') .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr('r', 5) // draw bounding boxes const bboxes = svg.append("g") shapes.selectAll("path") .each( function(d, i, e) { const coords = d3.select(this).node().getBBox() bboxes.append('rect') .attr("x", coords.x) .attr("y", coords.y) .attr("width", coords.width) .attr("height", coords.height) .style('stroke', d => colorScale(i)) .style('fill', 'transparent') .style('pointer-events', 'none') }) // articles titles const titles = svg.append('g') .attr('class', 'titles') .attr('transform', `translate(0,0)`) .selectAll('text') .data(cells.map(d => d[0])) .enter() .append('text') .style('text-anchor', 'middle') .attr('x', d => d[0]) .attr('y', d => d[1]) .attr('width', '100%') .attr('height', '100%') titles .append('tspan') .attr('font-size', '12pt') .attr('fill', 'purple') .style('pointer-events', 'none') .text((d, i) => articles[i].metadata.title) titles .append('tspan') .attr('x', d => d[0]) .attr('y', d => d[1] + 30) .text((d, i) => articles[i].metadata.author) // numbering svg.append('g') .attr('class', 'numbering') .attr('x', 0) .attr('y', 0) .selectAll('text') .data(cells.map((d,i) => ({ coords: d[0], data: articles[i] }))) .enter() .append('text') .attr('x', d => d.coords[0]) .attr('y', d => d.coords[1] - 25) .attr('font-size', '14pt') .attr('fill', 'purple') .style('pointer-events', 'none') .text((d, i) => i) // article overlay // const overlay = svg.append('g') // .attr('class', 'overlay') // .style('display', 'none') // overlay // .append('rect') // .attr('width', w) // .attr('height', h) // .attr('x', 0) // .attr('y', 0) // .style('fill', 'rgba(0,0,0,.85') // overlay.append('text') // .attr('class', 'close-overlay') // .attr('x', w-50) // .attr('y', 50) // .style('color', 'white') // .style('font-size', '12pt') // .style('cursor', 'pointer') // .text('X') // .on('click', d => { // overlay.style('display', 'none') // d3.selectAll('.text').style('display', 'none') // }) // // articles // const texts = svg.append('g') // .attr('class', 'texts') // const margin = 50 // articles.forEach( (article, i) => { // texts // .append('foreignObject') // .attr('class', 'text') // .attr('id', `text-${i}`) // .attr("x", 0 + margin) // .attr("y", 0 + margin) // .attr("width", w - margin) // .attr("height", h - margin) // .html(d => { // return `

${article.metadata.title}

by ${article.metadata.author}

${article.html.replace(/]*>/g, "").slice(0, 100)}[...]

Read` // }) // .style('display', 'none') // }) // const showArticle = (i) => { // overlay.style('display', 'block') // console.log(d3.select(`text-${i}`)) // d3.select(`#text-${i}`) // .style('display', 'block') // } }34:[] 31:{"id":"3934f7885a8e2eb3","slug":"scalepublishing-demo","title":"SCALE Multiplier - Voronoi Table of Contents","thumbnail":"3354af47bd695a8b09513687a56c617fefa05f21ede64ead6975e772ba632fdc","access_level":"public","create_time":"$D2022-01-11T20:06:35.787Z","update_time":"$D2022-04-06T11:37:46.342Z","view_time":null,"first_public_time":"$D2022-04-05T21:11:32.146Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"866b7439c266bbe5","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":"starter_2024"},"version":200,"publish_version":200,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b23a90c6da12bac","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":null}],"members":[{"type":"individual","id":"4b23a90c6da12bac","login":"clemsos","name":"Clément Renaud","avatar_url":"https://avatars-next.observableusercontent.com/08d03128c2d7bf6ffc580efc85edec0c40b5d91826b746db27920b996240c8f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SCALE Multiplier - Voronoi Table of Contents","cells":[{"id":0,"value":"# SCALE Multiplier - Voronoi Table of Contents\n\nA basic demo of image generation using @scalepublishing/multiplier js package.\n\nHere we use the entire content of the [Multiplier SCALE issue](https://scalepublishing.com/multiplier/) to parse a simple interactive table of contents - using a voronoi layout with Lloyd relaxation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"svg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`Import the content of the issue from npm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"multiplier = require('https://bundle.run/@scalepublishing/multiplier@0.0.13')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`randomize articles order`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"articles = shuffle(multiplier.articles)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"draw()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"w = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"n = articles.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"particles = Array.from({ length : n }, () => [Math.random() * w, Math.random() * h]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"relax = lloydRelax(w, h, particles, 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"colorScale = d3.scaleLinear()\n .domain([0, n])\n .range([\n d3.color('purple').copy({ opacity: 0.1 }), \n d3.color('purple').copy({ opacity: 0.8 }) \n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"delaunay = d3.Delaunay.from(relax)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"voronoi = delaunay.voronoi([0.5, 0.5, w - 0.5, h - 0.5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"svg = d3.select(DOM.svg(w,h))\n .style(\"fill\", \"white\")\n .attr(\"viewBox\", [0, 0, w, h])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function shuffle(array) {\n var currentIndex = array.length, randomIndex;\n\n // While there remain elements to shuffle...\n while (0 !== currentIndex) {\n\n // Pick a remaining element...\n randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex--;\n\n // And swap it with the current element.\n [array[currentIndex], array[randomIndex]] = [\n array[randomIndex], array[currentIndex]];\n }\n\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"lloydRelax = (w, h, points, iters = 20) => {\n\n const v = d3.Delaunay\n .from(points)\n .voronoi([0.5, 0.5, w - 0.5, h - 0.5]);\n\n for (let i = 0; i < iters; ++i) {\n for (let j = 0; j < points.length; ++j) {\n const cell = v.cellPolygon(j);\n const [cx, cy] = d3.polygonCentroid(cell);\n\n v.delaunay.points[j * 2] += (cx - v.delaunay.points[j * 2]) * 0.03;\n v.delaunay.points[j * 2 + 1] += (cy - v.delaunay.points[j * 2 + 1]) * 0.03;\n }\n }\n\n return Array.from(points, (_, j) => [\n v.delaunay.points[2 * j],\n v.delaunay.points[2 * j + 1]\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"require(\"d3-delaunay\", \"d3-polygon\", \"d3-selection\", 'd3-scale', 'd3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"