2b:null 2c:["$","title",null,{"children":"Untitled | Anne-Laure Razat | Observable"}] 31:T430,chart = { const nodes = d3.range(100).map(id => ({ id })); const forceCharge = d3.forceManyBody().strength(-20); const forceX = d3.forceX().strength(.0); const forceY = d3.forceY().strength(.1); const simulation = d3.forceSimulation() .nodes(nodes) .force('charge', forceCharge) .force('x', forceX) .force('y', forceY) .stop(); for (let i = 0; i < 100; i++) simulation.tick(); const yExtent = d3.extent(nodes, d => d.y); const height = (yExtent[1] - yExtent[0]) + 100; const svg = d3.select(DOM.svg(width, height)); const blob = svg.append('g') .attr('transform', `translate(${width / 2}, ${height / 2})`) .attr('font-size', `${60}px`); function random() { const d = (Math.random() * 8) - (8 / 2); console.log(d); return d; } blob.selectAll('text').data(nodes) .enter().append('text') .sort((a, b) => a.y - b.y) .text(randomLetter) .attr('x', d => d.x + random()) .attr('y', d => d.y + random()) .attr('class', 'weepeople'); return svg.node() }32:[{"id":"3a8238e5575c36b2102343cd30f8f16327c77d732f3d4fb46902d95d790078186ec8c25620097b546294ad68b88f753ab53d52cd2966770123ae78fdb5d10c68","href":"https://static.observableusercontent.com/files/3a8238e5575c36b2102343cd30f8f16327c77d732f3d4fb46902d95d790078186ec8c25620097b546294ad68b88f753ab53d52cd2966770123ae78fdb5d10c68","name":"weepeople.css","type":"text/css","lastModified":1573848818809.198,"size":77947}] 2f:{"id":"4e7740252224497d","slug":"untitled","title":"","thumbnail":"d185ae18f844026f8e1b41c8ef87e44d692353a6d750125a0ed5a4a6f62e021a","access_level":"public","create_time":"$D2019-11-15T20:02:34.433Z","update_time":"$D2019-12-09T21:25:28.265Z","view_time":null,"first_public_time":"$D2019-11-15T21:07:10.123Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"965c0c3c524a1179","login":"ar3607","name":"Anne-Laure Razat","avatar_url":"https://avatars-next.observableusercontent.com/55a75ae08387f568447dbda65b261c0fffb76f059af12be5122086fbaf65d9fe","tier":"starter_2024"},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"420f288112d2c7fc","login":"ar3607","name":"Anne-Laure Razat","avatar_url":"https://avatars-next.observableusercontent.com/55a75ae08387f568447dbda65b261c0fffb76f059af12be5122086fbaf65d9fe","tier":null}],"members":[{"type":"individual","id":"420f288112d2c7fc","login":"ar3607","name":"Anne-Laure Razat","avatar_url":"https://avatars-next.observableusercontent.com/55a75ae08387f568447dbda65b261c0fffb76f059af12be5122086fbaf65d9fe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":0,"value":"md`\n[Wee People font](https://github.com/propublica/weepeople) courtesy of ProPublica`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`On August 24, 2014 over 100 migrants went missing during their migratory journey in the Mediterranean`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`None of these deaths were reported in the media`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`The majority of these deaths were by drowning. It takes an adult human 60 seconds to drown`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"{\n const rootDiv = DOM.element(\"div\");\n ReactDOM.render(h(App), rootDiv);\n return rootDiv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"App = () => {\n const height = 500;\n const randomX = d3.randomNormal(500, 70);\n const randomY = d3.randomNormal(225, 70);\n const pulse = emotion.keyframes`\n from {\n transform: scale(1);\n }\n to {\n transform: scale(4);\n }\n`;\n const dots = d3\n .range(100)\n .map(() => {\n return {\n x: randomX(),\n y: randomY()\n };\n })\n .map((d, index) => {\n const { x, y } = d;\n return h(\n \"g\",\n { transform: `translate(${x}, ${y})`, key: index },\n h(\"circle\", {\n r: 2,\n className: emotion.css`\nanimation-name: ${pulse};\nanimation-iteration-count: 60;\nanimation-duration: 1s;\nanimation-direction: alternate;\nopacity: 0.3;\ncolor: white;`\n })\n );\n });\n return h(\"svg\", { width, height }, dots);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"h = React.createElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"emotion = r(\"emotion\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"React = r(\"react\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"ReactDOM = r(\"react-dom\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"r = require.alias({\n react: \"react@16/umd/react.development.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.development.js\",\n emotion: \"emotion@10.0.14/dist/emotion.umd.min.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"{\n const node = \n svg``;\n \n \n let circle = d3.select(node).select('circle');\n \n pulse(circle);\n\n function pulse(circle) {\n (function repeat() {\n circle\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0)\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0.5)\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 80)\n .attr('stroke-opacity', 0)\n .ease(d3.easeSin)\n .on(\"end\", repeat);\n })();\n }\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"{\n const node = \n svg``;\n \n \n let circle = d3.select(node).select('circle');\n \n pulse(circle);\n\n function pulse(circle) {\n (function repeat() {\n circle\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0)\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 0)\n .attr('stroke-opacity', 0.5)\n .transition()\n .duration(700)\n .attr(\"stroke-width\", 80)\n .attr('stroke-opacity', 0)\n .ease(d3.easeSin)\n .on(\"end\", repeat);\n })();\n }\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"letters = 'a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z'.split(' ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function randomLetter() {\n const i = Math.floor(Math.random() * letters.length);\n return letters[i];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"css = FileAttachment(\"weepeople.css\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"stylesheet = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"