31:T79e,chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]) const avatars = svg .selectAll('text') .data(samples) .join('text') .attr('text-anchor', 'middle') .attr('dy', '0.4em') .attr('transform', d => `translate(${d.position[0]},${d.position[1]}) scale(${Math.random() < 0.5 ? -1 : 1},1)`) .attr('fill', d => color(d.character.nationality)) .style('cursor', 'pointer') .attr('fill-opacity',0.6) .on('mouseover', function(d, i) { const el = d3.select(this) const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t) this.parentElement.appendChild(this); el.transition(t).attr('font-size', d => d.character.animal_type === 'Wolf' ? sizes.otherNormal : sizes.otherEnlarged).attr('fill-opacity', 1) }) .on('mouseout', function(d, i) { const el = d3.select(this) const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t) el.transition(t).attr('font-size', d => d.character.animal_type === 'Wolf' ? sizes.wolfSizeNormal : sizes.wolfSizeEnlarged).attr('fill-opacity',0.6) }) const horses = avatars .filter(d => d.character.animal_type === "Horse") .attr('font-size', sizes.otherNormal) .attr('font-family', horseFont.family) .text(d => getRandomCharacter(horseCharacters)) const wolves = avatars .filter(d => d.character.animal_type === "Wolf") .attr('font-size', sizes.wolfSizeNormal) .attr('font-family', wolfFont.family) .text(d => getRandomCharacter(wolfCharacters)) const persons = avatars .filter(d => d.character.animal_type === "") .attr('font-size', sizes.otherNormal) .attr('font-family', peopleFont.family) .text(d => getRandomCharacter(d.character.gender === 'Males' ? maleCharacters : femaleCharacters)) return svg.node() }32:T6a9,function* poissonDiscSampler(x0, y0, x1, y1, r, k = 30) { if (!(x1 >= x0) || !(y1 >= y0) || !(r > 0)) throw new Error; const width = x1 - x0; const height = y1 - y0; const r2 = r * r; const r2_3 = 3 * r2; const cellSize = r * Math.SQRT1_2; const gridWidth = Math.ceil(width / cellSize); const gridHeight = Math.ceil(height / cellSize); const grid = new Array(gridWidth * gridHeight); const queue = []; function far(x, y) { const i = x / cellSize | 0; const j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (let j = j0; j < j1; ++j) { const o = j * gridWidth; for (let i = i0; i < i1; ++i) { const s = grid[o + i]; if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < r2) return false; } } } return true; } function sample(x, y) { queue.push(grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]); return [x + x0, y + y0]; } yield sample(width / 2, height / 2); pick: while (queue.length) { const i = Math.random() * queue.length | 0; const parent = queue[i]; for (let j = 0; j < k; ++j) { const a = 2 * Math.PI * Math.random(); const r = Math.sqrt(Math.random() * r2_3 + r2); const x = parent[0] + r * Math.cos(a); const y = parent[1] + r * Math.sin(a); if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) { yield sample(x, y); continue pick; } } const r = queue.pop(); if (i < queue.length) queue[i] = r; } }33:T84b,function tooltipMouseOver(d, i, t) { let el = d3.select("body"); let div = el .append("g") .append("div") .attr("class", "tooltip") .style("opacity", 0); div .html(` Name: ${d.character.name}
Nationality: ${d.character.nationality}
` + (!leaving ? ` ${ d.character.first_mentioned_book === book ? 'First Mentioned: Chapter '+ d.character.first_mentioned_chapter + '
' : ''} ${ d.character.first_appeared_book === book ? 'First Appeared: Chapter '+ d.character.first_appeared_chapter + '
' : ''} ` : '') + (leaving ? ` ${ d.character.first_mentioned_book ? 'First Mentioned: '+ d.character.first_mentioned_book + ' ' + (d.character.first_mentioned_chapter ? d.character.first_mentioned_chapter : '') +'
' : ''} ${ d.character.first_appeared_book ? 'First Appeared: '+ d.character.first_appeared_book +' ' + (d.character.first_appeared_chapter ? d.character.first_appeared_chapter : '') +'
' : ''} ${ d.character.last_appeared_book ? 'Last Appeared: '+ d.character.last_appeared_book +' ' + (d.character.last_appeared_chapter ? d.character.last_appeared_chapter : '') +'
' : ''} ${ d.character.last_mentioned_book ? 'Last Mentioned: '+ d.character.last_mentioned_book +' ' + (d.character.last_mentioned_chapter ? d.character.last_mentioned_chapter : '') +'
' : ''} ` : '')) .style("left", (d3.event.pageX + 10) + "px") .style("top", (d3.event.pageY - 10) + "px") .transition(t) .style("opacity", 0.9) ; let el2 = d3.select(this); el2 .transition(t) .style("fill-opacity", 0.9) .style("stroke", "black") .style("stroke-width", "1px") .style("stroke-opacity", 0.7); } 34:[{"id":"e6fb4f8d0dad065b131ec22718ac7de666261cdbf3aca17819e57a3b7f509c4b1aa04a5e8c916e7f6327b890a9a8bcb84221f200dd74201e34b86e95016ede37","href":"https://static.observableusercontent.com/files/e6fb4f8d0dad065b131ec22718ac7de666261cdbf3aca17819e57a3b7f509c4b1aa04a5e8c916e7f6327b890a9a8bcb84221f200dd74201e34b86e95016ede37","name":"weepeople.woff2","type":"font/woff2","lastModified":1589736411988.271,"size":26944},{"id":"c5096295fc28a09ddbfb6bffe3404801c695434a089e0de917d693519e68877e586c0ad80acbf72ea06e9dbf7d92ce804859704b3ce8d166698c8fc2c669b069","href":"https://static.observableusercontent.com/files/c5096295fc28a09ddbfb6bffe3404801c695434a089e0de917d693519e68877e586c0ad80acbf72ea06e9dbf7d92ce804859704b3ce8d166698c8fc2c669b069","name":"nationality-ordered.csv","type":"text/csv","lastModified":1589750399965.663,"size":20041},{"id":"8e775ea782d8ce60e24ecbf58be116cc20185e8122397c271980351faa89b18730590167533971ab48c0e6093d62b42b8e556ac68bef366072483ccfb7399f60","href":"https://static.observableusercontent.com/files/8e775ea782d8ce60e24ecbf58be116cc20185e8122397c271980351faa89b18730590167533971ab48c0e6093d62b42b8e556ac68bef366072483ccfb7399f60","name":"wolf.ttf","type":"font/ttf","lastModified":1589748865130.398,"size":206220},{"id":"da60c4d12ada4b6c677935e9980d46ba9dce988499b52c27cb7ab9997efdbf8b6753ffe1e19fbebc11aefe478e84746abc2e1cf45ff558fbfce36d6ce7f2019a","href":"https://static.observableusercontent.com/files/da60c4d12ada4b6c677935e9980d46ba9dce988499b52c27cb7ab9997efdbf8b6753ffe1e19fbebc11aefe478e84746abc2e1cf45ff558fbfce36d6ce7f2019a","name":"horses.ttf","type":"font/ttf","lastModified":1589748856747.464,"size":86912}] 2f:{"title":"Blue Noise People","cells":[{"id":0,"value":"md`# Blue Noise People`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"radius = width / (1.5 * Math.sqrt(data.length)) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"height = width * 1.1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"sizes = ({\n wolfSizeNormal: radius * 1.1,\n wolfSizeEnlarged: radius * 2.2,\n otherNormal: radius * 2,\n otherEnlarged: radius * 4\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"getRandomCharacter = (characters) => characters[Math.floor(Math.random() * characters.length)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof femaleCharacters = {\n const div = html`

abcdefghijklmnopqrs

`;\n div.value = Array.from(div.textContent);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof maleCharacters = {\n const div = html`

yzABCDEFGHIJKLMNOPQRSTUVWXYZ

`;\n div.value = Array.from(div.textContent);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`[Wolf Font](https://www.fontspace.com/wwwolfspirit-font-f3406)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof wolfCharacters = {\n const div = html`

`;\n div.value = Array.from(div.textContent);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"wolfFont = {\n const font = new FontFace(\"WolfFont\", `url(${await FileAttachment(\"wolf.ttf\").url()})`);\n await font.load();\n document.fonts.add(font);\n return font;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`[Horse Font](https://www.fontspace.com/dj-horses-1-font-f7251)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"viewof horseCharacters = {\n const div = html`

fgq

`;\n div.value = Array.from(div.textContent);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"horseFont = {\n const font = new FontFace(\"HorseFont\", `url(${await FileAttachment(\"horses.ttf\").url()})`);\n await font.load();\n document.fonts.add(font);\n return font;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"samples = [...poissonDiscSampler(0, 0, width, height, radius)]\n .sort(([ax, ay], [bx, by]) => Math.hypot(ax - width / 2, ay - height / 2) - Math.hypot(bx - width / 2, by - height / 2))\n .slice(0, data.length)\n //.sort(([ax, ay], [bx, by]) => ay - by ? ay - by : ax - bx).map((a,i) => ({position: a, character: data[i]}))\n .sort(([ax, ay], [bx, by]) => bx - ax ? bx - ax : ay - by).map((a,i) => ({position: a, character: data[i]}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"dataSource = FileAttachment(\"nationality-ordered.csv\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"data = d3.csvParse(dataSource, d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"import { color as color } from \"@dunderdan/wot-colors\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"peopleFont = {\n const font = new FontFace(\"WeePeople\", `url(${await FileAttachment(\"weepeople.woff2\").url()})`);\n await font.load();\n document.fonts.add(font);\n return font;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"margin = ({top: 0, right: 0, bottom: 0, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"book = 'TEOTW'","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"function tooltipMouseOut(d, i, t) {\n let el = d3.selectAll(\".tooltip\");\n \n el.each(function() {\n\t\tel.remove();\n\t}); \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.5)\n .style(\"stroke-width\", \"0px\");\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"leaving = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"tooltip = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}