Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
Public
Edited
Nov 3, 2022
1 star
function changeSVG() {
// original width of SVG
const svg_original_w = document.getElementById("mySVG").getAttribute("width");
// current width of SVG -- control by CSS and `scale`
const svg_w = document.getElementById("mySVG").getBoundingClientRect().width;
// ratio of scale
const ratio = Math.round((100 * svg_w) / svg_original_w) / 100;
// update font size to selection
d3.select("#mySVG")
.selectAll("text")
.style("font-size", (d) => Math.round((100 * fontSize) / ratio) / 100);
// update stroke size to selection
d3.select("#mySVG")
.selectAll("path")
.style("stroke-width", (d) => Math.round((100 * strokeSize) / ratio) / 100);
}
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.
