We create visual and data-driven stories for
@nzz – and build tools that power them.
Published
Edited
Aug 10, 2020
Importers
1 star
md`# NZZ Utils`
nzz = {
return {
svgToCanvas: svgToCanvas,
formatNumber: formatNumber,
conf: conf,
last: last
};
}
md`## Format numbers`
function formatNumber(num) {
num = num + '';
if (num.length <= 4) {
return num;
} else {
let numArray = num.split("");
for (let i = num.length; i > 0; i = i - 3) {
numArray[i - 1] = numArray[i - 1] + " ";
}
return numArray.join("");
}
}
formatNumber(100000000)
function svgToCanvas(svg, scale = 1) {
return new Promise(resolve => {
const svgSize = svg.viewBox.baseVal;
const width = svgSize.width * scale;
const height = svgSize.height * scale;
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svg);
const image = new Image();
image.src = `data:image/svg+xml;base64,${btoa(
unescape(encodeURIComponent(svgString))
)}`;
image.onload = () => {
const context = DOM.context2d(width, height, 1);
context.drawImage(
image,
0,
0,
svgSize.width * scale,
svgSize.height * scale
);
resolve(context.canvas);
};
});
}
async function generateGIF(
frames = [],
drawFunction,
options = {
width: 400,
framesPerSecond: 5,
debug: false
}
) {
let scaling = options.width / 400; // scale == 1 is set to 400px
const gif = new GifCompiler({ workers: 5 });
const scale = 2;
let nthFrame = 1;
let lastFrame = frames.length - 1;
for (let i = lastFrame % nthFrame; i <= lastFrame; i = i + nthFrame) {
if (options.debug) {
console.log(i);
}
let cv = await svgToCanvas(await drawFunction(frames[i], scaling), 2);
if (options.debug) {
console.log(cv);
}
if (i == lastFrame) {
gif.addFrame(cv, 1000 / options.framesPerSecond);
gif.addFrame(cv, 1500);
} else {
gif.addFrame(cv, 1000 / options.framesPerSecond);
}
if (options.debug) {
console.log(gif);
}
}
return gif.render();
}
jonas = 1
conf = {
return {
w: 360,
h: 300,
top: 10,
right: 10,
bottom: 20,
left: 20,
font: "GTAmerica-Regular, GTAmericaRegular, GT America",
y: { labels: { size: 12 }, ticks: { color: "#a6a6a6" } },
x: { labels: { size: 12 } },
line: { stroke: "pink", strokeWidth: 1.5 }
};
}
last = function(list) {
if (list) {
return list[list.length - 1];
} else return undefined;
}
jenks([1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 8, 9], 3)
nzz_farben = await d3.json(
"https://service.sophie.nzz.ch/bundle/sophie-color%2523master,sophie-viz-color%2523master.vars.json"
)
colors = d3.json(
"https://service.sophie.nzz.ch/bundle/sophie-color%2523master,sophie-viz-color%2523master.vars.json"
)
import { GifCompiler } from '@rkaravia/gifcompiler'
d3 = require("d3")
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.
