Public
Edited
Feb 15, 2024
1 fork
1 star
vm1 = createVM(BarChart, {
data: [10, 20, 50, 40],
x: (d, i) => i,
y: (d, i) => d
}, {
mouseover: (d, e) => { e.target.style.fill = '#888'},
mouseout: (d, e) => { e.target.style.fill = null}
})
vm2 = createVM(GroupedBarChart, {
data: data2,
x: 'year',
y: 'count',
g: 'category',
c: 'category',
horizontal: true,
padding: 0.4
})
vm3 = createVM(WaterfallChart, {data: data3}, null, {height: 800, padding: '5%'})
vm4 = createVM(ChordDiagram, {
data: data4,
k: 'code',
a: 'country',
g: 'region',
gDomain: ['Asia', 'Europe', 'Americas', 'Africa', 'Oceania']
}, null, {height: 800, padding: '5%'})
Vue = require("https://cdn.jsdelivr.net/npm/vue@2")
d3 = import('d3-fetch')
BarChart = (await import('vue-graphics@0.2.21/dist/BarChart.mjs')).default
GroupedBarChart = (await import('vue-graphics@0.2.21/dist/GroupedBarChart.mjs')).default
WaterfallChart = (await import('vue-graphics@0.2.21/dist/WaterfallChart.mjs')).default
ChordDiagram = (await import('vue-graphics@0.2.21/dist/ChordDiagram.mjs')).default
SvgWithPadding = (await import('vue-graphics@0.2.21/hocs/SvgWithPadding')).default
function createVM (Component, props, listeners, svgProps) {
return new Vue({
el: html`<svg></svg>`,
data: props,
render (h) {
return h(SvgWithPadding, {
props: svgProps,
scopedSlots: {
default: contentBox => h(Component, {
attrs: Object.assign(contentBox, this.$data),
on: listeners
})
}
})
}
})
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
