I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
chart = {
let sl;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const margin = { left: 40, bottom: 40, top: 10, right: 10 };
const x = (d) => d["economy (mpg)"];
const y = (d) => d["displacement (cc)"];
const data = cars.filter(
(d) =>
x(d) !== undefined && x(d) !== null && y(d) !== undefined && y(d) !== null
);
const xScale = d3
.scaleLinear()
.domain([0, d3.max(data, x)])
.range([0, width - margin.left - margin.right])
.nice();
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data, y)])
.range([height - margin.top - margin.bottom, 0]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g").call(d3.axisLeft(yScale));
g.append("g")
.attr("transform", `translate(0, ${yScale.range()[0]})`)
.call(d3.axisBottom(xScale));
g.selectAll("circle")
.data(data)
.attr("stroke", "black")
.join("circle")
.attr("cx", (d) => xScale(x(d)))
.attr("cy", (d) => yScale(y(d)))
.attr("r", 3)
.append("title")
.text((d) => d.name);
const gLabels = g.append("g").attr("id", "labels");
// yield Object.assign(svg.node(), { sl });
if (!useSmartLabels) {
g.selectAll("text.label")
.data(data)
.attr("stroke", "black")
.join("text")
.attr("class", "label")
.style("font", "10px sans-serif")
.attr("x", (d) => xScale(x(d)))
.attr("y", (d) => yScale(y(d)))
.text((d) => d.name);
} else {
sl = smartLabels(data, {
target: gLabels,
label: (d) => d.name,
x: (d) => xScale(x(d)),
y: (d) => yScale(y(d)),
width: width - margin.left - margin.right,
height: height - margin.top - margin.bottom,
labelsInCentroids,
threshold,
showVoronoi: showVoronoi,
showAnchors: showAnchors,
font: (
d //Draw one car larger than the others for highlighting
) =>
labelsToHighlight.includes(d.name)
? "18pt sans-serif"
: "10pt sans-serif",
onHoverFont: (d) =>
labelsToHighlight.includes(d.name)
? "bold 18pt sans-serif"
: "bold 10pt sans-serif",
alwaysShow: (d) => labelsToHighlight.includes(d.name)
});
}
return Object.assign(svg.node(), { sl });
}
smartLabels(randomData, {
x: (d) => d.x,
y: (d) => d.y,
label: (d) => d.label,
showVoronoi,
showAnchors,
width,
height ,
showPoints:true,
// renderer: "canvas"
})
smartLabels = require("smart-labels@0.0.12")
// smartLabels = {
// try {
// console.log("Trying to load module local");
// return await require(`http://localhost:8080/dist/smartLabels.js?${Date.now()}`);
// } catch (e) {
// console.log("Failed. Trying to load module from NPM");
// return await require("smart-labels@0.0.5");
// }
// }
randomData = {
const randomX = d3.randomNormal(width / 2, 80);
const randomY = d3.randomNormal(height / 2, 80);
return d3
.range(200)
.map((d, i) => ({ x: randomX(), y: randomY(), label: `Point ${i}` }))
.filter((d) => 0 <= d.x && d.y <= width && 0 <= d.y && d.y <= height);
}
height = 600
d3 = require("d3@7")
import {occlusion} from "@fil/occlusion"
import {multiAutoSelect} from "@john-guerra/multi-auto-select"
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.
