2c:null 2d:["$","title",null,{"children":"Gridify | liris | Observable"}] 32:T70e,function stacks(suggested_trees, options = { shift: 4 }) { const w = options.w || 80, h = options.h || 50; const s = DOM.svg( 20 + suggested_trees.length * (w * 1.25), h + options.shift * 8 + 20 ); d3.select(s).append("style").text(` .stack { cursor: pointer; } .preset g g:last-of-type rect {fill: #eee;} .hover g g:last-of-type rect {fill: ${d3.rgb("lightblue").darker(-1) + ""}} .leaf rect {fill: lightblue !important;} `); const pack = d3 .select(s) .selectAll("g") .data(suggested_trees) .enter() .append("g") .classed("stack", true) .style("shape-rendering", "crispEdges") .attr("transform", (_, i) => `translate(${[20 + w * 1.25 * i, 3]})`) .classed("preset", (_, i) => i === +mutable tree_option) .on("click", (_, i) => { delete s.value.temp; mutable tree_option = i; pack.classed("preset", (_, i) => i === +mutable tree_option); pack.classed("hover", false); }) .on("mouseover", (_, i, e) => { d3.select(e[i]).classed("hover", true); if (s.value.temp != i) { s.value.temp = i; s.dispatchEvent(new CustomEvent("input")); } }) .on("mouseout", () => { pack.classed("hover", false); delete s.value.temp; // s.value.leaf = +tree_option; s.dispatchEvent(new CustomEvent("input")); }); pack.append("g").classed("layers", true); pack .append("text") .attr("pointer-events", "none") .attr("x", w / 2) .attr("y", 5 + h / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-weight", "bold") .style("font-size", `${w * (28 / 80)}px`) .style("font-family", "sans-serif") .text((d, i) => "#" + i); s.value = { leaf: 0, stack: 0 }; return s; }33:T413,{ const options = { shift: 3, h: 20, w: 24 }, w = options.w, h = options.h, s = stackview, pack = d3.select(s).selectAll(".layers"); const layers = pack .attr( "transform", (_, i) => `translate(${[0, paths[i].length * options.shift]})` ) .html("") .selectAll("g") .data((_, i) => paths[i] .slice() .reverse() .map((d, j) => ({ i, d })) ) .enter() .append("g") .attr( "transform", (_, i) => `translate(${[2 + i * 0, 2 - i * options.shift]})` ); // .attr("pointer-events", "none"); // setTimeout(function() { layers .on("mouseover", (_, i, e) => { d3.selectAll(".leaf").classed("leaf", false); d3.select(e[i]).classed("leaf", true); }) .on("mouseout", () => { d3.selectAll(".leaf").classed("leaf", false); }); //}, 100); layers .append("rect") .attr("width", w) .attr("height", h) .attr("stroke", "black") .attr("stroke-width", "1") .attr("fill", "white"); }34:T7d8,tidy = { const source = selected.data, tidy = []; for (let i = 0; i < source.length; i++) { const d = source[i]; d.index = i; if (d.x1 === undefined) { const p1 = projection([d.start_longitude, d.start_latitude]) || [ Math.random(), Math.random() ], p2 = projection([d.end_longitude, d.end_latitude]) || [ Math.random(), Math.random() ]; d.x1 = p1[0]; d.y1 = p1[1]; d.x2 = p2[0]; d.y2 = p2[1]; // fix bounds (all d3 projections are in [960, 500]). for (const o of ["x1", "x2"]) d[o] = Math.max(-10, Math.min(970, d[o])); for (const o of ["y1", "y2"]) d[o] = Math.max(-10, Math.min(510, d[o])); } tidy.push(d); } // Compute ckmeans thresholds for quantitative clusters tidy.thresholds = {}; od.raw.r.attributes .filter(attr => attr.type === "quantitative") .forEach(attr => { const values = tidy .map(d => d[attr.name]) .filter(d => Math.abs(d) < +Infinity), // remove Infinity extent = d3.extent(values), sample = d3.shuffle(values).slice(0, 1000); // ckmeans will not consume too many values const thresholds = sample.length ? simple .ckmeans(sample, Math.min(values.length, clusterlen)) .map(v => d3.max(v)) : []; tidy.thresholds[attr.name] = [extent[0], ...thresholds, extent[1]]; tidy.forEach(d => { d["cluster:" + attr.name] = d3.scan( thresholds.map(t => d[attr.name] >= t) ); }); }); // x/y extent for the map projection const xExtent = d3.extent(tidy.flatMap(d => [d.x1, d.x2])), yExtent = d3.extent(tidy.flatMap(d => [d.y1, d.y2])); if ((!xExtent[0] && !xExtent[1]) || (!yExtent[0] && !yExtent[1])) { mutable ERROR = md`# Error: No O/D coordinates found.`; } else { mutable ERROR = md``; } tidy.extent = [[xExtent[0], yExtent[0]], [xExtent[1], yExtent[1]]]; return tidy; }35:T603,/* adds groupby and gridby functions to the json structure */ function addFunctions(json) { return { width: json.width || width, height: json.height || json.width || width, tree: json.tree.map(t => { const margin = t.margin || 0; const padding = t.padding || 0; if (t.cluster) t.group = "cluster:" + t.cluster; // todo try...catch if (t.group.match(/=>/) || t.group.match(/function[(]/)) t.group = eval("(" + t.group + ")"); const mode = t.gridding || "grid", gridby = (g, root, i) => { const gridder = d3 .gridding() .mode(mode) .size([g.width, g.height]) .margin(margin) .padding(padding); ops(mode).forEach(op => { const attr = t[op], aggregation = t[op + "_aggregation"] || "mean" /* "mean" or "sum" ? */; if (attr) { const stats = get_stats(root, aggregation + "_" + attr, i + 1), extent = d3.extent(stats); if (extent[0] !== undefined) { const scale = d3.scaleLinear().domain(extent); gridder[op](d => scale(d[aggregation + "_" + attr])); } } }); return gridder; }, groupby = t.group ? typeof t.group === "function" ? t.group : d => d[t.group] : d => 0; return Object.assign({}, t, { groupby, gridby }); }) }; }36:T6e4,function get_gridded(structure) { structure = addFunctions(structure); function recurse_group(l, g) { const groups = [...d3.group(g, structure.tree[l].groupby)]; for (const h of groups) { if (l === structure.tree.length - 1) { h.nodes = h[1]; } else { h[1] = recurse_group(l + 1, h[1]); h.nodes = d3.merge(h[1].map(d => d.nodes)); } // aggregates h.count = h.nodes.length; for (const [name, desc] of attributes) { if (desc.type === "quantitative") { h["sum_" + name] = d3.sum(h.nodes, d => d[name]); h["mean_" + name] = h["sum_" + name] / h.count; } else { h["sum_" + name] = h["mean_" + name] = h.count; } h["count_" + name] = h.count; h["distinct_" + name] = h["count_" + name] === 1 ? 1 : d3.group(h.nodes, d => d[name]).size; } } return groups; } function recurse_cells(l, g, root, i) { const s = structure.tree[l], sort = s.sort === "desc" ? d3.descending : d3.ascending; // the key is g[0] // the contents is g[1] g[1] = [...g[1]].sort((a, b) => sort(a[0], b[0])); g[1] = s.gridby(g, root, i)(g[1]); // copy absolute positions (ax,ay) in each cell g[1].forEach(d => { d.ax = (g.ax || 0) + d.x; d.ay = (g.ay || 0) + d.y; }); // recurse if (l + 1 in structure.tree) { g[1] = g[1].map(g => recurse_cells(l + 1, g, root, i + 1)); } return g; } const groups = recurse_group(0, tidy_filtered); const g = [{}, groups]; const w = structure.width || width, h = structure.height || w; g.width = w; g.height = h; const r = recurse_cells(0, g, g, 0)[1]; r.width = w; r.height = h; return r; }37:T4e9,paint = { const last = tree.tree[tree.tree.length - 1], attribute = last.cluster || last.group, attribute_type = last.cluster && tidy.thresholds[last.cluster] ? { type: "cluster" } : attributes.get(attribute) || {}; return attribute === "selected" ? { type: "ordinal", color: d3.scaleOrdinal(["#666", "#c33"]).domain(["", "selected"]) } : attribute_type.type === "categorical" ? { type: "ordinal", color: d3.scaleOrdinal(d3.schemeCategory10) } : attribute_type.type === "quantitative" ? { type: "linear", color: d3 .scaleSequential(d3.interpolateCool) .domain(attribute_type.extent), domain: attribute_type.extent } : attribute_type.type === "cluster" ? { type: "threshold", color: d3 .scaleThreshold() .domain(tidy.thresholds[attribute] || []) .range( d3 .range(clusterlen + 1) .map(t => d3.interpolateWarm(t / clusterlen)) ), domain: [0, clusterlen] } : { type: attribute_type.type + "???", color: d3.scaleOrdinal(d3.schemePaired), domain: attribute_type.extent || [0, 1] }; }38:T84f,function chartcanvas(structure, context) { const last = structure.tree[structure.tree.length - 1]; last.gridding = "central"; const gridded = get_gridded(structure); context = context || DOM.context2d(gridded.width, gridded.height); d3.select(context.canvas).style("opacity", 0.5); var minW = gridded.width, minH = gridded.height, maxN = 1, nLayers = 0; const root = ["root", gridded]; root.width = gridded.width; root.height = gridded.height; setTimeout(() => { d3.select(context.canvas).style("opacity", 1); context.clearRect(0, 0, root.width, root.height); domains_recurse(root, 0); draw(root, 0); }, 10); setTimeout(() => { const panel = panelSVG("left"), svg = d3.select(panel.svg); svg.html(""); draw_grid(root, svg); }, 100); function domains_recurse(g, depth) { if (depth < structure.tree.length - 1) { if (unique_scale) { for (const d of g[1]) { minW = Math.min(d.width, minW); minH = Math.min(d.height, minH); } } for (const d of g[1]) { domains_recurse(d, depth + 1); } } // leaves! else { maxN = Math.max(maxN, g.count); nLayers += g[1].length; } } function draw(g, depth) { if (depth < structure.tree.length - 1) { for (const d of g[1]) { context.save(); context.translate(d.x, d.y); draw(d, depth + 1); context.translate(-d.x, -d.y); context.restore(); } } // leaves! else { // each leaf d is a multiple in a list of small multiples // "une carte dans une collection de cartes" // et fontionne en layers, qui correspondent à la dernière étape du partitionnement // d[0] = key used to group // d[1] = list of OD elements // .width,.height, .cx etc: gridding properties const w = unique_scale ? minW : g.width, h = unique_scale ? minH : g.height; const layers = g[1]; // minimap_scatterplot({ w, h, layers, context, last, maxN }); minimap_geo({ w, h, layers, context, last, maxN }); } } }39:T5c1,function chartsvg(structure) { const last = structure.tree[structure.tree.length - 1]; last.gridding = "central"; const gridded = get_gridded(structure); var minW = gridded.width, minH = gridded.height, maxN = 1, nLayers = 0; const root = ["root", gridded]; root.width = gridded.width; root.height = gridded.height; const s = d3.select(svg`skipping table view for ${rawdata.length} items`;\n d.value = { data: rawdata };\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2864,"value":"viewof use_table = checkbox([\"Activate table view\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"viewof load_limit = select({\n title: \"Load limit\",\n options: [\n { label: \"100\", value: 100 },\n { label: \"1,000\", value: 1000 },\n { label: \"10,000\", value: 10000 },\n { label: \"50,000\", value: 50000 },\n { label: \"100,000\", value: 100000 },\n { label: \"500,000\", value: 500000 },\n { label: \"1,000,000\", value: 1000000 },\n { label: \"no limit\", value: Infinity }\n ],\n value: 10000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1554,"value":"viewof clusterlen = select({\n options: [4, 9, 16, 25, 36, 49, 64, 81, 100],\n description: \"# of k-means clusters for quantitative dimensions\",\n value: 16\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"od.doc","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4415,"value":"bookmark = md`👉 [Bookmark ${ui_dataset}/${tree_option}](${\n document.referrer.split(\"?\")[0]\n}?ui_dataset=${ui_dataset}&tree_option=${tree_option})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4915,"value":"stackview = stacks(suggested_trees, { shift: 3, h: 20, w: 24 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4527,"value":"viewof reference_stack = stackview","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4785,"value":"{\n d3.select(ui)\n .select(\"#presets\")\n .html(\"\")\n .node()\n .appendChild(stackview);\n yield md`inserted presets at ${Date.now()}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4581,"value":"{\n const s = sequence;\n\n const stages = d3.select(s).selectAll(\"g.stage\");\n stages\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"y\", 10)\n .text((scene, i) =>\n i == 0\n ? \"current\"\n : i === paths[reference_stack.stack].length\n ? `preset #${reference_stack.stack}`\n : \"\"\n );\n\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4651,"value":"md`-----\n\n# CODE`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4577,"value":"md`## Levenshtein`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4576,"value":"import {sequence, animate} with {objects, path, sequence_width as width, sequence_height} from \"881c12067aa169ee\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4583,"value":"sequence_width = Math.min(width, 120 * (path.length + 2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4585,"value":"sequence_height = 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4709,"value":"/* outcome of the levenshtein selection */\nintermediate_tree = path[path.length - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4587,"value":"path = paths[reference_stack.stack].slice(0, 1 + reference_stack.leaf)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4589,"value":"paths = suggested_trees.map(preset =>\n levenshtein_path(\n sequence2levenshteintext(suggested_preset.tree, 1),\n sequence2levenshteintext(preset.tree, 0)\n ).map(d =>\n d\n .split(\"\")\n .map(a => objects.get(a))\n .filter(d => !!d)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4591,"value":"function sequence2levenshteintext(sequence, initial) {\n const word = [];\n for (const d of sequence) {\n let letter = objectkeys.get(d.cluster || d.group || \"?\");\n if (letter) {\n word.push(letter);\n //if (initial === 0) objects.get(letter).attribute_initial = \"0\" + letter;\n //if (initial === 1) objects.get(letter).attribute_final = \"1\" + letter;\n } else word.push(\"?\");\n }\n return word.filter(d => !!d).join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4593,"value":"objects = {\n // Levenshtein objects can be declared or not declared as attributes…\n const att = [...attributes]\n .map(d => ({ cluster: d[0] }))\n .concat(suggested_preset.tree)\n .concat(tree.tree);\n\n const uniq = d3.scaleOrdinal().range(d3.range(100));\n\n // attributes will be taken by priority: from the tree, then suggested tree, then default\n return new Map(\n att.map(d => [\n String.fromCharCode(4365 + uniq(d.group || d.cluster || \"?\")),\n d\n ])\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4595,"value":"objectkeys = new Map([...objects].map((d, i) => [d[1].n, d[0]]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4597,"value":"import {levenshtein_path} with {} from \"@fil/levenshtein-transition\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4522,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4910,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2462,"value":"mutable ERROR = md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"tree = JSON.parse(tree_definition)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1354,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3287,"value":"md`*tidy* is the data that comes out of the table view.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2897,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"attributes = {\n const m = new Map(\n od.raw.r.attributes.map(d => [\n d.name,\n Object.assign({}, d, { extent: d3.extent(tidy, e => e[d.name] || NaN) })\n ])\n );\n m.set(\"selected\", { name: \"selected\", type: \"categorical\", extent: [0, 1] });\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3298,"value":"md`## External visualisation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3309,"value":"viewof external = checkbox({\n options: [{ label: \"Bubble chart for pointing data\", value: \"bubblechart\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3301,"value":"data = (selection_refresh,\ntidy\n .filter(d => d.selected)\n .map(d => ({ name: d.username, group: d.os, value: d.dist }))\n .slice(0, 1000))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3300,"value":"import {chart as bubbleChart} with {data} from \"@d3/bubble-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3305,"value":"external && external.indexOf(\"bubblechart\") > -1 && bubbleChart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`## Tree & Gridding Definition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3788,"value":"viewof interface_tests = checkbox({\n options: [\"Interface tests (binning)\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1846,"value":"available_griddings = [\n \"central\",\n \"grid\",\n \"horizontal\",\n \"vertical\",\n \"brick\",\n \"radial\",\n \"treemap\",\n \"coordinate\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3148,"value":"mutable tidy_refresh = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3285,"value":"mutable selection_refresh = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3143,"value":"tidy_filtered = {\n tidy_refresh;\n\n if (selected_filter === \"Show only selected\" && tidy.some(d => d.selected))\n return tidy.filter(d => d.selected);\n if (selected_filter === \"Hide selected\" && tidy.some(d => !d.selected))\n return tidy.filter(d => !d.selected);\n return tidy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3959,"value":"function ops(mode) {\n return mode === \"coordinate\"\n ? [\"valueX\", \"valueY\", \"valueWidth\", \"valueHeight\"]\n : mode === \"vertical\"\n ? [\"valueWidth\"]\n : mode === \"horizontal\"\n ? [\"valueHeight\"]\n : mode === \"treemap\"\n ? [\"valueHeight\"]\n : [];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4387,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4250,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4255,"value":"exportsvg = {\n return DOM.download(\n () => {\n const { width, height } = panelContext(\"left\");\n tree.width = width;\n tree.height = height;\n const chart = chartsvg(tree).node();\n return serialize(chart);\n },\n `Gridify ${od.title} ${tree.title} ${tree.tree\n .map(d => d.cluster || d.group)\n .filter(d => !!d)\n .join(\",\")}.svg`,\n \"Download SVG\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4270,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3451,"value":"function minimap_scatterplot({ w, h, layers, context, last, maxN }) {\n const path = d3.geoPath().context(context);\n\n context.globalAlpha = tree.opacity;\n for (const d of layers) {\n context.save();\n context.translate(d.tx, d.ty);\n\n path.pointRadius(Math.sqrt(d[1].length));\n\n context.beginPath();\n path({\n type: \"Point\",\n coordinates: [0, 0]\n });\n\n context.strokeStyle = context.fillStyle = paint.color(\n d[1][0][last.cluster || last.group]\n );\n context.fill();\n context.stroke();\n context.translate(-d.tx, -d.ty);\n context.globalAlpha = 1;\n context.restore();\n }\n\n context.globalAlpha = 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3001,"value":"heatmapColor = d3.scaleSequential(d3.interpolateGnBu)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3895,"value":"gridColor = d3.scaleSequential(d3.interpolateBuPu)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2483,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"suggested_trees =\n datasets[ui_dataset].raw.r.configs || datasets[ui_dataset].raw.r.grids || []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`**TBD** The aggregate function is not serializable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"tree_test = ({\n title: \"test\",\n tree: [{ group: \"group\" }, { group: \"group\" }]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`----\n\n## UI Definitions\n\nLoad the base UI, and create the two panels with (canvas svg, html) elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {create_ui, ui_presets, ui_show, start_circle_width, end_circle_width, stroke_width, opacity, select, viewof ui_dataset} with {datasets} from \"ce3ffd0a9409d328\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"_config = JSON.stringify({ ui_dataset, ui_presets, ui_show, }, null, 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"function panelContext(which) {\n const canvas = panels[which+\"Canvas\"];\n return {\n context : canvas.getContext(\"2d\"),\n width: canvas.w,\n height: canvas.h\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"function panelSVG(which) {\n const svg = panels[which + \"SVG\"];\n return {\n svg,\n width: +svg.getAttribute(\"width\"),\n height: +svg.getAttribute(\"height\")\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"function panelHTML(which) {\n const html = panels[which + \"HTML\"];\n return {\n html,\n width: +html.w,\n height: +html.h\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`## Datasets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"import {datasets} with {src, load_limit} from \"ba3c3e015089f1f0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"simple = require(\"simple-statistics\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"rawdata = od.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"od = datasets[ui_dataset]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"DATASET_DESCRIPTION = {\n return false;\n d3.select(ui)\n .select(\".dataset_description\")\n .html(\"\")\n .node()\n .appendChild(await od.doc);\n\n d3.select(ui)\n .select(\".bottom_right\")\n .html(\"\")\n .node()\n .appendChild(tip());\n\n // yield md`☑︎ DATASET_DESCRIPTION`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"function tip() {\n return md`**Tip:** Use the “Fullscreen” option in the Observable menu (…), or the [Fullscreen bookmarklet](https://observablehq.com/@fil/fullwidth-observable).`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`## Animations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1747,"value":"viewof old__tree_option = !suggested_trees.length\n ? html``\n : select({\n options: suggested_trees\n //.concat([{ title: \"…\", value: -1 }])\n .map((d, i) => ({\n label: d.title,\n value: i\n })),\n value:\n +new URLSearchParams(html``.search).get(\"tree_option\") || 0,\n description: \"Tree\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4471,"value":"mutable tree_option =\n +new URLSearchParams(html``.search).get(\"tree_option\") || 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1877,"value":"ANIMATEHTML = {\n const panel = panelHTML(\"right\");\n\n d3.select(panel.html).html(\"\");\n\n panel.html.appendChild(viewof suggested_preset);\n\n return \"animated HTML at \" + new Date();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2832,"value":"function set_selection_highlight() {\n const l = tidy.reduce((a, b) => a + !!b.selected, 0),\n h = l > 0 && l < tidy.length;\n d3.select(ui)\n .selectAll(\"span._selected\")\n .classed(\"highlight\", h);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4089,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3329,"value":"function update_miniplot(selection) {\n selection.html(\"\").each(function(d, i, e) {\n const n = d.cluster || d.group,\n attr = attributes.get(n) || {};\n\n const scale =\n attr.type === \"quantitative\"\n ? d => +d\n : d3.scaleOrdinal().range(d3.range(200)),\n values = tidy.map(d => scale(d[n]));\n\n const s = miniplot_histogram(values /* , color*/);\n e[i].appendChild(s);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3380,"value":"function miniplot(values, color) {\n /*\naurelientabard> c’est compliqué de brancher leur binning sur la valeur du “# of k-means clusters for quantitative dimensions” ? (ou quantile)\nfil> les histograms de D3 c’est toute une histoire pour que les valeurs “tombent juste”\non pourrait remplacer par un truc de binning dont la longueur serait l’intervalle, et la hauteur l’effectif divisé par la longueur de l’intervalle\n(histoire que la surface soit proportionnelle à l’effectif)\naurelientabard> naivement ça me semble bien\n */\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3385,"value":"function miniplot_histogram(values, color) {\n return svg`${histogram(values, {\n width: 200,\n height: 50,\n xText: \"\",\n margin:{top: 0, right: 10, bottom: 0, left: 0},\n axis: false\n })}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3785,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2225,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"function init_tree(g, sequence) {\n const st = g\n .html(\"\")\n .append(\"g\")\n .attr(\"id\", \"sequence_tree\");\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"tree_color = {\n const scale = d3\n .scaleOrdinal([\"#ccc\", ...d3.schemeCategory10])\n .domain(d3.range(100));\n return scale;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2701,"value":"function select_subset(d, element, addToSubset) {\n if (selected_filter !== \"Hide selected\" && !addToSubset) {\n for (const e of tidy) e.selected = \"\";\n }\n for (const e of d[1]) for (const f of e[1]) f.selected = \"selected\";\n\n set_selection_highlight();\n if (!addToSubset) {\n d3.selectAll(\".grid rect\").classed(\"highlight\", false);\n }\n d3.select(element).classed(\"highlight\", true);\n element.parentElement.parentElement.appendChild(element.parentElement); // z-index in SVG :)\n\n mutable selection_refresh = new Date();\n if (\n selected_filter === \"Show only selected\" ||\n selected_filter === \"Hide selected\"\n ) {\n mutable tidy_refresh = new Date();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4174,"value":"// returns the stats from level i\nfunction get_stats(gridded, what, i) {\n if (i === 0) return [gridded[what]];\n else return d3.merge(gridded[1].map(h => get_stats(h, what, i - 1)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"SVGANIMATE = {\n yield \"grid\";\n width;\n\n const sequence = [tree]; //animation_sequence(true);\n\n const panel = panelSVG(\"right\");\n d3.select(panel.svg).html(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"import {histogram} from \"bd9701cc29a65196\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"LEFT = {\n const { context, width, height } = panelContext(\"left\");\n\n tree.width = width;\n tree.height = height;\n\n chartcanvas(tree, context);\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"m = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`----\n_ Do something with the attributes_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"// A very uninteresting color scale\ncolorLine = d3\n .scaleSequential(d3.interpolateSinebow)\n .domain(d3.extent(tidy.map(d => +d[attributeLine])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"colorStartPoint = d3\n .scaleSequential(d3.interpolateSinebow)\n .domain(d3.extent(tidy.map(d => +d[attributeStart])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof attributeLine = attributes_menu(\"line\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"viewof attributeStart = attributes_menu(\"start\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"function attributes_menu(what, type) {\n const attr = [...attributes.values()].filter(\n d => type === undefined || d.type === type\n );\n return select({\n description: `Choose your attribute for ${what}`,\n options: attr.map(d => ({\n value: d.name,\n label: `${d.name} (${d.type})`\n }))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"colorEndPoint = () => \"rgba(0,0,0,0)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"RIGHT = {\n const panel = panelContext(\"right\"),\n { context, width, height } = panel;\n\n let angle = 0;\n\n yield angle;\n return; // DO NOTHING IN CANVAS\n\n while (await Promise.race([invalidation, Promises.delay(2000, true)])) {\n context.clearRect(0, 0, width, height);\n context.fillStyle = d3.hsv(angle, 0.7, 0.8);\n context.fillText(width, 130, 100);\n yield (angle = --angle % 360);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`----\n_libraries_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@5\", \"d3-hsv@0\", \"d3-array@2\", \"d3-gridding@0.1\", \"d3-hexbin@0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"import {table} from \"@tmcw/tables/2\" // or \"365b531bc3fccde9\" // forked of @tmcw","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"viewof src = select([\"dataset.json\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"import {checkbox, radio, slider, textarea} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4303,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"legend = require(\"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1","titling":"auto"}} 31:"$30:body"