25:["$","title",null,{"children":"Building Reusable Chart Components with vue-graphics | Yong Jun | Observable"}] 49:T8b6,md` \`BarChart.vue\` \`\`\`html \`\`\` `4a:Td38,md` \`GroupedBarChart.vue\` \`\`\`html \`\`\` `4b:T745,md` \`WaterfallChart.vue\` \`\`\`html \`\`\` `4c:T1236,md` \`ChordDiagram.vue\` \`\`\`html \`\`\` `4d:T938,html` `4e:[] 29:{"id":"6748a8af9cec8510","slug":null,"title":"Building Reusable Chart Components with vue-graphics","thumbnail":"1d7791fef467d4a71afba4edaa0ac95d20bc280ba37f1906ea5e8a215d60c145","access_level":"public","create_time":"$D2024-02-15T04:40:11.352Z","update_time":"$D2024-02-15T04:40:11.352Z","view_time":null,"first_public_time":"$D2024-02-15T04:40:11.352Z","has_unpublished_edits":null,"fork":{"id":"ffb1304b4f882d5c","slug":"building-reusable-chart-components-with-vue-graphics","title":"Building Reusable Chart Components with vue-graphics","owner":{"id":"4de3cfdfb3feefbf","login":"yongjun21","name":"Yong Jun"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4de3cfdfb3feefbf","login":"yongjun21","name":"Yong Jun","avatar_url":"https://avatars-next.observableusercontent.com/29e37b97a3f84b77d4b00c5d8d429225434dbacee52ae60ecdc90796a5e7c146","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":468,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf43226d6d6d726","login":"yongjun21","name":"Yong Jun","avatar_url":"https://avatars-next.observableusercontent.com/29e37b97a3f84b77d4b00c5d8d429225434dbacee52ae60ecdc90796a5e7c146","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0bf43226d6d6d726","login":"yongjun21","name":"Yong Jun","avatar_url":"https://avatars-next.observableusercontent.com/29e37b97a3f84b77d4b00c5d8d429225434dbacee52ae60ecdc90796a5e7c146","tier":null,"role":"editor"},{"type":"team","id":"4de3cfdfb3feefbf","login":"yongjun21","name":"Yong Jun","avatar_url":"https://avatars-next.observableusercontent.com/29e37b97a3f84b77d4b00c5d8d429225434dbacee52ae60ecdc90796a5e7c146","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Building Reusable Chart Components with vue-graphics","cells":[{"id":0,"value":"md`# Building Reusable Chart Components with \\`vue-graphics\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## *Example 1*: Simple Bar Chart with Animated Annontations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"{\n let t = false\n yield render([10, 20, 50, 40])\n while (true) {\n t = !t\n const data = t ? [10, 20, 50, 40] : [20, 50, 40]\n yield Promises.delay(5000, render(data))\n vm1.data = data\n }\n \n function render (data) {\n return md`\\`data: [${data.join(', ')}]\\``\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"vm1.$el","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"vm1 = createVM(BarChart, {\n data: [10, 20, 50, 40],\n x: (d, i) => i,\n y: (d, i) => d\n}, {\n mouseover: (d, e) => { e.target.style.fill = '#888'},\n mouseout: (d, e) => { e.target.style.fill = null}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`## *Example 2:* Group Bar Chart with Axes, Gridlines, Animated Scales & Animated Transform`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"{\n let t = true\n yield render(t)\n while (true) {\n t = !t\n yield Promises.delay(5000, render(t))\n vm2.horizontal = t\n }\n \n function render (t) {\n return md`\\`horizontal: ${t}\\``\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"vm2.$el","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"data2 = d3.json('https://k57kq477w1.execute-api.ap-southeast-1.amazonaws.com/development?school=AI TONG SCHOOL&phase=2B&runs=0')\n .then(json => json.historical)\n .then(data => { \n const tallData = []\n data.forEach(row => {\n tallData.push({year: row.year, category: 'filled', count: row['filled']})\n tallData.push({year: row.year, category: 'vacancy', count: row['vacancies']})\n tallData.push({year: row.year, category: 'remaining', count: row['places'] - row['filled'] - row['vacancies']})\n })\n return tallData\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"vm2 = createVM(GroupedBarChart, {\n data: data2,\n x: 'year',\n y: 'count',\n g: 'category',\n c: 'category',\n horizontal: true,\n padding: 0.4\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`## *Example 3:* Waterfall Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"{\n const $chart = vm3.$children[0]\n const groups = $chart.domain.g\n yield null\n while (true) {\n let i = Math.floor(Math.random() * groups.length)\n yield Promises.delay(3000, groups[i])\n $chart.select({label: groups[i]})\n yield Promises.delay(2000, null)\n $chart.deselect({label: groups[i]})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"vm3.$el","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"data3 = d3.json('https://s3-ap-southeast-1.amazonaws.com/vue-graphics/data/waterfall.json')\n .then(json => json['2017'])\n .then(data => {\n const groups = ['1', '2A', '2B', '2C', '2CS']\n const tallData = []\n data.forEach(d => {\n if (Object.keys(d).length <= 1) return\n let y = 0\n tallData.push({x: '0', y, g: d.id})\n groups.forEach(x => {\n y += d[x]\n tallData.push({x, y, g: d.id})\n })\n })\n return tallData\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"vm3 = createVM(WaterfallChart, {data: data3}, null, {height: 800, padding: '5%'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`## *Example 4:* ChordDiagram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`### Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"{\n yield 'Singapore'\n while (true) {\n const i = Math.floor(Math.random() * data4.length)\n yield Promises.delay(70000, data4[i].country)\n vm4.$children[0].selected = data4[i].code\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"vm4.$el","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"data4 = d3.csv('https://s3-ap-southeast-1.amazonaws.com/vue-graphics/data/visa.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"vm4 = createVM(ChordDiagram, {\n data: data4,\n k: 'code',\n a: 'country',\n g: 'region',\n gDomain: ['Asia', 'Europe', 'Americas', 'Africa', 'Oceania']\n}, null, {height: 800, padding: '5%'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Vue = require(\"https://cdn.jsdelivr.net/npm/vue@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"d3 = import('d3-fetch')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"BarChart = (await import('vue-graphics@0.2.21/dist/BarChart.mjs')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"GroupedBarChart = (await import('vue-graphics@0.2.21/dist/GroupedBarChart.mjs')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"WaterfallChart = (await import('vue-graphics@0.2.21/dist/WaterfallChart.mjs')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"ChordDiagram = (await import('vue-graphics@0.2.21/dist/ChordDiagram.mjs')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"SvgWithPadding = (await import('vue-graphics@0.2.21/hocs/SvgWithPadding')).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`## createVM Helper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function createVM (Component, props, listeners, svgProps) {\n return new Vue({\n el: html``,\n data: props,\n render (h) {\n return h(SvgWithPadding, {\n props: svgProps,\n scopedSlots: {\n default: contentBox => h(Component, {\n attrs: Object.assign(contentBox, this.$data),\n on: listeners\n })\n }\n })\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null