Introduction to Observable and PlotlyJSUseful Javascript Array functions.Plotly.Js: Getting Started with Old FaithfulUseful D3 Functions for Data handlingPlotly Color UsageGeoVisualizationSample US Wind Data VizPlotlyJS GeoVisualizationHCL color modelHSV and HSL Color ModelsColor Blind SimulatorColorBlindLibD3: IntroducingWebGL Volume RenderingColor from Wavelength, Correlated Temperature and HTML color pickerColor Solids: RGB and HSL2D Vector Field Visualization1D Dataviz in PlotlyStock Market Performance of Presidents Trump, Obama, W. Bush, Clinton, H.W. Bush, Reagan During their first term.SVG cheat sheetScales and AxesFetch Covid-19 data
Gapminder data in Plotly
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)))
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")
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.