I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
height =450
width=800
scales = columns.map((col,i) =>
d3.scaleLinear()
.domain([0, d3.max(data, e => e[col])])
.range([0, coeficients[i]]))
md`# Data`
viewof data = dataInput({
initialValue: d3.json(
"https://gist.githubusercontent.com/john-guerra/4a6b8f51376a18a912cf4ed6d45ade3b/raw/41e1b510d74ddc13f00136073d26022af40412ac/gapminder.json"
)
})
columns = d3.keys(data[0]).filter(d => d!==key && !isNaN(data[0][d])).slice(0, maxNumOfCols)
adjustedData = data.map((d) => {
const ret = {};
ret[key] = d[key];
ret._total = 0;
columns
.forEach((col,i) => {
ret[col]=scales[i](d[col])
ret._total+=ret[col];
}) // adjust the values by the coeficient
return ret;
}).sort((a,b) => d3.descending(a._total, b._total)).slice(0,maxNumOfRows)
stackedData = d3.stack()
.keys(columns)
(adjustedData)
md`# Appendix`
d3 = require("d3@5")
import {dataInput} from "@john-guerra/file-input-with-default-value"
md`Below code is a slider from [Jeff Heer](https://observablehq.com/@jheer/dom-utilities)`
// Generate a slider with provided label title and slider parameters
slider = function(title, value, min, max, step) {
const slider = document.createElement('input');
slider.setAttribute('type', 'range');
slider.setAttribute('min', min);
slider.setAttribute('max', max);
slider.setAttribute('step', step);
slider.style.width = "80px";
// slider.style.margin = "20px";
slider.value = value;
const valueLabel = document.createElement('label');
valueLabel.style['margin-left'] = '0.5em';
const span = label(title, slider, valueLabel);
const update = () => {
valueLabel.innerText = span.update(+slider.value);
};
slider.addEventListener('input', update);
update();
return span;
}
// Generate a slider with provided label title and slider parameters
combo = function(title, value, options) {
const select = document.createElement('select');
select.value = value;
options.forEach(op => {
const opEl = document.createElement('option');
opEl.textContent = op;
select.append(opEl);
});
const valueLabel = document.createElement('label');
valueLabel.style['margin-left'] = '0.5em';
valueLabel.style['margin-right'] = '20px';
const span = label(title, select, valueLabel);
const update = () => {
valueLabel.innerText = span.update(select.value);
};
select.addEventListener('input', update);
update();
return span;
}
// Returns a new span containing a label plus the input DOM nodes
label = function(title, ...nodes) {
const label = document.createElement('label');
label.style.display = 'inline-block';
label.style.width = '150px';
label.style["margin-right"] = "20px";
label.innerText = title;
const span = document.createElement('div');
span.appendChild(label);
nodes.forEach(_ => span.appendChild(_));
// support listeners for value changes
const listeners = [];
span.addValueListener = l => listeners.push(l);
span.update = value => {
span.value = value;
listeners.forEach(l => l(value));
return value;
};
return span;
}
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.