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;
}
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.
