Mainly coding for fun these days!
chart = {
let parent = this;
// if (!parent) {
parent = document.createElement("div");
const svg = d3.select(DOM.svg(width, height));
const g = svg
.append("g")
.attr("transform", (d, i) => `translate(${margin.left} ${margin.top})`);
const members = svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(filteredData)
.enter()
.append("rect")
.attr("x", (d) => x(d.start))
.attr("y", (d) => y(d.name))
.attr("rx", 3) //function (d){ if(d.country === "Secretary") {return 0} else {return 3}})
.attr("fill", (d) => color(d.region))
// .attr("opacity", (d) => opacity(d.count))
.attr("height", y.bandwidth())
.attr("width", (d) => x(d.end) - x(d.start));
const places = svg.append('g')
.selectAll("circle")
.data(filteredData.filter(d => d.country === "Secretary"))
// .data(filteredData.filter(d => d.count === 1 && d.country === "Secretary"))
.enter()
.append("circle")
.attr('cx', (d) => x(d.start + (d.end-d.start)/2))
.attr('cy', (d) => y(d.name) + y.bandwidth()/2)
.attr('r', 6) //function (d){ if(d.country === "Secretary") {return 0} else {return 3}})
.attr('stroke', 'white')
.attr("fill", "steelblue");
// .attr("opacity", (d) => opacity(d.count))
// .attr("height", y.bandwidth())
// .attr("width", (d) => x(d.end) - x(d.start));
const tooltip = d3.select(document.createElement("div")).call(createTooltip);
const line = svg
.append("line")
.attr("y1", margin.top - 10)
.attr("y2", height - margin.bottom)
.attr("stroke", "pink")
.style("pointer-events", "none");
// members.attr("transform", (d, i) => `translate(0 ${y(i)})`);
members
.each(getRect)
.on("mouseover", function (d) {
d3.select(this).select("rect").attr("fill", "white");
tooltip.style("opacity", 1).html(getTooltipContent(d));
})
.on("mouseleave", function (d) {
d3.select(this).select("rect").attr("fill", color(d.region));
tooltip.style("opacity", 0);
});
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.on("mousemove", function (d) {
let [x, y] = d3.mouse(this);
line.attr("transform", `translate(${x} 0)`);
y += 20;
if (x > width / 2) x -= 100;
tooltip.style("left", x + "px").style("top", y + "px");
});
parent.appendChild(svg.node());
parent.appendChild(tooltip.node());
parent.groups = members;
//let offset = height - margin.bottom / 3 + 50;
let offset = margin.top + 420;
svg
.append("text")
.attr("class", "header")
.attr("x", margin.left)
.attr("y", offset - 350)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("font-size",18)
.style("font-weight", 400)
.style("text-transform", "uppercase")
.html("")
// .append("tspan")
.attr("font-weight", 700)
.text("circle denotes Company Secretary");
svg
.append("text")
.attr("class", "header")
.attr("x", margin.left)
.attr("y", offset - 180)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("font-size", `${width / 45}px`)
.style("font-weight", 700)
.html(d3.format(".0%")(onetimers))
// .append("tspan")
.attr("font-weight", 400)
.text("");
svg
.append("text")
.attr("class", "header")
.attr("x", margin.left)
.attr("y", offset - 140)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("font-size", `${width / 45}px`)
.style("font-weight", 400)
.html("")
//.append("tspan")
.attr("font-weight", 400);
//.text("almost half were elected in the past 5 years");
svg
.append("text")
.attr("class", "header")
.attr("x", margin.left)
.attr("y", offset - 100)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("font-size", `${width / 45}px`)
.style("font-weight", 400)
.html("")
//.append("tspan")
.attr("font-weight", 400);
//.text("almost half were elected in the past 5 years");
g.append("g")
.attr("transform", `translate(${margin.left / 3 - 5},${-15})`)
.append(() =>
legend({
color: color,
title: "",
width: 300
})
);
svg
.append("text")
.attr("class", "legend_footer")
.attr("x", width - margin.left)
.attr("y", height - margin.bottom / 3)
.text(footer);
// } else {
// const civs = d3.selectAll(".civ");
// civs
// .data(filteredData, (d) => d.region)
// .transition()
// // .delay((d,i)=>i*10)
// .ease(d3.easeCubic)
// .attr("transform", (d, i) => `translate(0 ${y(i)})`);
// }
return parent;
}
color = d3.scaleOrdinal(colscheme).domain(regions)
onetimers = Number(once[0].all) / Number(all[0].all)
data
Type SQL, then Shift-Enter. Ctrl-space for more options.
import { checkbox, select } from "@jashkenas/inputs"
import { legend, swatches } from "@d3/color-legend"
x.invert = invertOrdinal
function invertOrdinal(val, cmpFunc) {
cmpFunc = cmpFunc || function (a, b) {
return (a >= b);
};
const scDomain = this.domain();
let scRange = this.range();
if (scRange.length === 2 && scDomain.length !== 2) {
// Special case, interpolate range vals
scRange = d3.range(scRange[0], scRange[1], (scRange[1] - scRange[0]) / scDomain.length);
}
const bias = scRange[0];
for (let i = 0, len = scRange.length; i < len; i++) {
if (cmpFunc(scRange[i] + bias, val)) {
return scDomain[Math.round(i * scDomain.length / scRange.length)];
}
}
return this.domain()[this.domain().length - 1];
}
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.
