Senior Data Scientist, MassMutual
Lecturer, UC Berkeley MIDS
--
PhD Applied Math, Computational Story Lab, UVM
MS Applied Math, UVM
BS Math, Virginia Tech
dashboardgen([["Steps", steps], ["", sleep], ["", 20]], [["Steps", 1, "6,800"], ["", 1, "7 Hours"], ["",1, "30"]])
dashboardgen([["Steps", 160], ["Sleep", 120], ["", 20]], [["Steps", 1, "6,800"], ["Sleep", 1, "7 Hours"], ["",1, "30"]])
dashboardgen([["Steps", 120], ["Sleep", 110], ["Active Minutes", 70]], [["Steps", 1, "6,800"], ["Sleep", 1, "7 Hours"], ["Active Minutes",1, "30"]])
{
const svg = d3
.create("svg")
.attr("viewBox", [-1152 / 2, -200, 1152, 400])
.attr("style", "background-color: #EDF5FF");
smallgen([["Steps", 120], ["Sleep", 110], ["Active Minutes", 70]], svg, 100, false)
return svg.node();
}
smallgen = function(groupedData, group, radius, border) {
console.log(group);
console.log(radius);
const arc = d3
.arc()
.innerRadius(radius * 0.05)
.outerRadius(radius * 0.95)
const arcs = d3
.pie().sort(null)
.padAngle(0.01)
.value(d => d[1])(groupedData)
group
.selectAll(".arc")
.data(arcs)
.join("path")
.attr("class", "arc")
.attr("fill", d => color2(d.data[0]))
.attr("d", a => arc(a))
.attr("opacity", border ? 1.0 : .6);
if (border) {
group.append("circle").attr("cx", 0).attr("cy", 0).attr("r", radius-1).attr("style", "stroke: darkgrey; stroke-width: 1px; fill: none;")
}
return group;
}
arc3 = d3
.arc()
.innerRadius(miniradius * 0.05)
.outerRadius(miniradius * 0.95)
dashboardgen = function(groupedData, goals) {
const f = d3.format(".0f");
const arcs = d3
.pie().sort(null)
.padAngle(0.01)
.value(d => d[1])(groupedData)
const arcs2 = d3
.pie().sort(null)
.padAngle(0.01)
.value(d => d[1])(goals)
const svg = d3
.create("svg")
//.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("width", 350)
.attr("height", 600)
.attr("style", "background-color: #EDF5FF")
const g = svg.append("g").attr("transform", "translate(175, 300)");
// Your marks here
g
.selectAll(".arc")
.data(arcs)
.join("path")
.attr("class", "arc")
.attr("fill", d => color2(d.data[0]))
.attr("d", a => arc(a));
// Your marks here
g
.selectAll(".arc2")
.data(arcs2)
.join("path")
.attr("class", "arc2")
.attr("fill", d => color2(d.data[0]))
.attr("d", a => arc2(a));
// Your marks here
g
.selectAll(".label")
.data(arcs)
.join("text")
.attr("class", "label")
.attr("fill", "#333")
.attr("transform", a => `translate(${arc.centroid(a)})`)
.style("font-size", "10pt")
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.call(text =>
text
.append("tspan")
.style("font-weight", "bold")
.attr("x", 0)
.text(a => a.data[1] > 0 ? a.data[0] : "")
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("y", "1em")
.text(a => a.data[0] == "" || a.data[1] < 1 ? "" : f(a.data[1]) + '%')
);
// Your marks here
g
.selectAll(".label2")
.data(arcs2)
.join("text")
.attr("class", "label2")
.attr("fill", "#333")
.attr("transform", a => `translate(${arc2.centroid(a)})`)
.style("font-size", "10pt")
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.call(text =>
text
.append("tspan")
// .style("font-weight", "bold")
.attr("x", 0)
.text(a => a.data[0] == "" ? "" : a.data[2])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("y", "1em")
.text(a => a.data[0])
);
return svg.node();
}
svg = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "background-color: #EDF5FF");
// Your marks here
svg
.selectAll(".arc")
.data(arcs)
.join("path")
.attr("class", "arc")
.attr("fill", d => color2(d.data[0]))
.attr("d", a => arc(a));
// Your marks here
svg
.selectAll(".arc2")
.data(arcs2)
.join("path")
.attr("class", "arc2")
.attr("fill", d => color2(d.data[0]))
.attr("d", a => arc2(a));
// Your marks here
svg
.selectAll(".label")
.data(arcs)
.join("text")
.attr("class", "label")
.attr("fill", "#333")
.attr("transform", a => `translate(${arc.centroid(a)})`)
.style("font-size", "10pt")
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.call(text =>
text
.append("tspan")
.style("font-weight", "bold")
.attr("x", 0)
.text(a => a.data[0])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("y", "1em")
.text(a => a.data[1] + '%')
);
// Your marks here
svg
.selectAll(".label2")
.data(arcs2)
.join("text")
.attr("class", "label2")
.attr("fill", "#333")
.attr("transform", a => `translate(${arc2.centroid(a)})`)
.style("font-size", "10pt")
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.call(text =>
text
.append("tspan")
// .style("font-weight", "bold")
.attr("x", 0)
.text(a => a.data[1])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("y", "1em")
.text(a => a.data[0])
);
return svg.node();
}
color2 = (d) => d == "" ? "#EDF5FF" : color(d);
arc2 = d3
.arc()
.innerRadius(radius * 0.1)
.outerRadius(radius * 0.55)
arcs2 = d3
.pie()
.padAngle(0.01)
.value(d => d[1])([["Steps", 1, "6,800"], ["Sleep", 1, "7 Hours"], ["Active Minutes",1, "30"]])
groupedData = [["Steps", 120], ["Sleep", 110], ["Active Minutes", 70]]
arcs = d3
.pie()
.padAngle(0.01)
.value(d => d[1])(groupedData)
arc
arc = d3
.arc()
.innerRadius(radius * 0.6)
.outerRadius(radius * 0.9)
html`<svg><path d="${arc(arcs[0])}" stroke="black" /></svg>`
radius = 180; // Math.min(width / 2, height / 2)
color = d3.scaleOrdinal(d3.schemePastel1).domain(data.map(d => d[colAttr]))
colAttr = "Species"
height = 400
margin = ({ left: 50, top: 30, right: 20, bottom: 20 })
md`## Data`
data = vegaDatasets["penguins.json"]()
vegaDatasets = require("vega-datasets@2")
d3 = require("d3@6")
import { groupToStack } from "@john-guerra/d3-stack-with-d3-group"
import { swatches } from "@d3/color-legend"
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.
