The avatar for @kalmdown
kalmdown
Learning...
Published
Edited
Jun 3, 2021
1 fork
4 stars
2
Insert cell
md`# UX Coverage`
Insert cell
<div class='frame'>
<div
style ='
display: grid;
gap: ${gap}em;
grid-template-columns: 30% 22% 48%'>
<div style='align-self: center; background-color: #FFFFFF; padding: .25em'>${totals_donut}</div><!--#CBDDE1 ${totals_donut} -->
<div class='vcentered' style='background-color: #FFFFFF; padding: .25em'>${legend}</div> <!-- ${legend} -->
<div style='background-color: #FFFFFF; padding: .25em'>${multiples}</div> <!-- ${multiples} -->
</div>
</div>
<!-- https://www.w3schools.com/css/css_grid.asp -->
Insert cell
Insert cell
toolTip = d3.select("body").append("div").attr("class", "toolTip")
Insert cell
function arcMouseOver(caption, value, pageX, pageY) {
toolTip.style("left", pageX + 18 + "px")
.style("top", pageY + 18 + "px")
.style("display", "block")
.html(`${caption} <strong>${value}%</strong>`);
}
Insert cell
function hover(event, d) {
const className = event.srcElement.nodeName == "DIV" ? event.srcElement.className : event.srcElement.className.baseVal;
d3.selectAll(`path.${className}`)
.attr("stroke", "white")
.attr("stroke-width", 2)
d3.selectAll(`div.${className}`)
.style("background", `rgba(0,0,0,.05`)
}
Insert cell
function mouseOut(event, d) {
const className = event.srcElement.nodeName == "DIV" ? event.srcElement.className : event.srcElement.className.baseVal;
d3.selectAll(`path.${className}`)
.attr("stroke", "rgba(0,0,0,0")
.attr("stroke-width", 2)
d3.selectAll(`div.${className}`)
.style("background", "rgba(0,0,0,0)")

toolTip.style("display", "none"); // Hide toolTip
}
Insert cell
Insert cell
totals_donut = {

// viewof totals_donut = {
// const createElement = function() {
const container = d3.create("div").attr("class", "totals");

const cells = container
.selectAll("div")
.data(peoples_projects)
.enter()
.filter((d) => d.name == `Totals`)
.append("div")
.attr("class", "cell shadow")
.append("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);

cells
.selectAll("path")
.data((d) => pie(d.projects))
.join("path")
.attr("class", (d) => cleanClassName(d.data.project), "toolTip")
.attr("fill", (d) => color(d.data.project))
.attr("d", arc2(size))
.on("mousemove", (event, d) => { arcMouseOver(d.data.project, Math.round(d.data.value / total * 100, 0), event.pageX, event.pageY); })
.on("mouseover", hover)
.on("mouseout", mouseOut)
cells
.append("text")
.attr("class", "totalsLabel")
.attr("x", 0)
.attr("y", 0)
.attr("dy", "0.25em")
.text((d) => d.name)
.attr("text-anchor", "middle");

container.selectAll(".label").call(wrap, 11);

return container.node();
// }

// const view = createElement(); // This gets displayed as the cell output

// view.value = createElement; // this is the actual cell value

// return view;
}
Insert cell
multiples = {
const size = 80;
const container = d3.create("div").attr("class", "multiples");

const cells = container
.selectAll("div")
.data(peoples_projects)
.enter()
.filter((d) => d.name != `Totals`)
.append("div")
.attr("class", "cell shadow")
.append("svg")
.attr("width", size)
.attr("height", size)
.attr("viewBox", [-size / 2, -size / 2, size, size]);

cells
.selectAll("path")
.data((d) => pie(d.projects))
.join("path")
.attr("class", (d) => cleanClassName(d.data.project), "toolTip")
.attr("fill", (d) => color(d.data.project))
.attr("d", arc2(size))
.on("mousemove", (event, d) => { arcMouseOver(d.data.project, d.data.value, event.pageX, event.pageY); })
.on("mouseover", hover)
.on("mouseout", mouseOut)

cells
.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", 0)
.attr("dy", -0.35)
.text((d) => d.name)
.attr("text-anchor", "middle");

container.selectAll(".label").call(wrap, 9);

return container.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function basics(temp) {
let remove_header = temp.shift();
let remove_total = temp.pop();
return temp;
}

// https://observablehq.com/@mmakutonin/lesson-17-let-and-const
Insert cell
total = totals.reduce(add)
Insert cell
add = (a,b) => a + b
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`# Appendix, Includes, Imports and more`
Insert cell
Tooltips - https://observablehq.com/@benoldenburg/patterns-tooltip
Insert cell
data = csv_data.filter(d => d.Individual != null)
Insert cell
csv_data = d3.csvParse(await FileAttachment("UX Coverage by Portfolio@7.csv").text(), d3.autoType)
Insert cell
d3 = require("d3@6")
Insert cell
labelHeight = 14
Insert cell
size = 300
Insert cell
height = size
Insert cell
width = size
Insert cell
gap = .1
Insert cell

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.
Learn more