md`# Gapminder data in Plotly`
{
const continents = ['Asia', 'Europe', 'Africa', 'Oceania', 'Americas'];
const POP_TO_PX_SIZE = 2e5;
const unpack = (rows, key) => rows.map(row => row[key]);
const continent = 'Asia';
const data = continents.map(continent => {
const rowsFiltered = gapminderData.filter(row => row.continent === continent && row.year === YEAR)
return {
mode: 'markers',
name: continent,
x: unpack(rowsFiltered, 'lifeExp'),
y: unpack(rowsFiltered, 'gdpPercap'),
text: unpack(rowsFiltered, 'country'),
marker: {
sizemode: 'area',
size: unpack(rowsFiltered, 'pop'),
sizeref: POP_TO_PX_SIZE } };
});
const layout = {
xaxis: { title: 'Life Expectancy' },
yaxis: { title: 'GDP per Capita', type: 'log' },
autosize: false,
width: 900,
height: 500,
margin: { t: 20 },
hovermode: 'closest' };
const div = DOM.element('div');
Plotly.newPlot(div, data, layout, { showLink: false });
return div
}
YEAR = gapminderYears[year]
//gapminderYears = Array.from(new Set(gapminderData.map(row=>row.year=2007)))
gapminderYears = Array.from(new Set(gapminderData.map(row=>row.year)))
gapminderData = d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv',d3.autoType);
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
import {slider} from "@jashkenas/inputs"
d3 = require("d3@5")
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.
