Published
Edited
Mar 29, 2021
1 star
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")
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.
