Published
Edited
Oct 14, 2019
d3 = require('d3')
billboard = require('billboard.js')
bb = billboard.bb
billboardCss = html`<link href='${resolve('billboard.js/dist/billboard.css')}' rel='stylesheet' />`
// Add additional columns of data to a previously created chart...
{
chart1.load({ columns: [
["data3", 234, 374, 445, 200, 150, 50],
["data4", 234, 374, 445, 200, 150, 50]
]})
}
// and update values whenever!
{
chart1.load({ columns: [["data3", 500, 30, 245, 200, 150, 50]] })
}
chart3 = bb.generate({
data: {
columns: [ // note that you can also define your data inline
["data1", 30, 20, 50, 40, 60, 50],
["data2", 200, 130, 90, 240, 130, 220],
["data3", 300, 200, 160, 400, 250, 250],
["data4", 200, 130, 90, 240, 130, 220],
["data5", 130, 120, 150, 140, 160, 150],
["data6", 90, 70, 20, 50, 60, 120],
["data7", 283, 170, 275, 143, 220, 255]
],
type: "bar",
types: {
data3: "spline",
data4: "line",
data6: "area",
data7: "step",
data1: "bar",
data2: "bar",
data5: "bar"
},
groups: [
[
"data1",
"data2"
]
]
},
tooltip: {
grouped: false
},
bindto: graph3
})
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.
