Public
Edited
Mar 10
2 forks
Importers
chart(url, sheet)
chart = (url, sheet, custom) => {
const placeholder = d3.select(html`<div style="height: 60vw"/>`).node()
new BubbleChart.Base({
Vizabi,
model: Vizabi(data_config(url, sheet, custom)),
ui: mobx.observable({}),
default_ui: ui_config,
locale: { placeholder, resolve: { "en": en_url } },
layout: { placeholder },
placeholder,
options: {
showLoading: true
}
});
//cell must return a detatched DOM node so that observable can show it
return placeholder;
}
data_config = (url, sheet, custom = {}) => deepmerge({
markers: {
bubble: {
data: { source: "data1" }
}
},
dataSources: {
data1: {
path: url,
sheet: sheet,
timeInColumns: "",
hasNameColumn: "",
modelType: "google_csv",
locale: "en"
}
}
}, custom)
ui_config = ({
chart: {
show_ticks: true,
showForecast: false,
showForecastOverlay: true,
pauseBeforeForecast: true,
endBeforeForecast: "2022",
opacityHighlight: 1.0,
opacitySelect: 1.0,
opacityHighlightDim: 0.1,
opacitySelectDim: 0.3,
opacityRegular: 0.8,
timeInBackground: true,
timeInTrails: true,
lockNonSelected: 0,
numberFormatSIPrefix: true,
panWithArrow: false,
adaptMinMaxZoom: false,
cursorMode: "arrow",
zoomOnScrolling: false,
superhighlightOnMinimapHover: true,
whenHovering: {
showProjectionLineX: true,
showProjectionLineY: true,
higlightValueX: true,
higlightValueY: true
},
labels: {
enabled: true,
dragging: true,
removeLabelBox: false
},
margin: {
left: 0,
top: 0
},
decorations: {
"enabled": false,
"xAxisGroups": {
}
},
"data-warning": {
doubtDomain: [],
doubtRange: []
},
"tree-menu": {
}
},
buttons: {
buttons: ["colors", "find", "trails", "moreoptions", "presentation", "sidebarcollapse", "fullscreen"]
},
dialogs: {
dialogs: {
popup: ["colors", "find", "moreoptions"],
sidebar: ["colors", "find", "size", "zoom"],
moreoptions: ["opacity","speed","axes","size","colors","label","zoom","technical","repeat","presentation","about"]
},
find: {
enableSelectShowSwitch: false,
enableMarkerSpaceOptions: false,
}
}
})
Vizabi = require("@vizabi/core@1.29.1")
BubbleChart = require("@vizabi/bubblechart@4.1.4")
en_url = FileAttachment("en.json").url()
{
document.head.appendChild(html`<link rel='stylesheet'
href='https://www.unpkg.com/@vizabi/shared-components@1.40.0/build/VizabiSharedComponents.css' />`);
document.head.appendChild(html`<link rel='stylesheet'
href='https://www.unpkg.com/@vizabi/bubblechart@4.1.4/build/bubblechart.css' />`);
return "css imports"
}
deepmerge = (await require("lodash@4")).merge
d3 = require("d3@6.7.0")
mobx = require('mobx@5.15.7/lib/mobx.umd.min.js')
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.
