AI Researcher in Medicine.
All opinions are my own.
viewof chart = {
const width = 600;
const height = 600;
const data = await FileAttachment("faithful.json").json();
const numBandwidths = 100;
const bandwidthValues = getBandwidthValues(numBandwidths, data);
const defaultBandwidth = 50;
const chartContainer = d3.create('div')
.attr('class', 'chart-container');
const sliderContainer = chartContainer
.append('div')
.attr('class', 'slider-container');
const plot = densityPlot()
.width(width)
.height(height)
.margin({
top: 50,
right: 50,
bottom: 50,
left: 70,
})
.data(data)
.xLabel('Time between eruptions (minutes) →')
.title('Probability distribution of time between eruptions of Old Faithful')
.bandwidth(bandwidthValues[defaultBandwidth - 1])
.cutoffs([65, 90])
.cutoffColors(['green', 'yellow', 'red']);
chartContainer.call(plot);
sliderContainer.call(
slider()
.id('bandwidth')
.labelText('Bandwidth: ')
.min(1)
.max(numBandwidths)
.step(1)
.value(defaultBandwidth)
.on('change', (value) => {
chartContainer.call(plot.bandwidth(bandwidthValues[value - 1]));
})
);
return chartContainer.node();
}
function densityPlot() {
let width;
let height;
let margin;
let data;
let xMin;
let xMax;
let xLabel;
let title;
let yMax;
let numBins = 40;
let bandwidth;
let color = 'rgb(122, 255, 248, 0.7)';
let opacity = 1.0;
let cutoffs;
let cutoffColors;
let fontSize = 15;
const epanechnikov = (bandwidth) => {
return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0;
};
const kde = (kernel, thresholds, data) => {
return thresholds.map(t => [t, d3.mean(data, d => kernel(t - d))]);
};
const densityPlot = (selection) => {
const svg = selection
.selectAll('svg.density-plot')
.data([null])
.join('svg')
.attr('class', 'density-plot')
.attr('width', width)
.attr('height', height);
svg
.attr('font-family', 'sans-serif')
.attr('font-size', fontSize);
let xRange = d3.extent(data);
xRange[0] = xMin ?? xRange[0];
xRange[1] = xMax ?? xRange[1];
const x = d3.scaleLinear()
.domain(xRange)
.range([margin.left, width - margin.right]);
const thresholds = x.ticks(numBins);
const density = kde(epanechnikov(bandwidth), thresholds, data);
const yMaxValue = yMax ?? Math.max(...density.map(d => d[1]));
const y = d3.scaleLinear()
.domain([0, yMaxValue])
.range([height - margin.bottom, margin.top]);
// close the curve at the x-axis (y=0) so color fill is complete.
if (density[0][1] !== 0) {
density.unshift([density[0][0], 0]);
}
if (density[density.length - 1][1] !== 0) {
density.push([density[density.length - 1][0], 0]);
}
const line = d3.line()
.curve(d3.curveBasis)
.x(d => x(d[0]))
.y(d => y(d[1]));
const t = d3.transition().duration(1000);
let colorGradient = svg
.selectAll('defs')
.data([null])
.join('defs')
.append('linearGradient')
.attr('id', 'color-gradient');
if (cutoffs && cutoffColors && cutoffColors.length === cutoffs.length + 1) {
colorGradient
.append('stop')
.attr('offset', '0%')
.attr('stop-color', cutoffColors[0]);
for (let i = 0; i < cutoffs.length; i++) {
let cutoffPercentage = (((cutoffs[i] - xRange[0]) / (xRange[1] - xRange[0])) * 100.0)
.toFixed(2);
if (cutoffPercentage < 0) {
cutoffPercentage = 0.0;
}
if (cutoffPercentage > 100) {
cutoffPercentage = 100.0;
}
colorGradient
.append('stop')
.attr('offset', `${cutoffPercentage}%`)
.attr('stop-color', cutoffColors[i]);
colorGradient
.append('stop')
.attr('offset', `${cutoffPercentage}%`)
.attr('stop-color', cutoffColors[i + 1]);
}
colorGradient
.append('stop')
.attr('offset', '100%')
.attr('stop-color', cutoffColors[cutoffColors.length - 1]);
}
else {
colorGradient
.append('stop')
.attr('offset', '100%')
.attr('stop-color', color);
}
svg
.selectAll('path')
.data([null])
.join(
(enter) =>
enter
.append('path')
.attr('stroke', 'black')
.attr('stroke-width', 1.5)
.attr('stroke-linejoin', 'round')
.attr('opacity', opacity)
.attr('d', line(density))
.style('fill', 'url(#color-gradient)'),
(update) =>
update.call((update) =>
update
.transition(t)
.attr('d', line(density))
),
(exit) => exit.remove()
);
svg
.selectAll('.y-axis')
.data([null])
.join('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg
.selectAll('.y-axis-label')
.data([null])
.join('text')
.attr('class', 'y-axis-label')
.text('Density →')
.attr('text-anchor', 'end')
.attr('transform', 'rotate(-90)')
.attr('x', - margin.top)
.attr('y', margin.left / 3)
.style('font-size', fontSize * (3/4));
svg
.selectAll('.x-axis')
.data([null])
.join('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg
.selectAll('.x-axis-label')
.data([null])
.join('text')
.attr('class', 'x-axis-label')
.attr('text-anchor', 'end')
.attr('x', width)
.attr('y', height - margin.bottom / 3)
.text(xLabel)
.style('font-size', fontSize * (3/4));
svg
.selectAll('.title')
.data([null])
.join('text')
.attr('class', 'title')
.text(title)
.attr('text-anchor', 'middle')
.attr('x', width / 2)
.attr('y', margin.top / 2);
}
densityPlot.width = function (_) {
return arguments.length ? ((width = +_), densityPlot) : width;
}
densityPlot.height = function (_) {
return arguments.length ? ((height = +_), densityPlot) : height;
}
densityPlot.margin = function (_) {
return arguments.length ? ((margin = _), densityPlot) : margin;
}
densityPlot.data = function (_) {
return arguments.length ? ((data = _), densityPlot) : data;
}
densityPlot.xMin = function (_) {
return arguments.length ? ((xMin = +_), densityPlot) : xMin;
}
densityPlot.xMax = function (_) {
return arguments.length ? ((xMax = +_), densityPlot) : xMax;
}
densityPlot.xLabel = function (_) {
return arguments.length ? ((xLabel = _), densityPlot) : xLabel;
}
densityPlot.title = function (_) {
return arguments.length ? ((title = _), densityPlot) : title;
}
densityPlot.yMax = function (_) {
return arguments.length ? ((yMax = +_), densityPlot) : yMax;
}
densityPlot.numBins = function (_) {
return arguments.length ? ((numBins = +_), densityPlot) : numBins;
}
densityPlot.bandwidth = function (_) {
return arguments.length ? ((bandwidth = +_), densityPlot) : bandwidth;
}
densityPlot.color = function (_) {
return arguments.length ? ((color = _), densityPlot) : color;
}
densityPlot.opacity = function (_) {
return arguments.length ? ((opacity = +_), densityPlot) : opacity;
}
densityPlot.cutoffs = function (_) {
return arguments.length ? ((cutoffs = _), densityPlot) : cutoffs;
}
densityPlot.cutoffColors = function (_) {
return arguments.length ? ((cutoffColors = _), densityPlot) : cutoffColors;
}
densityPlot.fontSize = function (_) {
return arguments.length ? ((fontSize = +_), densityPlot) : fontSize;
}
return densityPlot;
}
function getBandwidthValues(numBandwidths, data) {
const bandwidthValues = [];
const bandwidthMin = 0.001 * (Math.max(...data) - Math.min(...data));
const bandwidthMax = Math.max(...data) - Math.min(...data);
for (let i = 0; i < numBandwidths; i++) {
const logBandwidth = Math.log10(bandwidthMin) + ((Math.log10(bandwidthMax) - Math.log10(bandwidthMin)) * i) / (numBandwidths - 1);
bandwidthValues.push(Math.pow(10, logBandwidth));
}
return bandwidthValues;
}
import {slider} from "@jeyabbalas/reusable-html-range-slider"
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.