Published
Edited
Mar 29, 2021
1 star
Introduction to Observable and PlotlyJSUseful Javascript Array functions.Plotly.Js: Getting Started with Old FaithfulUseful D3 Functions for Data handlingGeoVisualizationGapminder data in PlotlySample 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
Plotly Color Usage
Also listed in…
CAP 6737
tips = d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/tips.csv",d3.autoType)
colorBrewer = FileAttachment("colorbrewer.json").json()
md`### Discrete Color by trace`
{
const smokers = tips.filter(d => d.smoker == "No");
const nonSmokers = tips.filter(d => d.smoker == "Yes");
let data = [
{
x: smokers.map(d => d.total_bill),
y: smokers.map(d => d.tip),
type: "scatter",
mode: "markers",
name: "No"
},
{
x: nonSmokers.filter(d => d.smoker == "Yes").map(d => d.total_bill),
y: nonSmokers.map(d => d.tip),
type: "scatter",
mode: "markers",
name: 'Yes'
}
];
let layout = {
title: `Discrete Colors`,
legend: {
title: { text: "Smoker" },
orientation: "v" // Default is "v". Other option "h"
}
//colorway : ['#ff7f0e', '#17becf'], // Change default categorical colors
};
const config = {
staticPlot: true,
responsive: true,
displayModeBar: false
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout, config);
return div;
}
[..."abcdefghij"].map(d=>Math.random())
md`### Discrete Color by Pie chart pieces or labels`
{
var data = [
{
values: [16, 15, 12, 6, 5, 4, 42],
labels: [
'US',
'China',
'European Union',
'Russian Federation',
'Brazil',
'India',
'Rest of World'
],
domain: { column: 1 },
name: 'GHG Emissions',
hoverinfo: 'label+percent+name',
hole: .4,
type: 'pie'
},
{
values: [16, 15, 12, 6, 5, 4, 42],
labels: [
'US',
'China',
'European Union',
'Russian Federation',
'Brazil',
'India',
'Rest of World'
],
domain: { column: 0 },
name: 'GHG Emissions',
hoverinfo: 'label+percent+name',
hole: .4,
type: 'pie'
},
{
values: [27, 11, 25, 8, 1, 3, 25],
labels: [
'US',
'China',
'European Union',
'Russian Federation',
'Brazil',
'India',
'Rest of World'
],
domain: { column: 2 },
name: 'CO2 Emissions',
hoverinfo: 'label+percent+name',
hole: .4,
type: 'pie'
}
];
var layout = {
//colorway : ['#f3cec9', '#e7a4b6', '#cd7eaf', '#a262a9', '#6f4d96', '#3d3b72', '#182844'],
title: 'Global Emissions 1990-2011',
height: 400,
width: 800,
showlegend: true,
grid: { rows: 1, columns: 3 }
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
[...new Set(gapminder.map(d=>d.continent))]
md`### Discrete Marker Color `
{
const cgapdata = gapminder.filter(d=>d.year==2007);
const continents =[...new Set(cgapdata.map(d=>d.continent))];
const groupedData = continents.map(c=>{
const data = cgapdata.filter(d=>d.continent==c);
return data.map(d=>({country: d.country, pop: d.pop}))
})
const data = groupedData[0].map((g,i)=>({
y: continents,
x: groupedData.map(d=>d[i]?d[i].pop:null),
type: "bar",
text: groupedData.map(d=>d[i]?d[i].country:null),
hoverinfo: groupedData.map(d=>d[i]?"text":"none"),
marker:{
color: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'],
line: {
color: "#ffffff",
width: 0.5
}
},
orientation: "h"
}))
var layout = {
title: 'Global Emissions 1990-2011',
height: 600,
width: 990,
showlegend: false,
barmode: 'stack'
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
gapminder = d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear2.csv",d3.autoType)
{
const av = d3.median(tips,d=>d.size)
let data = [ {
x: tips.map(d=>d.total_bill),
y: tips.map(d=>d.tip),
type: "scatter",
mode: "markers",
marker: {
color: tips.map(d=>d.size),
colorscale: colorscale,
showscale: (options.showScale=="show")
}
} ];
let layout = {
height: 600,
width: 990,
title: `Continuous Colors`
};
const config = {
staticPlot: true,
responsive: true,
displayModeBar: true
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout, config);
return div;
}
md`## Libraries and Imports`
import {columns} from "@bcardiff/observable-columns"
import {slider, radio, checkbox, select} from "@jashkenas/inputs"
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
d3 = require("d3@6")
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.