42:null 43:["$","title",null,{"children":"Fire & Population Graph of Australia Cities | Yanyan Wang | Observable"}] 49:Ta21,fireVis = { // create a container for the graph const container = html`

` const graphDiv = html`

`; container.appendChild(graphDiv); let timeDiv = html`

11th January, 2020

`; container.appendChild(timeDiv); const globalVals = getGlobalVals(); registerItem(timeDiv, globalVals); const graph = new G6.TreeGraph({ container: graphDiv, width: 1000, height: 800, fitView: true, fitViewPadding: 30, linkCenter: true, // default global node styles defaultNode: { size: 30, style: { lineWidth: 0, fill: '#3A5A3C' }, labelCfg: { position: 'center', style: { fill: '#fff', fontSize: 10 } } }, // default global edge styles defaultEdge: { color: '#FEAB58', style: { lineWidth: 0.3, shadowBlur: 100, shadowColor: '#FF4654' } }, // node styles in different states nodeStateStyles: { hover: { stroke: '#fff', lineWidth: 1 } }, // some interaction behaviors modes: { default: [ 'drag-canvas', { type: 'tooltip', formatText(model) { const populationDes = 'Population'; const name = `${model.xlabel}
${populationDes}: ${model.population}`; setTooltipStyle(); return name; } } ] }, // the tree layout for the graph layout: { type: 'dendrogram', direction: 'LR', radial: true, nodeSep: 10, rankSep: 100 } }); // listen the interactions to activate/inactivate the hover state for nodes graph.on('node:mouseenter', e => { graph.setItemState(e.item, 'hover', true); }); graph.on('node:mouseleave', () => { graph.getNodes().forEach(node => { graph.setItemState(node, 'hover', false); }); }); // fetch data return fetch('https://gw.alipayobjects.com/os/basement_prod/d676014a-0a11-4ea9-9af4-4038bae3c0a1.json') .then(res => res.json()) .then(data => { // process data const processedData = processData(data, globalVals); // read data graph.data(processedData); graph.render(); // generate a legend graph getLegend(container); return container; }); }4a:T798,processData = (data, globalVals) => { G6.Util.traverseTree(data, item => { if (globalVals.minPop > item.population) globalVals.minPop = item.population; if (globalVals.maxPop < item.population) globalVals.maxPop = item.population; if (item.data && item.data.fireBrightnesses) { item.data.fireBrightnesses.forEach(b => { if (globalVals.minBrightness > b && b) globalVals.minBrightness = b; if (globalVals.maxBrightness < b) globalVals.maxBrightness = b; }); } item.xlabel = item.label; let label = item.isLeaf ? '' : item.label; switch (label) { case 'Australian Capital Territory': label = 'Australian\nCapital Territory'; break; case 'South Australia': label = 'South\nAustralia'; break; case 'New South Wales': label = 'New South\nWales'; break; case 'Northern Territory': label = 'Northern\nTerritory'; break; default: break; } item.label = label; }); const sizeScale = globalVals.leafSizeRange[1] - globalVals.leafSizeRange[0]; G6.Util.traverseTree(data, item => { if (!item.isLeaf) { if (globalVals.imgs[item.id]) { item.img = globalVals.imgs[item.id].src; item.type = 'image'; item.size = [ globalVals.imgs[item.id].width * globalVals.mapImgScale, globalVals.imgs[item.id].height * globalVals.mapImgScale ]; } else { item.size = 10; } item.style = { shadowColor: '#FF4654', shadowBlur: 200 }; } else { item.type = 'circle-bar'; item.size = (item.population - globalVals.minPop) / (globalVals.maxPop - globalVals.minPop) * sizeScale + globalVals.leafSizeRange[0]; } if (item.id === 'country-australia') { item.size = [ 559 * globalVals.mapImgScale, 464 * globalVals.mapImgScale ]; item.style.shadowBlur = 200; } }); return data; } 4b:T612,getLegendData = (legendX, legendBeginY, legendYPadding) => { return { nodes: [{ id: 'level1', x: legendX, y: legendBeginY, label: '受灾情况严重', label_en: 'Severely Affected', style: { fill: '#FD5854', lineWidth: 0 } }, { id: 'level2', x: legendX, y: legendBeginY + legendYPadding, label_en: 'Affected', label: '受灾情况一般', style: { fill: '#FDA25A', lineWidth: 0 } }, { id: 'level3', label: '受灾情况较轻', label_en: 'Lightly Affected', x: legendX, y: legendBeginY + legendYPadding * 2, style: { fill: '#FFD574', lineWidth: 0 } }, { id: 'level4', label: '火灾未涉及', label_en: 'Not Affected', x: legendX, y: legendBeginY + legendYPadding * 3, style: { fill: '#3A5A3C', lineWidth: 0 } }, { id: 'legendSize', label: '圆面积代表城市人口总数', label_en: 'Node Size - Population', x: legendX, y: legendBeginY + legendYPadding * 4, size: 15, style: { fill: '#3A5A3C', lineWidth: 0 } }, { id: 'legendBar', label: '受灾点数量', label_en: 'Bar Height - # Fire Points', x: legendX, y: legendBeginY + legendYPadding * 5 + 10, shape: 'rect', size: [ 2, 30 ], style: { fill: '#3A5A3C', lineWidth: 0 } } ] }; }4c:Tb41,registerItem = (timeDiv, globalVals) => { G6.registerNode('circle-bar', { drawShape(cfg, group) { const dist2Ori = Math.sqrt(cfg.x * cfg.x + cfg.y * cfg.y); const vecToOrin = [ cfg.x / dist2Ori, cfg.y / dist2Ori ]; const startPoint = [ vecToOrin[0] * cfg.size / 2, vecToOrin[1] * cfg.size / 2 ]; const scale = Math.sqrt(cfg.data.firePointNums[0]); const path = [ [ 'M', startPoint[0], startPoint[1] ], [ 'L', vecToOrin[0] * scale + startPoint[0], vecToOrin[1] * scale + startPoint[1] ] ]; let fillColor = globalVals.colors[3]; if (cfg.data.fireBrightnesses[0]) { const normalizedBrightness = (cfg.data.fireBrightnesses[0] - globalVals.minBrightness) / (globalVals.maxBrightness - globalVals.minBrightness); // [0, 1]; const colorIdx = Math.floor(normalizedBrightness * 2); fillColor = globalVals.colors[colorIdx]; } let count = 0; const keyShape = group.addShape('circle', { attrs: { x: 0, y: 0, r: cfg.size / 2, fill: fillColor, shadowColor: fillColor, shadowBlur: 20 } }); const bar = group.addShape('path', { attrs: { path, lineWidth: 2, fill: fillColor, stroke: fillColor, shadowColor: fillColor, shadowBlur: 20 } }); setInterval(() => { // if (count >= 7) return; bar.stopAnimate(); count++; if (cfg.id === 'city-Sydney') { timeDiv.innerHTML = `${(count % 8 + 11)}th January, 2020`; } const firePointNum = cfg.data.firePointNums[count % 8] || 0; const targetScale = Math.sqrt(firePointNum); const targetPath = [ [ 'M', startPoint[0], startPoint[1] ], [ 'L', vecToOrin[0] * targetScale + startPoint[0], vecToOrin[1] * targetScale + startPoint[1] ] ]; fillColor = globalVals.colors[3]; if (cfg.data.fireBrightnesses[count % 8]) { const normalizedBrightness = (cfg.data.fireBrightnesses[count % 8] - globalVals.minBrightness) / (globalVals.maxBrightness - globalVals.minBrightness); // [0, 1]; const colorIdx = Math.floor(normalizedBrightness * 2); fillColor = globalVals.colors[ colorIdx ]; } bar.animate( { path: targetPath, stroke: fillColor, fill: fillColor, shadowColor: fillColor }, { duration: 300, repeat: false } ); keyShape.stopAnimate(); keyShape.animate( { fill: fillColor, shadowColor: fillColor }, { duration: 300, repeat: false } ); }, 1300); return keyShape; } }, 'circle'); }4d:T6ce,getGlobalVals = () => { return { mapImgScale: 0.2, minPop: Infinity, maxPop: -Infinity, minBrightness: Infinity, maxBrightness: -Infinity, leafSizeRange: [ 10, 100 ], colors: [ '#FD5854', '#FDA25A', '#FFD574', '#3A5A3C' ], imgs: { 'state-New South Wales': { src: 'https://gw.alipayobjects.com/zos/basement_prod/828aec79-8123-4ca7-baa8-1422a964003a.svg', width: 183, height: 146 }, 'state-Victoria': { src: 'https://gw.alipayobjects.com/zos/basement_prod/463d3b0c-b03f-40b3-b6e9-6309b5d637cf.svg', width: 116, height: 88 }, 'state-Queensland': { src: 'https://gw.alipayobjects.com/zos/basement_prod/617bc829-50e5-4537-978e-81bf424cb8fd.svg', width: 215, height: 311 }, 'state-Western Australia': { src: 'https://gw.alipayobjects.com/zos/basement_prod/c8b4cbb0-57fd-4c18-bbd1-4993b52e5048.svg', width: 221, height: 357 }, 'state-South Australia': { src: 'https://gw.alipayobjects.com/zos/basement_prod/6582ef8e-e5ce-4815-9183-b6a70caeb1db.svg', width: 169, height: 198 }, 'state-Tasmania': { src: 'https://gw.alipayobjects.com/zos/basement_prod/056fb079-58c1-4697-bb66-15f08512cfb8.svg', width: 50, height: 45 }, 'state-Northern Territory': { src: 'https://gw.alipayobjects.com/zos/basement_prod/a616ae60-ebe6-4e61-b085-1a207237e193.svg', width: 140, height: 243 }, 'country-australia': { src: 'https://gw.alipayobjects.com/zos/basement_prod/85c5e2e2-c015-495a-8710-3c881c49a3ed.svg', width: 559, height: 464 } } } }4e:T486,md `## More Intro The root node represents Australia. The nodes on the second level are the states of Australia. The leaves of the graph represent the main cities of Australia. The sizes of the leaves indicate the population of the corresponding cities. The bars on the leaves show the number of the fire points in the corresponding city everyday, which is detected by the satellites. The color of a leaf is mapped to the degree of the fire effectiveness in the region, which is the average brightness of the fire points in the region detected by the satellites. Hover the leaf node, a tooltip with the name and population of the city will show up. This graph shows the disaster from 11th to 18th, January, 2020.The data comes from NASA and detected by satellites. The cities with large amount of population like Sydney, Melbourne, and Perth, are also affected by the disaster; From the heights of the bars, we find the number of fire points kept large in Lismore. In Adelaide, South Australia, the number of fire points arose from 11th to 13th, and alleviated from then on. From the colors in overview from 11th to 18th, the situation is getting better. `4f:[] 47:{"id":"93f1ea8a5987b30e","slug":"fire-population-graph-of-australia-cities","title":"Fire & Population Graph of Australia Cities","thumbnail":"cd8662c11bc21eba1d7540c62c9bde6533ccf4bea8394769f2692f50848c1540","access_level":"public","create_time":"$D2020-03-11T03:37:06.515Z","update_time":"$D2020-03-11T12:37:47.012Z","view_time":null,"first_public_time":"$D2020-03-11T05:39:49.352Z","has_unpublished_edits":null,"fork":false,"stars":29,"starred":false,"owner":{"type":"team","id":"0a0e2e83c0072bba","login":"yanyan-wang","name":"Yanyan Wang","avatar_url":"https://avatars-next.observableusercontent.com/89ab84d56b638c81a877a951a36f85d18e37de37054b73fb90d4c71206606d2d","tier":"starter_2024","bio":"Graduate student, interested in data visualization.","following":false},"version":176,"publish_version":176,"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,"bio":"Graduate student, interested in data visualization.","following":false}],"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":10,"collection":{"id":"b4ee13bf2ff746fa","slug":"g6-case","title":"G6-Case","owner":{"id":"0a0e2e83c0072bba","login":"yanyan-wang","name":"Yanyan Wang"}},"type":"notebook","body":{"titling":"auto","title":"Fire & Population Graph of Australia Cities","cells":[{"id":0,"value":"md`# Fire & Population Graph of Australia Cities\nIn this demo, we visualize the graph about the Australia fire and the population of the states.\n\n**TIPS:**\n\nYou can hover the nodes to see the details.\n\n**Open Source Library**\n\nThe 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. \n\nWelcome to **star** our GitHub: https://github.com/antvis/G6\n\nOur website: https://g6.antv.vision/en/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md `## Required the G6 Package`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"G6 = require('@antv/g6');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md `## Begin to Create`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md `## Process Data\nNow, we process the original tree data with some attributes we need for the graph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md `## Legend Graph\nHere we create a graph for legends.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"getLegend = (container) => {\n const legendContainer = html`

`;\n const legendGraphDiv = document.createElement('div');\n legendGraphDiv.id = 'legend';\n legendContainer.appendChild(legendGraphDiv);\n container.appendChild(legendContainer);\n const legendGraph = new G6.Graph({\n container: legendGraphDiv,\n width: 200,\n height: 200,\n defaultNode: {\n size: 10,\n shape: 'circle',\n labelCfg: {\n position: 'right',\n offset: 10,\n style: {\n fill: '#fff'\n }\n }\n }\n });\n const legendX = 20;\n const legendBeginY = 50;\n const legendYPadding = 25;\n const legendData = getLegendData(legendX, legendBeginY, legendYPadding);\n \n legendData.nodes.forEach(node => {\n node.label = node.label_en;\n });\n legendGraph.data(legendData);\n legendGraph.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md `**Get Legend Data**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md `## Custom Node Type\nG6 has plenty of built-in commonly used nodes/edges. But in the graph above, you can see the some nodes with bars. They are not built-in G6, so we need to register these node types.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md `## Set Tooltip Style\nTooltip in G6 is actually a DOM element, you can assign any style for it with CSS.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"setTooltipStyle = () => {\n const tooltipDiv = document.getElementsByClassName('g6-tooltip')[0];\n if (!tooltipDiv) return;\n tooltipDiv.style.borderRadius = '6px';\n tooltipDiv.style.fontSize = '12px';\n tooltipDiv.style.color = '#fff';\n tooltipDiv.style.backgroundColor = '#000';\n tooltipDiv.style.padding = '2px 8px';\n tooltipDiv.style.textAlign = 'center';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md `## Tool Functions\n**The Global Variables**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 48:"$47:body"