29:null 2a:["$","title",null,{"children":"What do People Like to Say at Christmas Day | Yanyan Wang | Observable"}] 2f:T486,md `# What do People Like to Say at Christmas Day In this demo, we are going to visualize the top 100 words and there related words that are most frequently said by people at last Christmas day. The words comes from the tweets on Twitter. **TIPS:** You can drag and click the nodes to explore and play the graph. **Open Source Library** The demo is powered by [G6](https://github.com/antvis/G6), which is an open source engine for graph visualization and analysis, which focuses on relational data. Welcome to **star** our GitHub: https://github.com/antvis/G6 Our website: https://g6.antv.vision/en/ #### 'Easter Eggs' It is might not a real Easter Eggs since it looks like a homework… After implementing the graph visualization, we found a small 「not big, I think:)」bug: There are lots of context nodes for 'christmas'. It begins to swing violently as the layout was about to converge after being expanded. 「We are too wayward to fix it :).」 Does anyone have time to do a [PR](https://github.com/antvis/G6/pulls)? Tips: It probably relates to the force balance of the force-directed layout algorithm and the difficulty of convergence? ` 30:T8cd,christmasWords = { // create a container for the graph let container = html`

{ return d.size / 2 + 5; }, nodeStrength: 2500, collideStrength: 0.8, alphaDecay: 0.01, preventOverlap: true, onTick: () => { const nodeItems = graph.getNodes(); const height = graph.get('height'); const width = graph.get('width'); const padding = 10; nodeItems.forEach(item => { const model = item.getModel(); if (model.x > width - padding) model.x = width - padding; else if (model.x < padding) model.x = padding; if (model.y > height - padding) model.y = height - padding; else if (model.y < padding) model.y = padding; }); }, }; // Instantiate the graph graph = new G6.Graph({ // the container for the graph container, // the graph size width: 1000, height: 800, linkCenter: true, // the layout configuration layout: layoutCfg, // the interactions modes: { default: ['drag-canvas'], }, // the default global node styles defaultNode: { shape: 'bubble', size: 30, labelCfg: { position: 'center', style: { fill: 'white', fontStyle: 'bold', }, }, }, // the default global edge styles defaultEdge: { color: '#888', shape: 'animate-line', }, }); return fetch('https://gw.alipayobjects.com/os/basement_prod/0a749386-8593-44a2-a132-81dfa1fc3158.json') .then(res => res.json()) .then(data => { const res = loadData(graph, data, globalVals); graph.data(res); graph.render(); bindListeners(graph, globalVals); return container; }); } 31:T693,loadData = (graph, data, globalVals) => { const layoutController = graph.get('layoutController'); layoutController.layoutCfg.nodeStrength = 30; layoutController.layoutCfg.collideStrength = 0.8; layoutController.layoutCfg.alphaDecay = 0.01; globalVals.nodes = data.nodes; globalVals.edges = data.edges; globalVals.showNodes = []; globalVals.showEdges = []; globalVals.nodeMap = new Map(); globalVals.edgesMap = new Map(); // find the roots globalVals.nodes.forEach(node => { node.ntype = node.type; delete node.type; if (!node.neighbor) { node.label = node.text; node.color = globalVals.Colors[node.ntype]; node.style = { fill: globalVals.Colors[node.ntype], lineWidth: 0, }; let labelColor = '#fff'; if (node.ntype === 'adj') { labelColor = globalVals.Colors.noun; } node.labelCfg = { style: { fontSize: 15, fill: labelColor, fontWeight: 300, }, }; node.x = Math.random() * 800; node.y = Math.random() * 800; globalVals.showNodes.push(node); } globalVals.nodeMap.set(node.id, node); }); mapNodeSizeAndFontSize(globalVals.showNodes, 'count', [40, 120]); globalVals.showNodes.forEach(snode => { if (snode.size < 80) { snode.shape = 'circle'; } }); globalVals.edges.forEach(edge => { // map the id edge.id = `${edge.source}-${edge.target}`; edge.style = { lineWidth: 0.5, opacity: 1, strokeOpacity: 1, }; globalVals.edgesMap.set(edge.id, edge); }); return { nodes: globalVals.showNodes, edges: globalVals.showEdges, }; };32:T19e1,bindListeners= (graph, globalVals) => { // Drag Start graph.on('node:dragstart', e => { graph.layout(); refreshDragedNodePosition(e); }); // Drag graph.on('node:drag', e => { refreshDragedNodePosition(e); }); // Drag End graph.on('node:dragend', e => { e.item.get('model').fx = null; e.item.get('model').fy = null; }); // click node to expand graph.on('node:click', e => { globalVals.curShowNodes = []; globalVals.curShowEdges = []; const item = e.item; const model = item.getModel(); if (model.neighbor) { return; } // if clicked a root, hide unrelated items and show the related items if (!model.neighbor) { const width = graph.get('width'); const height = graph.get('height'); const layoutController = graph.get('layoutController'); const forceLayout = layoutController.layoutMethod; forceLayout.forceSimulation.stop(); // light the level 0 nodes globalVals.showNodes.forEach(snode => { if (snode.x < 0.5 * width) { snode.x = 300; } else { snode.x = width - 300; } }); model.x = width / 2; model.y = height / 2; // animatively hide the items which are going to disappear if (globalVals.curShowEdges.length) { globalVals.curShowEdges.forEach(csedge => { const item = graph.findById(csedge.id); item && graph.setItemState(item, 'disappearing', true); }); } globalVals.curShowNodes.forEach(csnode => { const item = graph.findById(csnode.id); item && graph.setItemState(item, 'disappearing', true); }); graph.positionsAnimate(); // click on the same node which is the current focus node, hide the small nodes, change the layout parameters to roots view if (globalVals.currentFocus && globalVals.currentFocus.id === model.id) { globalVals.currentFocus = undefined; layoutController.layoutCfg.nodeStrength = 100; layoutController.layoutCfg.collideStrength = 0.8; layoutController.layoutCfg.alphaDecay = 0.01; } else { // click other focus node, hide the current small nodes and show the related nodes globalVals.currentFocus = model; // change data after the original items disappearing const layoutController = graph.get('layoutController'); layoutController.layoutCfg.nodeStrength = () => { return -80; }; layoutController.layoutCfg.collideStrength = 0.2; layoutController.layoutCfg.linkDistance = d => { if (!d.source.neighbor && !d.target.neighbor) return 150; return 80; }; layoutController.layoutCfg.edgeStrength = () => { return 2; }; globalVals.curShowNodesMap = new Map(); // find the nodes which are the descendants of clicked model globalVals.edges.forEach(edge => { let nodeId = ''; let node; if (edge.source === model.id) { nodeId = edge.target; } else if (edge.target === model.id) { nodeId = edge.source; } else { return; } globalVals.nodes.forEach(tnode => { if (tnode.id === nodeId) { node = tnode; } }); if (!node) return; const randomAngle = Math.random() * 2 * Math.PI; node.x = model.x + (Math.cos(randomAngle) * model.size) / 2 + 10; node.y = model.y + (Math.sin(randomAngle) * model.size) / 2 + 10; // const dist = (model.x - node.x) * (model.x - node.x) + (model.y - node.y) * (model.y - node.y); if (!node.style) node.style = {}; node.style.lineWidth = 0; node.style.opacity = 1; if (node.neighbor) { node.shape = 'animate-circle'; node.label = node.text; const color = model.style.fill; node.color = color; node.style.fill = '#fff'; node.style.lineWidth = 1; node.size = 30; node.labelCfg = { style: { fontSize: 13, lineHeight: 19, fill: '#697B8C', }, position: 'center', }; } globalVals.curShowNodes.push(node); globalVals.curShowNodesMap.set(node.id, node); // add the edge connect from model to node which exists in edges const edgeId = `${model.id}-${node.id}`; const medge = globalVals.edgesMap.get(edgeId); if (medge) { medge.color = model.color; globalVals.curShowEdges.push(medge); } }); globalVals.edges.forEach(edge => { if (edge.source === model.id || edge.target === model.id) { globalVals.curShowEdges.push(edge); } }); } setTimeout(() => { graph.changeData({ nodes: globalVals.showNodes.concat(globalVals.curShowNodes), edges: globalVals.showEdges.concat(globalVals.curShowEdges), }); const nodeItems = graph.getNodes(); const edgeItems = graph.getEdges(); edgeItems.forEach(item => { graph.clearItemStates(item); }); nodeItems.forEach(item => { graph.clearItemStates(item); graph.setItemState(item, 'appearing', true); }); }, 400); } }); // click canvas graph.on('canvas:click', () => { globalVals.currentFocus = undefined; const forceLayout = graph.get('layoutController').layoutMethod; forceLayout.forceSimulation.stop(); const nodeItems = graph.getNodes(); const edgeItems = graph.getEdges(); if (globalVals.highlighting) { globalVals.highlighting = false; } else { nodeItems.forEach(item => { const model = item.getModel(); if (model.neighbor) { graph.setItemState(item, 'disappearing', true); } }); edgeItems.forEach(item => { graph.setItemState(item, 'disappearing', true); }); globalVals.curShowNodes = []; globalVals.curShowEdges = []; setTimeout(() => { const layoutController = graph.get('layoutController'); layoutController.layoutCfg.nodeStrength = 100; layoutController.layoutCfg.collideStrength = 0.8; layoutController.layoutCfg.alphaDecay = 0.01; graph.changeData({ nodes: globalVals.showNodes, edges: globalVals.showEdges, }); }, 400); } }); }33:T11e2,G6.registerNode( 'bubble', { drawShape(cfg, group) { const self = this; const r = cfg.size / 2; // a circle by path const path = [ ['M', -r, 0], ['C', -r, r / 2, -r / 2, r, 0, r], ['C', r / 2, r, r, r / 2, r, 0], ['C', r, -r / 2, r / 2, -r, 0, -r], ['C', -r / 2, -r, -r, -r / 2, -r, 0], ['Z'], ]; const keyShape = group.addShape('path', { attrs: { x: 0, y: 0, path, fill: cfg.color || 'steelblue', }, // must be assigned in G6 3.3 and later versions. it can be any value you want name: 'path-shape' }); const mask = group.addShape('path', { attrs: { x: 0, y: 0, path, opacity: 0.25, fill: cfg.color || 'steelblue', shadowColor: cfg.color, // cfg.color.split(' ')[2].substr(2), shadowBlur: 40, shadowOffsetX: 0, shadowOffsetY: 30, }, // must be assigned in G6 3.3 and later versions. it can be any value you want name: 'mask-shape' }); const spNum = 10; // split points number const directions = [], rs = []; self.changeDirections(spNum, directions); for (let i = 0; i < spNum; i++) { const rr = r + directions[i] * ((Math.random() * r) / 1000); // +-r/6, the sign according to the directions if (rs[i] < 0.97 * r) rs[i] = 0.97 * r; else if (rs[i] > 1.03 * r) rs[i] = 1.03 * r; rs.push(rr); } keyShape.animate( () => { const path = self.getBubblePath(r, spNum, directions, rs); return { path }; }, { repeat: true, duration: 1000, }, ); const directions2 = [], rs2 = []; self.changeDirections(spNum, directions2); for (let i = 0; i < spNum; i++) { const rr = r + directions2[i] * ((Math.random() * r) / 1000); // +-r/6, the sign according to the directions if (rs2[i] < 0.97 * r) rs2[i] = 0.97 * r; else if (rs2[i] > 1.03 * r) rs2[i] = 1.03 * r; rs2.push(rr); } mask.animate( () => { const path = self.getBubblePath(r, spNum, directions2, rs2); return { path }; }, { repeat: true, duration: 1000, }, ); return keyShape; }, afterDraw(cfg, group) { group.get('children').forEach(child => { child.set('draggable', true); }); }, changeDirections(num, directions) { for (let i = 0; i < num; i++) { if (!directions[i]) { const rand = Math.random(); const dire = rand > 0.5 ? 1 : -1; directions.push(dire); } else { directions[i] = -1 * directions[i]; } } return directions; }, getBubblePath(r, spNum, directions, rs) { const path = []; const cpNum = spNum * 2; // control points number const unitAngle = (Math.PI * 2) / spNum; // base angle for split points let angleSum = 0; const sps = []; const cps = []; for (let i = 0; i < spNum; i++) { const speed = 0.001 * Math.random(); rs[i] = rs[i] + directions[i] * speed * r; // +-r/6, the sign according to the directions if (rs[i] < 0.97 * r) { rs[i] = 0.97 * r; directions[i] = -1 * directions[i]; } else if (rs[i] > 1.03 * r) { rs[i] = 1.03 * r; directions[i] = -1 * directions[i]; } const spX = rs[i] * Math.cos(angleSum); const spY = rs[i] * Math.sin(angleSum); sps.push({ x: spX, y: spY }); for (let j = 0; j < 2; j++) { const cpAngleRand = unitAngle / 3; const cpR = rs[i] / Math.cos(cpAngleRand); const sign = j === 0 ? -1 : 1; const x = cpR * Math.cos(angleSum + sign * cpAngleRand); const y = cpR * Math.sin(angleSum + sign * cpAngleRand); cps.push({ x, y }); } angleSum += unitAngle; } path.push(['M', sps[0].x, sps[0].y]); for (let i = 1; i < spNum; i++) { path.push([ 'C', cps[2 * i - 1].x, cps[2 * i - 1].y, cps[2 * i].x, cps[2 * i].y, sps[i].x, sps[i].y, ]); } path.push(['C', cps[cpNum - 1].x, cps[cpNum - 1].y, cps[0].x, cps[0].y, sps[0].x, sps[0].y]); path.push(['Z']); return path; }, }, 'single-node', );34:T4c3,G6.registerNode( 'animate-circle', { setState(name, value, item) { const shape = item.get('keyShape'); const label = shape.get('parent').get('children')[1]; if (name === 'disappearing' && value) { shape.animate( ratio => { return { opacity: 1 - ratio, r: shape.attr('r') * (1 - ratio), }; }, { duration: 200, }, ); label.animate( ratio => { return { opacity: 1 - ratio, }; }, { duration: 500, }, ); } else if (name === 'appearing' && value) { const r = item.getModel().size / 2; shape.animate( ratio => { return { opacity: ratio, r: r * ratio, fill: shape.attr('fill'), }; }, { duration: 300, }, ); label.animate( ratio => { return { opacity: ratio, }; }, { duration: 500, }, ); } }, }, 'circle', );35:T502,G6.registerEdge( 'animate-line', { drawShape(cfg, group) { const self = this; let shapeStyle = self.getShapeStyle(cfg); shapeStyle = G6.Util.mix(shapeStyle, { opacity: 0, strokeOpacity: 0, }); const keyShape = group.addShape('path', { attrs: shapeStyle, // must be assigned in G6 3.3 and later versions. it can be any value you want name: 'path-shape', }); return keyShape; }, afterDraw(cfg, group) { const shape = group.get('children')[0]; shape.animate( ratio => { const opacity = ratio * cfg.style.opacity; const strokeOpacity = ratio * cfg.style.strokeOpacity; return { opacity: ratio || opacity, strokeOpacity: ratio || strokeOpacity, }; }, { duration: 300, }, ); }, setState(name, value, item) { const shape = item.get('keyShape'); if (name === 'disappearing' && value) { shape.animate( ratio => { return { opacity: 1 - ratio, strokeOpacity: 1 - ratio, }; }, { duration: 200, }, ); } }, }, 'line', );36:[] 2d:{"id":"e7102e5ed4ae46a0","slug":"what-do-people-like-to-say-at-christmas-day","title":"What do People Like to Say at Christmas Day","thumbnail":"6309cbe57421ac8ebfb0fa80c4bbd209d851c5dc6f326792ee994e1918dc9de5","access_level":"public","create_time":"$D2020-03-10T12:03:00.855Z","update_time":"$D2020-03-11T12:38:04.745Z","view_time":null,"first_public_time":"$D2020-03-11T03:34:46.735Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"0a0e2e83c0072bba","login":"yanyan-wang","name":"Yanyan Wang","avatar_url":"https://avatars-next.observableusercontent.com/89ab84d56b638c81a877a951a36f85d18e37de37054b73fb90d4c71206606d2d","tier":"starter_2024"},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"e379a4a20ef93d20","login":"yanyan-wang","name":"Yanyan Wang","avatar_url":"https://avatars-next.observableusercontent.com/89ab84d56b638c81a877a951a36f85d18e37de37054b73fb90d4c71206606d2d","tier":null}],"members":[{"type":"individual","id":"e379a4a20ef93d20","login":"yanyan-wang","name":"Yanyan Wang","avatar_url":"https://avatars-next.observableusercontent.com/89ab84d56b638c81a877a951a36f85d18e37de37054b73fb90d4c71206606d2d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b4ee13bf2ff746fa","slug":"g6-case","title":"G6-Case","owner":{"id":"0a0e2e83c0072bba","login":"yanyan-wang","name":"Yanyan Wang"}},"type":"notebook","body":{"title":"What do People Like to Say at Christmas Day","cells":[{"id":133,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md `## Required the G6 Package`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"G6 = require('@antv/g6');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md `## Have Fun on Coding`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md `## Process Data\nNow, we process the data for the graph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md `## Graph Listeners \nHere we define some listeners on graph to response the interactions from users.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md `## Tool Functions\nHere are some tool functions for the demo above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md `**Mapthe Node Size and Fontsize**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"mapNodeSizeAndFontSize = (nodes, propertyName, visualRange) => {\n let minp = 9999999999;\n let maxp = -9999999999;\n nodes.forEach(node => {\n const propertyValue = node[propertyName] > 5000 ? 5000 : node[propertyName];\n minp = propertyValue < minp ? propertyValue : minp;\n maxp = propertyValue > maxp ? propertyValue : maxp;\n });\n const rangepLength = maxp - minp;\n const rangevLength = visualRange[1] - visualRange[0];\n nodes.forEach(node => {\n const propertyValue = node[propertyName] > 5000 ? 5000 : node[propertyName];\n node.size = ((propertyValue - minp) / rangepLength) * rangevLength + visualRange[0];\n if (node.labelCfg && node.labelCfg.style) {\n const textLength = node.label.length;\n let fontSize = (1.3 * node.size) / textLength;\n if (fontSize < 11) fontSize = 11;\n node.labelCfg.style.fontSize = fontSize;\n }\n });\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md `**Refresh Dragged Node Position**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"refreshDragedNodePosition = (e) => {\n const model = e.item.get('model');\n model.fx = e.x;\n model.fy = e.y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md `## Custom Node Type\nG6 has plenty of built-in commonly used nodes/edges. You can see the nodes in the graph are bubbles and some common circles with fade-in/fade-out animation. They are not built-in G6, so we need to register these node types.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md `**Register the Bubble Node Type**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md `**Register the Animate Circle Node Type**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md `**Reigster Edge Type**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"