Data professional with over 10 years of experience in automating data-driven reports, data extraction, data cleansing, data transformations, and data visualizations. Tell me your goals and I will turn them into technical reality.
Published
Edited
Sep 4, 2021
1 star
md`# Power BI Sample Charts with Plot
{
const
colorDomain = ["Increase", "Decrease", "Total"],
colorRange = ["#649334", "#cc392b", "#1f77b4"];
const plot = Plot.plot({
width: width,
x: {
align: 0,
round: false,
domain: waterfall.map(d => d.month)
},
y: {
grid: true,
nice: true,
label: "Profit",
tickFormat: d3.format(".2s")
},
color: {
domain: colorDomain,
range: colorRange
},
marks: [
Plot.barY(waterfall, {
x: "month",
y1: "prior",
y2: "accu",
fill: d => d.month === "Total" ? "Total" : d.profit >= 0 ? "Increase" : "Decrease",
title: d => d.month === "Total"
? `Total: ${fmt(d.accu)}`
: `${d.month}\nProfit: ${fmt(d.profit)}\nRunning Total: ${fmt(d.accu)}`
}),
Plot.ruleY(waterfall, {
x1: "month",
x2: "nextMonth",
y: "accu",
strokeDasharray: "1.5"
}),
Plot.ruleY([0], {strokeDasharray: "1.5"}),
plotLabel(waterfall.filter(d => d.profit >= 0), "-0.5em"),
plotLabel(waterfall.filter(d => d.profit < 0), "1.5em")
]
})
return wrap(
Swatches({color: d3.scaleOrdinal(colorDomain, colorRange)}),
plot
);
}
plotLabel = (data, dy) =>
Plot.text(data, {
x: "month",
y: "accu",
dy: dy,
fontWeight: "bold",
text: d => d3.format(".2s")(d.accu)
})
numbers = [
{ month: "January", profit: 387264 },
{ month: "Feburary", profit: 772096 },
{ month: "March", profit: 638075 },
{ month: "April", profit: -211386 },
{ month: "May", profit: -138135 },
{ month: "Jun", profit: -267238 },
{ month: "July", profit: 431406 },
{ month: "August", profit: 363018 },
{ month: "September", profit: -224638 },
{ month: "October", profit: -299867 },
{ month: "November", profit: 607365 },
{ month: "December", profit: 1106986 }
]
waterfall = {
let last = 0, accu = 0;
const waterfall = numbers.map((d, i) => {
last = accu;
accu += d.profit;
return {
month: d.month,
nextMonth: i < 11 ? numbers[i + 1].month : "Total",
prior: last,
accu: accu,
profit: d.profit
}
});
waterfall.push({
month: "Total",
nextMonth: null,
prior: 0,
accu: accu,
profit: 0
});
return waterfall;
}
md`## Ribbon Chart
It's a variant of Bump Chart which reflects both value and the changes in rank over time.`
{
const territories = [...new Set(ribbon.map(d => d.territory))];
const plot = Plot.plot({
width: width,
x: {
align: 0,
round: false,
domain: months
},
y: {
grid: true,
label: "Profit",
nice: true,
tickFormat: d3.format(".2s")
},
color: {
type: "categorical",
domain: territories
},
marks: [
Plot.areaY(ribbon, Plot.stackY({
x: d => months[d.month],
y: "profit",
curve: "bump-x",
fill: "territory",
fillOpacity: 0.7,
order: "value"
})),
Plot.barY(ribbon, Plot.stackY({
x: d => months[d.month],
y: "profit",
fill: "territory",
order: "value",
insetLeft: 19,
insetRight: 19,
title: d => `${months[d.month]} - ${d.territory}\nRank: ${d.rank}\nProfit: ${fmt(d.profit)}`
}))
]
})
return wrap(
Swatches({color: d3.scaleOrdinal(territories, d3.schemeTableau10)}),
plot
)
}
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
ribbon = {
const data = await FileAttachment("ribbon@1.csv").csv({typed: true});
return d3.groups(data, d => d.month)
.sort((a, b) => a[0] - b[0])
.flatMap(m => m[1].map((d, i) => ({...d, month: d.month - 1, rank: i + 1})));
}
md`## Tornado Chart`
{
const plot = Plot.plot({
height: 500,
marginLeft: 100,
x: {
axis: "top",
grid: true,
nice: true,
tickFormat: d => d3.format(".0s")(Math.abs(d))
},
y: {
label: "Sales Territory",
domain: d3.groupSort(tornado, g => -d3.sum(g, d => d.profit), d => d["territory"])
},
marks: [
Plot.barX(tornado, Plot.stackX({
x: d => d.profit * (d["year"] === "CY2014" ? -1 : 1),
y: d => d["territory"],
fill: "year",
title: d => `${d["year"]}\n${d["territory"]}\n${fmt(d.profit)}`
})),
Plot.text(tornado, {
filter: d => d["year"] === "CY2014",
dx: "-0.5em",
x: d => -d.profit,
y: d => d["territory"],
text: d => d3.format(".3s")(d.profit),
textAnchor: "end",
fontWeight: "bold"
}),
Plot.text(tornado, {
filter: d => d["year"] === "CY2015",
dx: "0.5em",
x: d => d.profit,
y: d => d["territory"],
text: d => d3.format(".3s")(d.profit),
textAnchor: "start",
fontWeight: "bold"
}),
Plot.ruleX([0])
]
})
return wrap(
Swatches({color: d3.scaleOrdinal(["CY2014", "CY2015"], d3.schemeTableau10)}),
plot
)
}
tornado = await FileAttachment("tornado.csv").csv({typed: true})
md`## LineDot Chart`
viewof m = Scrubber(d3.ticks(1, 12, 11), {
autoplay: true,
alternate: false,
delay: 250
})
{
const data = linedot.slice(0, m);
return Plot.plot({
width: width,
marginTop: 50,
marginRight: 50,
x: {
domain: linedot.map(d => d.Month)
},
y: {
grid: true,
nice: true,
domain: d3.extent(linedot.map(d => d.SalesAmount)),
tickFormat: "s"
},
r: {
domain: d3.extent(linedot.map(d => d.GrossProfit)),
range: [10, 50]
},
color: {
domain: d3.extent(linedot.map(d => d.GrossProfit)),
scheme: "bupu"
},
marks: [
Plot.line(data, {
x: "Month",
y: "SalesAmount",
stroke: "#457b9d"
}),
Plot.dot(data, {
x: "Month",
y: "SalesAmount",
r: "GrossProfit",
fill: "GrossProfit",
title: d => `${d.Month}\nSales Amount: ${fmt(d.SalesAmount)}\nGrossProfit: ${fmt(d.GrossProfit)}`
})
]
})
}
linedot = FileAttachment("linedot.csv").csv({typed: true})
import {Scrubber} from "@mbostock/scrubber"
md`## Waffle Chart`
{
const plot = Plot.plot({
width: 500,
height: 500,
padding: 0,
x: {axis: null},
y: {axis: null},
color: {
type: "categorical",
scheme: "tableau10"
},
marks: [
Plot.cell(waffles[0], {
x: "x",
y: "y",
rx: 4, ry: 4,
fill: "index",
inset: 1.5,
title: d => `${chartData[d.index].territory}\n${d3.format(",d")(chartData[d.index].profit)} (${chartData[d.index].ratio.toFixed(1)}%)`
})
]
})
return wrap(
Swatches({color: d3.scaleOrdinal(chartData.map(d => d.territory), d3.schemeTableau10)}),
plot
)
}
import {chartData, waffles} from "@analyzer2004/waffle-chart"
md`## Funnel Chart`
Plot.plot({
height: 500,
marginLeft: 100,
x: {
axis: null,
nice: true
},
y: {
label: "Subcategory",
domain: d3.groupSort(funnel, g => -d3.sum(g, d => d.amount), d => d.subcategory)
},
marks: [
Plot.barX(funnel, {
x1: d => -d.amount / 2,
x2: d => d.amount / 2,
y: "subcategory",
fill: "subcategory",
title: d => `${d.subcategory}\n${fmt(d.amount)}`
}),
Plot.text(funnel, {
x: 0,
y: "subcategory",
text: d => d3.format(".2s")(d.amount),
fontWeight: "bold",
fill: "white"
})
]
})
funnel = await FileAttachment("funnel.csv").csv({typed: true})
fmt = n => d3.format(",d")(n)
wrap = (...elems) => {
const div = document.createElement("div");
elems.forEach(el => div.appendChild(el));
return div;
}
import {swatches as Swatches} from "@d3/color-legend"
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.