30:Te02,jenks = { function jenks(data, n_classes) { if (n_classes > data.length) return null; data = data.slice().sort(function(a, b) { return a - b; }); var matrices = getMatrices(data, n_classes); var lower_class_limits = matrices.lower_class_limits; // extract n_classes out of the computed matrices return breaks(data, lower_class_limits, n_classes); } /** * the second part of the jenks recipe: take the calculated * matricesand derive an array of n breaks. */ function breaks(data, lower_class_limits, n_classes) { var k = data.length - 1, kclass = [], countNum = n_classes; // the calculation of classes will never include the upper and // lower bounds, so we need to explicitly set them kclass[n_classes] = data[data.length - 1]; kclass[0] = data[0]; // the lower_class_limits matrix is used as indexes into itself // here: the `k` variable is reused in each iteration. while (countNum > 1) { kclass[countNum - 1] = data[lower_class_limits[k][countNum] - 2]; k = lower_class_limits[k][countNum] - 1; countNum--; } return kclass; } /** * Compute the matrices required for Jenks breaks. These matrices * can be used for any classing of data with `classes <= n_classes` */ function getMatrices(data, n_classes) { // * lower_class_limits (LC): optimal lower class limits // * variance_combinations (OP): optimal variance combinations for all classes var lower_class_limits = [], variance_combinations = [], i, j, variance = 0; // Initialize matrix's for (i = 0; i < data.length + 1; i++) { var tmp1 = [], tmp2 = []; for (j = 0; j < n_classes + 1; j++) { tmp1.push(0); tmp2.push(0); } lower_class_limits.push(tmp1); variance_combinations.push(tmp2); } for (i = 1; i < n_classes + 1; i++) { lower_class_limits[1][i] = 1; variance_combinations[1][i] = 0; for (j = 2; j < data.length + 1; j++) { variance_combinations[j][i] = Infinity; } } for (var l = 2; l < data.length + 1; l++) { var sum = 0, sum_squares = 0, w = 0, i4 = 0; for (var m = 1; m < l + 1; m++) { var lower_class_limit = l - m + 1, val = data[lower_class_limit - 1]; // here we're estimating variance for each potential classing // of the data, for each potential number of classes. `w` // is the number of data points considered so far. w++; sum += val; sum_squares += val * val; variance = sum_squares - (sum * sum) / w; i4 = lower_class_limit - 1; if (i4 === 0) { continue; } for (j = 2; j < n_classes + 1; j++) { // if adding this element to an existing class // will increase its variance beyond the limit, break // the class at this point, setting the lower_class_limit // at this point. if ( variance_combinations[l][j] >= variance + variance_combinations[i4][j - 1] ) { lower_class_limits[l][j] = lower_class_limit; variance_combinations[l][j] = variance + variance_combinations[i4][j - 1]; } } } lower_class_limits[l][1] = 1; variance_combinations[l][1] = variance; } return { lower_class_limits: lower_class_limits, variance_combinations: variance_combinations }; } return jenks; }31:[] 2e:{"title":"NZZ Utils","cells":[{"id":0,"value":"md`# NZZ Utils`","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"nzz = {\n return {\n svgToCanvas: svgToCanvas,\n formatNumber: formatNumber,\n conf: conf,\n last: last\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Format numbers`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"function formatNumber(num) {\n num = num + '';\n if (num.length <= 4) {\n return num;\n } else {\n let numArray = num.split(\"\");\n for (let i = num.length; i > 0; i = i - 3) {\n numArray[i - 1] = numArray[i - 1] + \" \";\n }\n return numArray.join(\"\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"formatNumber(100000000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`## SVG → Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function svgToCanvas(svg, scale = 1) {\n return new Promise(resolve => {\n const svgSize = svg.viewBox.baseVal;\n const width = svgSize.width * scale;\n const height = svgSize.height * scale;\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n const image = new Image();\n image.src = `data:image/svg+xml;base64,${btoa(\n unescape(encodeURIComponent(svgString))\n )}`;\n image.onload = () => {\n const context = DOM.context2d(width, height, 1);\n context.drawImage(\n image,\n 0,\n 0,\n svgSize.width * scale,\n svgSize.height * scale\n );\n resolve(context.canvas);\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`## Generate a Gif`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`\nArguments:\n* A list of values, that identifiy the individual frames\n* A draw-Function that takes an entry from this list and a scale\n\nThe draw-function should return an SVG\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"async function generateGIF(\n frames = [],\n drawFunction,\n options = {\n width: 400,\n framesPerSecond: 5,\n debug: false\n }\n) {\n let scaling = options.width / 400; // scale == 1 is set to 400px\n const gif = new GifCompiler({ workers: 5 });\n const scale = 2;\n\n let nthFrame = 1;\n let lastFrame = frames.length - 1;\n\n for (let i = lastFrame % nthFrame; i <= lastFrame; i = i + nthFrame) {\n if (options.debug) {\n console.log(i);\n }\n let cv = await svgToCanvas(await drawFunction(frames[i], scaling), 2);\n\n if (options.debug) {\n console.log(cv);\n }\n\n if (i == lastFrame) {\n gif.addFrame(cv, 1000 / options.framesPerSecond);\n gif.addFrame(cv, 1500);\n } else {\n gif.addFrame(cv, 1000 / options.framesPerSecond);\n }\n if (options.debug) {\n console.log(gif);\n }\n }\n return gif.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"jonas = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"conf = {\n return {\n w: 360,\n h: 300,\n top: 10,\n right: 10,\n bottom: 20,\n left: 20,\n font: \"GTAmerica-Regular, GTAmericaRegular, GT America\",\n y: { labels: { size: 12 }, ticks: { color: \"#a6a6a6\" } },\n x: { labels: { size: 12 } },\n line: { stroke: \"pink\", strokeWidth: 1.5 }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"last = function(list) {\n if (list) {\n return list[list.length - 1];\n } else return undefined;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`## Jenks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Als Input nimmt die Jenks-Funktion ein Array mit Daten und die gewünschte Anzahl Klassen. Sie gibt eine Array mit den Bounds zurück`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"jenks([1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 8, 9], 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"nzz_farben = await d3.json(\n \"https://service.sophie.nzz.ch/bundle/sophie-color%2523master,sophie-viz-color%2523master.vars.json\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"colors = d3.json(\n \"https://service.sophie.nzz.ch/bundle/sophie-color%2523master,sophie-viz-color%2523master.vars.json\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"import { GifCompiler } from '@rkaravia/gifcompiler'","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}