{
const rs = flare2.map(d => d.r),
max_x = d3.max(flare2.map(d => d.x)),
max_y = d3.max(flare2.map(d => d.y));
const labels = flare2
.filter(d => d.height === 0)
.flatMap(d => {
const labels = d.data.name.split(/(?=[A-Z][a-z])|\s+/g);
return labels.map((l, i) => ({
data: d.data,
x: d.x,
y: d.y + (i - (labels.length - 1) / 2) * 10,
// Not accurate, just make it readable
label: l.length * 3 < d.r * 2 ? l : ""
}))
})
return Plot.plot({
width: width,
height: width,
//use scale.type=identity since everything is already in pixels
//x: {axis: null, domain: [0, max_x], range: [0, max_x]},
//y: {axis: null, domain: [0, max_y], range: [0, max_y]},
//r: {domain: rs, range: rs},
x: {axis: null, type: "identity"},
y: {axis: null, type: "identity"},
r: {type: "identity"},
color: {type: "sequential", scheme: "magma", domain: [8, 0], reverse: true},
marks: [
Plot.dot(flare2, {
x: "x",
y: "y",
r: "r",
fill: "height",
title: title
}),
Plot.text(labels, {
x: "x",
y: "y",
text: d => d.label,
title: title
})
]
})
}
Plot.plot({
width: 800,
height: 560,
padding: 0,
x: {axis: null},
y: {axis: null},
color: {scheme: "bupu"},
marks: cells
});
Plot.plot({
width: width,
y: {grid: true, label: "Usage (kW)"},
color: {type: "diverging", scheme: "BuRd"},
marks: [
Plot.ruleY([0]),
Plot.dot(
pge_src,
{
x: "date",
y: "usage",
stroke: "usage",
title: d => `${formatDate(d.date)}\n${formatUsage(d.usage)} kW`
}
)
]
})
Plot.plot({
width: width,
height: pge_height,
padding: 0,
x: {axis: "top", tickFormat: formatHour, round: false},
y: {tickFormat: formatDay, round: false},
color: {type: "diverging", scheme: "BuRd"},
marks: [
Plot.cell(
pge_src,
{
x: d => d.date.getHours(),
y: d => d3.timeDay(d.date),
fill: "usage",
inset: 0.5,
title: d => `${formatDate(d.date)}\n${formatUsage(d.usage)} kW`
}
)
]
})
{
const map = new Heatmap()
.size(width, hh_height)
.padding(1)
.mapHeight(10)
.data(d3.hierarchy(hhdata));
const nodes = map.populate(),
legend = map.legend(9),
nodeColors = nodes.descendants().map(d => d.color),
legendColors = legend.cells.map(d => d.color);
const colors = [...new Set(nodeColors.concat(legendColors))];
return Plot.plot({
width,
height: hh_height + 40,
x: {axis: null},
y: {axis: null, reverse: true},
color: {
domain: colors,
range: colors
},
marks: [
plotNodes(nodes),
plotLegend(legend)
]
});
}
Plot.plot({
width: width,
x: {
label: "Month",
tickFormat: Plot.formatMonth("en", "short")
},
y: {
grid: true,
label: "Sales Amount",
tickFormat: "s",
},
marks: [
Plot.barY(data, Plot.groupX({y: "sum"}, {x: "OrderMonth", y: "SalesAmount", fill: "#4e79a7"}))
]
});
{
const region = "SalesTerritoryRegion";
const eu_sales = data.filter(d => d.SalesTerritoryGroup === "Europe");
const regions = [...new Set(eu_sales.map(d => d.SalesTerritoryRegion))];
const plot = Plot.plot({
width: width,
x: {
label: null,
domain: regions
},
y: {
grid: true,
label: "Sales Amount",
tickFormat: "s"
},
color: {
domain: regions,
color: "tableau10"
},
fx: {
label: null,
tickFormat: d => `Q${d}`
},
facet: {
data: eu_sales,
x: "OrderQtr"
},
marks: [
Plot.barY(
eu_sales,
Plot.groupX({y: "sum"}, {x: region, y: "SalesAmount", fill: region})
)
]
})
return html`<div>${[
Swatches({color: d3.scaleOrdinal(regions, d3.schemeTableau10)}),
plot
]}`;
}
{
const region = "SalesTerritoryRegion";
const us_sales = data.filter(d => d.SalesTerritoryCountry === "United States");
const regions = [...new Set(us_sales.map(d => d.SalesTerritoryRegion))].sort();
const plot = Plot.plot({
width: width,
y: {
grid: true,
label: "Sales Amount",
tickFormat: "s"
},
color: {
domain: regions,
color: "tableau10"
},
fx: {
label: null,
tickFormat: d => `Q${d}`
},
facet: {
data: us_sales,
x: "OrderQtr"
},
marks: [
Plot.barY(
us_sales,
Plot.stackY(Plot.groupZ({y: "sum"}, {y: "SalesAmount", fill: region}))
)
]
});
return wrap(
Swatches({color: d3.scaleOrdinal(regions, d3.schemeTableau10)}),
plot
);
}
{
const countries = [...new Set(data.map(d => d.SalesTerritoryCountry))].sort();
const plot = Plot.plot({
width: width,
x: {
percent: true,
label: "Sales Amount(%)"
},
marks: [
Plot.barX(data, Plot.stackX(Plot.groupZ({x: "proportion"}, {fill: "SalesTerritoryCountry"})))
]
});
return wrap(
Swatches({color: d3.scaleOrdinal(countries, d3.schemeTableau10)}),
plot
);
}
{
const clothing = data.filter(d => d.Category === "Clothing");
const subcategories = [...new Set(clothing.map(d => d.Subcategory))];
const plot = Plot.plot({
width: width,
x: {
label: "Month",
tickFormat: Plot.formatMonth("en", "short")
},
y: {
grid: true,
label: "Sales Amount",
tickFormat: "s",
},
color: {
domain: subcategories,
color: "tableau10"
},
marks: [
Plot.areaY(
clothing,
Plot.stackY(Plot.groupX({y: "sum"}, {x: "OrderMonth", y: "SalesAmount", fill: "Subcategory"})))
]
});
return wrap(
Swatches({color: d3.scaleOrdinal(subcategories, d3.schemeTableau10)}),
plot
);
}
{
const clothing = data.filter(d => d.Category === "Clothing" && d.SalesTerritoryCountry === "United States");
const bts = [...new Set(clothing.map(d => d.BusinessType))];
const plot = Plot.plot({
width: width,
marginLeft: 80,
height: 600,
grid: true,
x: {type: "log", nice: true, tickFormat: ","},
y: {
label: "subcategory",
domain: d3.groupSort(clothing, g => -d3.sum(g, d => d.SalesAmount), d => d.Subcategory),
inset: 5
},
fy: {
label: "region",
domain: d3.groupSort(clothing, g => -d3.sum(g, d => d.SalesAmount), d => d.SalesTerritoryRegion)
},
color: {
domain: bts,
type: "categorical"
},
facet: {
data: clothing,
y: "SalesTerritoryRegion",
marginRight: 70
},
marks: [
Plot.frame(),
Plot.dot(clothing, Plot.groupY({x: "sum"}, {x: "SalesAmount", y: "Subcategory", stroke: "BusinessType"}))
]
});
return wrap(
Swatches({color: d3.scaleOrdinal(bts, d3.schemeTableau10)}),
plot
);
}
{
const usclothing = data.filter(d => d.Category === "Clothing" && d.CountryRegionCode === "US")
const subcats = [...new Set(usclothing.map(d => d.Subcategory))];
return Plot.plot({
height: 480,
width: width,
marginLeft: 80,
color: {scheme: "BuRd"},
x: {
round: false,
label: "state"
},
y: {
round: false,
domain: subcats,
label: "subcategory"
},
fy: {
label: "quarter",
domain: [1,2,3,4],
tickFormat: d => `Q${d}`
},
facet: {
data: usclothing,
y: "OrderQtr"
},
marks: [
Plot.cell(
usclothing,
Plot.group(
{fill: "sum"},
{
y: "Subcategory",
x: "StateProvinceCode",
fill: "GrossProfit"
}))
]
})
}
{
const helmets = data.filter(d => d.Subcategory === "Helmets" && d.SalesTerritoryCountry === "United States")
return Plot.plot({
height: 600,
width: width,
inset: 10,
facet: {
data: helmets,
x: "Product",
y: "SalesTerritoryRegion",
marginRight: 70
},
fy: {label: null},
x: {tickFormat: Plot.formatMonth("en", "short")},
y: {label: "sales", grid: true},
marks: [
Plot.line(helmets.slice(), Plot.groupX({y: "mean"}, {x: "OrderMonth", y: "SalesAmount", stroke: "#bbb"})),
Plot.line(helmets, Plot.groupX({y: "mean"}, {x: "OrderMonth", y: "SalesAmount", stroke: "#4e79a7"}))
]
})
}
wrap = (...elems) => {
const div = document.createElement("div");
elems.forEach(el => div.appendChild(el));
return div;
}
data = await FileAttachment("2012sales.csv").csv({typed: true})
import {swatches as Swatches} from "@d3/color-legend"
Plot.plot({
width: width,
y: {grid: true, label: "°F"},
marks: [
Plot.areaY(weather_sf, {x: "Date time", y1: "Minimum Temperature", y2: "Maximum Temperature", fill: "#d5e1fc"}),
//Plot.line(weather, Plot.windowY({x: "Date time", y: "Temperature", k: 7, stroke: "#06af8f"})),
Plot.dot(weather_sf, {x: "Date time", y: "Temperature", stroke: "#06af8f"}),
Plot.line(weather_sf, Plot.windowY({x: "Date time", y: "Maximum Temperature", k: 7, stroke: "#d97575"})),
Plot.line(weather_sf, Plot.windowY({x: "Date time", y: "Minimum Temperature", k: 7, stroke: "#4e79d9"}))
]
})
Plot.plot({
width: width,
y: {grid: true, label: "°F"},
color: {type: "sequential", scheme: "BuRd"},
marks: [
Plot.ruleY([55]),
Plot.dot(weather_sf, {x: "Date time", y: "Temperature", stroke: "Temperature"})
]
})
{
const grouped = weather_sf.concat(weather_la).concat(weather_sea);
return Plot.plot({
width: width,
inset: 10,
facet: {
data: grouped,
x: "Address"
},
y: {label: "°F"},
color: {type: "sequential", scheme: "BuRd"},
marks: [
Plot.ruleY([55]),
Plot.dot(grouped.slice(), {x: "Date time", y: "Temperature", stroke: "#eee"}),
Plot.dot(grouped, {x: "Date time", y: "Temperature", stroke: "Temperature"}),
Plot.line(grouped, Plot.windowY({x: "Date time", y: "Temperature", k: 7, stroke: "#86c2b6"}))
]
})
}
Plot.plot({
width: width,
x: {tickFormat: d => d.toString()},
y: {grid: true, label: "YoY (%)"},
color: {type: "sequential", scheme: "BuRd"},
marks: [
Plot.ruleY([0]),
Plot.dot(
temperature,
{
x: "year",
y: "yoy",
stroke: "yoy",
title: d => `${d.year} - ${Plot.formatMonth("en", "short")(d.month)}\n${d.yoy}%`
}
)
]
})
Plot.plot({
width: width,
x: {axis: null, domain: combined.city},
y: {grid: true, label: "°F"},
color: {domain: combined.city, color: "tableau10"},
fx: {tickFormat: Plot.formatMonth("en", "short")},
facet: {data: combined, x: "month"},
marks: [
Plot.barY(combined, {x: "city", y: "temp", fill: "city", title: "city"})
]
})
Plot.plot({
width: width,
x: {tickFormat: Plot.formatMonth("en", "short")},
y: {grid: true, label: "°F"},
marks: [
Plot.barY(combined, {x: "month", y: "temp", fill: "city", fillOpacity: 0.2})
]
})
Plot.plot({
width: width,
x: {tickFormat: Plot.formatMonth("en", "short")},
color: {scheme: "BuYlRd"},
marks: [
Plot.cell(weather_la, {x: d => d["Date time"].getUTCMonth(), fillOpacity: 0.1, fill: "Temperature"})
]
})
Plot.plot({
width: width,
height: 300,
padding: 0,
y: {tickFormat: Plot.formatMonth("en", "short")},
color: {scheme: "BuYlRd"},
marks: [
Plot.cell(
weather_la,
Plot.group({fill: "max"}, {
x: d => d["Date time"].getUTCDate(),
y: d => d["Date time"].getUTCMonth(),
fill: "Temperature",
inset: 0.5
})
),
Plot.text(
weather_la,
{
x: d => d["Date time"].getUTCDate(),
y: d => d["Date time"].getUTCMonth(),
fill: "#666666",
fontWeight: "bold",
text: d => d["Temperature"].toFixed(0)
}
)
]
})
Plot.plot({
width: width,
y: {grid: true, label: "°F"},
color: {type: "sequential", scheme: "BuRd"},
marks: [
Plot.ruleY([55]),
Plot.ruleX(weather_sf, {x: "Date time", y: "Temperature", stroke: "Temperature", strokeWidth:2})
]
})
Plot.plot({
width: width,
color: {scheme: "BuYlRd"},
marks: [
Plot.tickX(weather_la, {x: d => d["Date time"], stroke: "Temperature", strokeWidth:2})
]
})
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.
