AI Researcher in Medicine.
All opinions are my own.
viewof chart = {
const data = await FileAttachment("faithful.json").json();
const densityPlotHeight = 300;
const boxPlotHeight = 100;
const beeswarmPlotHeight = 200;
const width = 1000;
const margin = {
left: 70,
right: 10
};
const xMin = 30;
const xMax = 100;
const defaultBandwidth = 7.0;
const chartContainer = d3.create('div')
.attr('class', 'chart-container');
const sliderContainer = chartContainer
.append('div')
.attr('class', 'slider-container');
const densityPlotObject = densityPlot()
.width(width)
.height(densityPlotHeight)
.margin({
top: 50,
right: margin.right,
bottom: 50,
left: margin.left,
})
.data(data)
.xMin(xMin)
.xMax(xMax)
.yMax(0.045)
.xLabel('Time between eruptions (minutes) →')
.title('Time between eruptions of Old Faithful')
.bandwidth(defaultBandwidth);
const boxPlotObject = boxPlot()
.width(width)
.height(boxPlotHeight)
.margin({
top: 0,
right: margin.right,
bottom: 0,
left: margin.left,
})
.data(data)
.xMin(xMin)
.xMax(xMax)
.boxWidth(30)
.radius(5)
.hoverOffsetX(70)
.hoverOffsetY(-75)
.removeAxis(true);
const beeswarmPlotObject = beeswarmPlot()
.width(width)
.height(beeswarmPlotHeight)
.margin({
top: 0,
right: margin.right,
bottom: 0,
left: margin.left,
})
.data(data)
.xMin(xMin)
.xMax(xMax)
.radius(5)
.markerPadding(2)
.plotPadding(7)
.removeAxis(true);
chartContainer.call(densityPlotObject);
chartContainer.call(boxPlotObject);
chartContainer.call(beeswarmPlotObject);
sliderContainer.call(
slider()
.id('bandwidth')
.labelText('Bandwidth: ')
.min(1)
.max(20)
.step(0.1)
.value(7)
.on('change', (value) => {
chartContainer.call(densityPlotObject.bandwidth(value));
})
);
return chartContainer.node();
}
import {slider} from "@jeyabbalas/reusable-html-range-slider"
import {densityPlot} from "@jeyabbalas/reusable-density-plots"
import {boxPlot} from "@jeyabbalas/reusable-box-plots"
import {beeswarmPlot} from "@jeyabbalas/reusable-beeswarm-plots"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.