2d:null 2e:["$","title",null,{"children":"D3.js - 10 Years of Tweets | Dario Segura | Observable"}] 33:T43e,guide = md` ### Instructions ^{[^](#intro)} - **Scroll in/out** on the graph to zoom in/out - **Hold Down Left Mouse Button and Drag** to move the graph side to side - **Click Left Mouse Button on a Blue Circle** to view/pin a Tweet to the right side-bar ### UI Explaination: - **Rings** group related Tweets together. The label of the ring denotes how similar the Tweets are to each other where [0.65] - denotes 65% similarity based on our clustering algorithm. The key terms on the ring label gives an overview of what the Tweets are talking about. - **Edges** connect two Tweets with similar content. - **Nodes** are Tweets. Clicking on one will allow you to view its contents and pin it to the **right side-bar** - The **bottom left panel** contains the top 5 users by Tweet count and the top 5 most commonly used hashtags. Move around the graph to update these statistics based on which Tweets are in view. ### Supported Browsers: - Google Chrome - Mozilla Firefox `34:T4d3,async function loadGraferData(grafer, container) { const loading = createLoading(container); const resolveObject = obj => Promise.all( Object.entries(obj).map(([k, v]) => Promise.resolve(v).then(v => [k, v])) ).then(d => Object.fromEntries(d)); const {snapshots, userMetaData, dataPack} = await resolveObject({ snapshots: FileAttachment("snapshots-4-3-1-19-25.json").json(), userMetaData: FileAttachment("meta.csv").csv(), dataPack: resolveObject({ points: FileAttachment("points@2.jsonl").url(), clusters: FileAttachment("clusters@2.jsonl").url(), clusterEdges: null, nodes: FileAttachment("nodes@2.jsonl").url(), nodeEdges: FileAttachment("edges@2.jsonl").url(), labels: FileAttachment("labels@1.jsonl").url(), }), }); await grafer.init(dataPack) const twitter = new TwitterView(container, grafer, userMetaData); createFullScreenToggle(container); grafer.on('node-clicked', (type, node) => { twitter.displayTweet(node); }); if (document.fullscreenElement) { new SnapshotsView(container, grafer, twitter, snapshots, showEditMode); } loading.parentElement.removeChild(loading); }35:T2221,html` `36:[{"id":"9a1e3c32605e909310255aa8560379fe5caec91d09a9e208af3f0f6aad9f8211e304492fe1dce5bd82d87564162785b08d9cbb35d2a1f2b09afc79886c50f705","href":"https://static.observableusercontent.com/files/9a1e3c32605e909310255aa8560379fe5caec91d09a9e208af3f0f6aad9f8211e304492fe1dce5bd82d87564162785b08d9cbb35d2a1f2b09afc79886c50f705","name":"points@2.jsonl","type":"application/octet-stream","lastModified":1619986000576.302,"size":6204225},{"id":"c5af2f91e28d6686befa2f8b251be3d423c158717598a6380b9e44b0717b1e97f8cfe428b90b37942af020966b9b427f644049515a1d5afb19ac52a14d78b86b","href":"https://static.observableusercontent.com/files/c5af2f91e28d6686befa2f8b251be3d423c158717598a6380b9e44b0717b1e97f8cfe428b90b37942af020966b9b427f644049515a1d5afb19ac52a14d78b86b","name":"nodes@2.jsonl","type":"application/octet-stream","lastModified":1619985977832.233,"size":14390089},{"id":"a34754023a45635131d244de4afcf98aed846be2c246dd8673baaf87100d648d742b6690e23c6bbe482c52c95f24243e247bffa57df05e4c05b955185ab1ee41","href":"https://static.observableusercontent.com/files/a34754023a45635131d244de4afcf98aed846be2c246dd8673baaf87100d648d742b6690e23c6bbe482c52c95f24243e247bffa57df05e4c05b955185ab1ee41","name":"clusters@2.jsonl","type":"application/octet-stream","lastModified":1619985905351.084,"size":1578073},{"id":"76bbaabaaa1f93776ca6a018582ca3e190c087ad505c92281d0f0417f3291d312f3502c71c8e07fe3e7a6b9a79402421e56e306927321cc6bb81cbb15d6ee4d9","href":"https://static.observableusercontent.com/files/76bbaabaaa1f93776ca6a018582ca3e190c087ad505c92281d0f0417f3291d312f3502c71c8e07fe3e7a6b9a79402421e56e306927321cc6bb81cbb15d6ee4d9","name":"nodes@1.jsonl","type":"application/octet-stream","lastModified":1619890333045.747,"size":14390618},{"id":"7919b81a33497ad208dd511f5ebe822738c47e467b671e89503a8fd54414139f7b5baeb29ac8fc62b9cbd0fdbd735e7189ada8ac531218d2b3adfebb2d98e307","href":"https://static.observableusercontent.com/files/7919b81a33497ad208dd511f5ebe822738c47e467b671e89503a8fd54414139f7b5baeb29ac8fc62b9cbd0fdbd735e7189ada8ac531218d2b3adfebb2d98e307","name":"points@1.jsonl","type":"application/octet-stream","lastModified":1619890332212.106,"size":6476280},{"id":"4731b2c201054f9afaf4c4b3a32ae8f791542a74222faf6fdda2796cae4b367ec5d52f158acca5ce6353d93ea3097e0d5d03ce890dd2ade03daa348dc744b2c8","href":"https://static.observableusercontent.com/files/4731b2c201054f9afaf4c4b3a32ae8f791542a74222faf6fdda2796cae4b367ec5d52f158acca5ce6353d93ea3097e0d5d03ce890dd2ade03daa348dc744b2c8","name":"edges@1.jsonl","type":"application/octet-stream","lastModified":1619890331134.918,"size":1724794},{"id":"38f087789add95d37257c58f9e3a20216cd637cc7d02149da5129a240d66acdea8487a2b046ff4bd271d8853f5aa65642ad2298582dfed5882ec68da79ef3290","href":"https://static.observableusercontent.com/files/38f087789add95d37257c58f9e3a20216cd637cc7d02149da5129a240d66acdea8487a2b046ff4bd271d8853f5aa65642ad2298582dfed5882ec68da79ef3290","name":"clusters@1.jsonl","type":"application/octet-stream","lastModified":1619890331188.098,"size":1869813},{"id":"55871f25978a2d2388bdb37d68fa2e7f7924e1098f482afd38afd43733f37eef7e353a4ab9d3fd527d955e2c281151e6e6d832e66e9016bc73c1e087f77e9355","href":"https://static.observableusercontent.com/files/55871f25978a2d2388bdb37d68fa2e7f7924e1098f482afd38afd43733f37eef7e353a4ab9d3fd527d955e2c281151e6e6d832e66e9016bc73c1e087f77e9355","name":"labels.jsonl","type":"application/octet-stream","lastModified":1619890330034.285,"size":549},{"id":"270eb84ca4a7367450467f41291a26e0bc30b025d839d2f3aa848af7173ba1224d8415a7896924672895717eedb7f4289c36d14e6f7a70cead3118af125c6758","href":"https://static.observableusercontent.com/files/270eb84ca4a7367450467f41291a26e0bc30b025d839d2f3aa848af7173ba1224d8415a7896924672895717eedb7f4289c36d14e6f7a70cead3118af125c6758","name":"meta.csv","type":"text/csv","lastModified":1619889625923.219,"size":2617221},{"id":"9bff62be90d521c62ca927caaf130f72aed5f0fbc8baca427227f15467cdfeb4cf2cde9e2eaf9a2ee1d91c0bbf8fa1caedd40d5d4f21d78db89675e59fc0f899","href":"https://static.observableusercontent.com/files/9bff62be90d521c62ca927caaf130f72aed5f0fbc8baca427227f15467cdfeb4cf2cde9e2eaf9a2ee1d91c0bbf8fa1caedd40d5d4f21d78db89675e59fc0f899","name":"snapshots-3-30-0-6-33.json","type":"application/json","lastModified":1619889620805.996,"size":1898},{"id":"a7ba119f254ca0720731292027eff326c8e2993430496e3374314f89d1bf0136983ee8dc7b9ea4c3427e649e6e46602974014f3a4353ea1c272097f71a9834b9","href":"https://static.observableusercontent.com/files/a7ba119f254ca0720731292027eff326c8e2993430496e3374314f89d1bf0136983ee8dc7b9ea4c3427e649e6e46602974014f3a4353ea1c272097f71a9834b9","name":"labels@1.jsonl","type":"application/octet-stream","lastModified":1619986040597.305,"size":549},{"id":"8494058a50bd0ae594d1403db0bfd59bc9cd9fe24cb32b4a17bc3894f36068563f02b4052792b2899a911da8977ee12ac1340e4df95dc55319de1628a35ff727","href":"https://static.observableusercontent.com/files/8494058a50bd0ae594d1403db0bfd59bc9cd9fe24cb32b4a17bc3894f36068563f02b4052792b2899a911da8977ee12ac1340e4df95dc55319de1628a35ff727","name":"edges@2.jsonl","type":"application/octet-stream","lastModified":1619986022619.346,"size":3033220},{"id":"7b850d394387e471bb2ac1aeda7a5eab1c14b845fbbfc32da9e7d692bf564ec343c568e45ee0a3166cc0368d196970dcbf2725c81e4c1c82929bbc3e8f40024f","href":"https://static.observableusercontent.com/files/7b850d394387e471bb2ac1aeda7a5eab1c14b845fbbfc32da9e7d692bf564ec343c568e45ee0a3166cc0368d196970dcbf2725c81e4c1c82929bbc3e8f40024f","name":"snapshots-4-3-1-19-25.json","type":"application/json","lastModified":1620019200281.898,"size":4304}] 31:{"id":"bbb9188ddb59db84","slug":"d3-js-10-years-of-tweets","title":"D3.js - 10 Years of Tweets","thumbnail":"510b139129fc28b235b781ac13f5f26997bfc99778fa3445462d4db1223d1d85","access_level":"public","create_time":"$D2021-04-19T01:31:44.990Z","update_time":"$D2022-05-10T16:38:21.670Z","view_time":null,"first_public_time":"$D2021-05-03T06:12:28.746Z","has_unpublished_edits":null,"fork":false,"stars":33,"starred":false,"owner":{"type":"team","id":"0f6b70fec81b8bff","login":"darionco","name":"Dario Segura","avatar_url":"https://avatars-next.observableusercontent.com/42cee4888d2f126d576c18eda22ee434b1652abf9d65fdb713a42184d85bcb9b","tier":"starter_2024"},"version":844,"publish_version":844,"role":null,"authored":false,"authors":[{"type":"individual","id":"8982fc2fc2da73a9","login":"darionco","name":"Dario Segura","avatar_url":"https://avatars-next.observableusercontent.com/42cee4888d2f126d576c18eda22ee434b1652abf9d65fdb713a42184d85bcb9b","tier":null}],"members":[{"type":"individual","id":"0dd1f27f21c2bdc6","login":"adamocarolli","name":"Adamo Carolli","avatar_url":"https://avatars-next.observableusercontent.com/3e368d216ef37dccbc066b52eabcab46abe7c90f6c38c8819381ff5d28863f0d","tier":null,"role":"editor"},{"type":"individual","id":"8982fc2fc2da73a9","login":"darionco","name":"Dario Segura","avatar_url":"https://avatars-next.observableusercontent.com/42cee4888d2f126d576c18eda22ee434b1652abf9d65fdb713a42184d85bcb9b","tier":null,"role":"editor"},{"type":"individual","id":"c0d39fceba7df34a","login":"mj3cheun","name":"Manfred Cheung","avatar_url":"https://avatars.githubusercontent.com/u/14062458?v=4","tier":null,"role":"editor"}],"comments":[{"id":"f770b1ffeaed6236","reply_to_id":null,"content":"I just get a black rectangle. No errors in the console or network tab. Chrome/Berlin same thing in safari.","create_time":"$D2021-05-03T10:55:58.659Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"d29f2ea13e476b2f","reply_to_id":"f770b1ffeaed6236","content":"Seems like skypack is having issues loading D3 and other libraries, if I wait long enough I get a bunch of 525 errors from cloudfare. I'll switch the CDN to something else, thank you!","create_time":"$D2021-05-03T12:44:21.923Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8982fc2fc2da73a9","login":"darionco","name":"Dario Segura","avatar_url":"https://avatars-next.observableusercontent.com/42cee4888d2f126d576c18eda22ee434b1652abf9d65fdb713a42184d85bcb9b","tier":null}},{"id":"82b978b7b451990e","reply_to_id":"f770b1ffeaed6236","content":"I have updated the CDN to replace skypack, thank you!","create_time":"$D2021-05-03T23:57:45.468Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"8982fc2fc2da73a9","login":"darionco","name":"Dario Segura","avatar_url":"https://avatars-next.observableusercontent.com/42cee4888d2f126d576c18eda22ee434b1652abf9d65fdb713a42184d85bcb9b","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"D3.js - 10 Years of Tweets","cells":[{"id":539,"value":"intro = md `\n# D3.js - 10 Years of Tweets\n\nFor [\\`D3 Parade 2021\\`](https://d3js.community/d3-parade-2021) we wanted to celebrate the D3 Community and could not think of a better way to do so than by exploring how it came to be. \n\n*10 Years of Tweets* is about watching the **#d3js** community flourish from this library that a few dedicated folks used to win local viz competitions to this bustling community that is used to support thought-provoking works of data journalism and impactful applications solving global issues.\n\nGo **full screen** and take a guided tour of the community with us, from the very first Tweet onwards! Once you're ready, feel free to take the reigns and explore however you wish! ([See instructions](#viz_container))\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viz_container = {\n const height = screen.availHeight * 0.85; // Math.ceil(width * screen.height / screen.width);\n const el = DOM.element('div');\n el.style.width = '100%';\n el.style.height = `${height}px`;\n el.style.minWidth = `${width}px`;\n el.style.minHeight = '100%';\n el.style.backgroundColor = 'var(--grafer-background)';\n el.style.position = 'relative';\n el.onwheel = event => event.preventDefault();\n el.onmousewheel = event => event.preventDefault();\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"{ \n async function main() {\n const grafer = new GraferView(viz_container);\n \n if (document.fullscreenElement) {\n await loadGraferData(grafer, viz_container);\n } else {\n await loadGraferData(grafer, viz_container);\n if (!globalCache.welcomeSeen) {\n const welcome = createWelcome(viz_container, async () => {\n welcome.parentElement.removeChild(welcome);\n globalCache.welcomeSeen = true;\n });\n }\n }\n }\n\n main();\n yield(md `## Source Code`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`### Utility Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"function createLoading(container) {\n const el = document.createElement('div');\n el.className = 'data-loading';\n \n const spinner = document.createElement('div');\n spinner.className = 'lds-dual-ring';\n \n const label = document.createElement('div');\n label.className = 'data-loading data-loading-label';\n label.innerText = 'LOADING';\n \n el.appendChild(spinner);\n el.appendChild(label);\n container.appendChild(el);\n return el;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"function createWelcome(container, continueCB) {\n const el = html`\n

Welcome!

Ten years of Tweets is meant to be viewed in full screen. Click the expand icon ${fas`expand`} on the bottom right to begin exploring!

\n`\n const welcomeLinks = el.getElementsByClassName(\"welcome-link\");\n for (let link of welcomeLinks) {\n link.addEventListener('click', () => {\n container.parentElement.requestFullscreen();\n globalCache.welcomeSeen = true;\n });\n };\n \n container.appendChild(el);\n return el;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"function createFullScreenToggle(container) {\n const el = html`\n

\n ${document.fullscreenElement ? fas`compress` : fas`expand`}\n

`;\n\n el.addEventListener('click', () => {\n if (document.fullscreenElement) {\n document.exitFullscreen();\n } else {\n container.parentElement.requestFullscreen();\n globalCache.welcomeSeen = true;\n }\n });\n \n container.appendChild(el);\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md `### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"globalCache = {\n return {\n welcomeSeen: false,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"showEditMode = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"import {GraferView} from \"@darionco/grafer-view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {TwitterView} from \"@darionco/twitterview\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import {SnapshotsView} from \"@darionco/snapshotsview\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"import { style as faStyle, fas } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"faStyle({solid: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md `## Acknowledgements\nThe core team included:\n- Dario Segura - [\\`@darionco\\`](https://observablehq.com/@darionco)\n- Adamo Carolli - [\\`@adamocarolli\\`](https://observablehq.com/@adamocarolli)\n\nThe following people contributed to the project:\n- Manfred Cheung - Development\n- Daniel Chang - Development\n- Rosa Romero-Gómez - UI/UX\n- Fahd Husain - Machine Learning\n\nThe following people provided support:\n- David Giesbrecht\n- David Gauldie\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"