Notebooks 2.0 is here.
chart(url)
chart = (url, custom) => {
const placeholder = d3.select(html`<div style="height: 60vw"/>`).node()
const ddfReader = new DDFCsvReader.getDDFCsvReaderObject();
Vizabi.stores.dataSources.createAndAddType("ddfcsv", ddfReader);
new BubbleChart.Base({
Vizabi,
model: Vizabi(data_config(url, 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, custom = {}) => deepmerge({
markers: {
bubble: {
data: { source: "data1" }
}
},
dataSources: {
data1: {
path: url,
modelType: "ddfcsv",
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": {
enable: false
},
"tree-menu": {
},
buttons: {
buttons: ["colors", "markercontrols", "trails", "moreoptions", "presentation", "sidebarcollapse", "fullscreen"]
},
dialogs: {
dialogs: {
popup: ["colors", "markercontrols", "moreoptions"],
sidebar: ["colors", "markercontrols", "size", "zoom"],
moreoptions: ["opacity","speed","axes","size","colors","label","zoom","technical","repeat","presentation","about"]
},
markercontrols: {
}
}
})
Vizabi = require("@vizabi/core@1.33.0")
BubbleChart = require("@vizabi/bubblechart@4.2.0")
DDFCsvReader = require('https://unpkg.com/@vizabi/reader-ddfcsv@4.5.2/dist/reader-ddfcsv.js')
en_url = FileAttachment("en@1.json").url()
css = {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://unpkg.com/@vizabi/shared-components@1.47.2/build/VizabiSharedComponents.css";
return document.getElementsByTagName("head")[0].appendChild(link);
}
cssBubbles = {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://unpkg.com/@vizabi/bubblechart@4.2.0/build/bubblechart.css";
return document.getElementsByTagName("head")[0].appendChild(link);
}
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.
