2d:null 2e:["$","title",null,{"children":"3 filtres pour les données des MOOC v3 | Malik Koné | Observable"}] 33:T4d1,viewof overview = vl2( { // "width": gridDim.w2, // "height": gridDim.h1, width: width, autosize: "fit", "$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json", "data": { "name": "set", "url": data[sets] }, "layer": [ { "selection": { "brush": {"type": "interval", "encodings": ["x"], "init" : { "x": [-2188041042016, -2188041022016] }, // "init" : { "x": [0, 200] }, "empty": "none"} }, "encoding": { "x": { "field": "msgTS", "type": "temporal", "timeUnit": "monthdate"}, "y": { "aggregate": "count", "type": "quantitative" }, "size": { "value": 3 } }, "mark": { "fill": "grey", "type": "bar" }, "transform": [{ "filter": "!isValid(datum.group_name)" }] }, { "encoding": { "x": { "field": "msgTS", "type": "temporal", "timeUnit": "monthdate"}, "y": { "aggregate": "count", "type": "quantitative" } }, "mark": { "fill": "brown", "opacity": 0.7, "type": "bar" }, "transform": [{ "filter": "isValid(datum.group_name)" }], } ] } )34:T727,viewof dis_overview = vl2( { //"width": gridDim.w1, width: width, //"height": gridDim.h2, autosize: "fit", "data": { "name": "source", "values": data_filtered_date }, "transform": [ { "joinaggregate": [{ "op": "count", "field": "msgID", "as": "dis_count" }], "groupby": ["disID"] }, { "joinaggregate": [{ "op": "count", "field": "msgID", "as": "gp_count" }], "groupby": ["group_name", "disID"] } ], "layer": [ { "selection": { "brush": {"type": "interval", "encodings": ["y"], "init" : { "y": ["disc1201"] }, "empty": "none"} }, "mark": { "fill": "grey", "type": "bar" }, "transform": [{ "filter": "datum.group_name === null" }], "encoding": { "x": { "field": "gp_count", "type": "quantitative" }, "y": { "field": "disID", "type": "nominal", "sort": { "field": "gp_count", "op": "max", "order": "descending" } }, "size": { "value": 3 } } }, { "mark": { "fill": "brown", "opacity": 0.5, "type": "bar", "stroke": "white" }, "transform": [{ "filter": "datum.group_name !== null" }], "encoding": { "x": { "field": "gp_count", "type": "quantitative", "stack": true }, "y": { "field": "disID", "type": "nominal", "sort": { "field": "gp_count", "op": "max", "order": "descending" } }, "size": { "value": 10 } } } ] } )35:T736,viewof chart = vl2( { //"width": gridDim.w2, "width":width, //"height": gridDim.h2, autosize: "fit", "$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json", "data": { "name": "data", "values": data_filtered_collective.avec_null }, "transform": [ { "groupby": ["msgTop", "group_name"], "joinaggregate": [ { "as": "msg_count", "field": "*", "op": "count" } ] }, { "groupby": ["disID"], "joinaggregate": [ { "as": "dis_count", "field": "*", "op": "count" } ] }, {"filter": `indexof(${JSON.stringify(dis_selection.disID)}, datum.disID) >= 0`}, {"filter": `${selection[0]} <= datum.msgTS && datum.msgTS <= ${selection[1]}` } ], "facet": { "column": { "field": "msgTS", "timeUnit": unit_temps, "type": "nominal" }, "row": { "field": "disID", "type": "nominal", "scale": {"domain": `${dis_selection.disID}`} } }, "spec": { "layer": [ { "height": 120, "width": 60, "encoding": { "x": { "field": "msgTop", "type": "nominal" }, "y": { "field": "msg_count", "type": "quantitative"} }, "mark": { "fill": "grey", "size": 5, "type": "bar" }, "transform": [ { "filter": "!isValid(datum.group_name)" } ] }, { "encoding": { "color": { "field": "group_name", "type": "nominal" }, "x": { "field": "msgTop", "type": "nominal" }, "y": { "field": "msg_count", "type": "quantitative"} }, "mark": { "opacity": 0.8, "type": "bar" }, "transform": [ { "filter": "isValid(datum.group_name)" } ] } ] } } )36:T435,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options } = Array.isArray(config) ? {options: config} : config; options = options.map( o => (typeof o === "object" ? o : { value: o, label: o }) ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }37:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }38:T1275,slide = (options) => { // Observable makes a thumbnail from the first canvas or svg or image that is at least 320x200. let opts = Object.assign({value: [1/3, 1/3, 1/3], width: 320, height: 320, labels: ['A', 'B', 'C'], fontsize:'.5em'}, options) // Turn the initial value passed by the user into a composition if it isn't one already opts.value = C(opts.value) let node = DOM.svg(opts.width, opts.height) let svg = d3.select(node).attr('viewBox', '-50 -50 100 100').style('overflow', 'visible') // The y extent of the corners is [-1, 0.5], or [-50, 25] in view space, due to the rotation of the triangle. // Offsetting downwards by 12.5 view points puts the triangle in the center of the svg. let yOffset = 12.5 let g = svg.append('g').attr('transform', `translate(0, ${yOffset})`) let {sin, cos, max, PI} = Math let corners = d3.range(3).map(i => { let angle = -PI/2 + i*(2*PI/3) return [cos(angle), sin(angle)] }) let R = 50 let line = d3.line() .x(([x, y]) => R * x) .y(([x, y]) => R * y) .curve(d3.curveLinearClosed) g.append('path') .attr('d', line(corners)) .attr('fill', 'transparent') .attr('stroke-width', 0.5) .attr('stroke', '#ccc') g.selectAll('text.label') .data(corners) .join('text') .attr('class', 'label') .text((d, i) => opts.labels[i]) .attr('x', ([x,y], i) => R * x) .attr('y', ([x,y], i) => R * y + (i == 0 ? -7.5 : 7.5)) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', opts.fontsize) let handle = g.append('circle') .attr('cx', R * projectX(corners, opts.value)) .attr('cy', R * projectY(corners, opts.value)) .attr('r', 2) .attr('fill', 'red') // Define a transition to use when fading subcomposition marks let t = d3.transition() .ease(d3.easeCubicOut) .duration(300) let updateSubcompositions = (composition, doTransition) => { g.selectAll('line.projection').data( // One datum for each non-degenerate pair of (a, b, c). // We show the projection of the value onto each of the three sides of // the triangle, and fade the projection out if both endpoints of the // sub-composition are zero. [ { composition: C([composition[0], composition[1], 0]), index: 0 }, { composition: C([0, composition[1], composition[2]]), index: 1 }, { composition: C([composition[0], 0, composition[2]]), index: 2 }, ].filter(d => d3.sum(d.composition) > 0), // Invalid entries contain NaN. d => d.index ) .join( enter => enter.append('line') .attr('class', 'projection') .attr('stroke-width', 0.5) .attr('pointer-events', 'none') .attr('stroke-linecap', 'round') .attr('stroke', 'red') .attr('opacity', doTransition ? 0 : 1) .call(enter => doTransition && enter.transition(t).attr('opacity', 1)), update => update, exit => exit.transition(t) .attr('opacity', 0) .remove() ) .attr('transform', d => `rotate(${60 + d.index * 120}, ${R * projectX(corners, d.composition)}, ${R * projectY(corners, d.composition)})`) .attr('x1', d => R * projectX(corners, d.composition)) .attr('y1', d => R * projectY(corners, d.composition) + 0) .attr('x2', d => R * projectX(corners, d.composition)) .attr('y2', d => R * projectY(corners, d.composition) - 1.5) } let dragged = () => { let p = [d3.event.x / R, d3.event.y / R] let [a, b, c] = corners let total = area(a, b, c) let composition = C([area(b, c, p), area(c, a, p), area(a, b, p)].map(a => max(0, a) / total)) updateSubcompositions(composition, true) handle.attr('cx', R * projectX(corners, composition)).attr('cy', R * projectY(corners, composition)) node.value = composition node.dispatchEvent(new CustomEvent("input", { bubbles: true })) } updateSubcompositions(opts.value, false) // Allow dragging anywhere on the surface of the SVG. For d3.event.x and d3.event.y to determine // the desired coordinates, put this rect inside the offset and give it a transform to undo // the parent transform. g.append('rect') .attr('width', 100).attr('height', 100) .attr('x', -50).attr('y', -50) .style('cursor', 'pointer') .attr('transform', `translate(0, ${-yOffset})`) .attr('fill', 'transparent') .call(d3.drag().on('drag', dragged).on('start', dragged)) // Store the triangle "radius" and normalized corner coordinates on the SVG node // for easy access for e.g. projecting additional data inside the slider. node.R = R node.corners = corners node.labels = opts.labels node.value = opts.value return {node, g} }39:[] 31:{"id":"67edfc41c73f74c9","slug":"3-filtres-pour-les-donnees-des-mooc-v3","title":"3 filtres pour les données des MOOC v3","thumbnail":"05b68240354400465916113076e47304037425db2b25871933c1f9bece5ddbec","access_level":"public","create_time":"$D2019-11-09T19:13:40.793Z","update_time":"$D2020-03-31T15:28:44.748Z","view_time":null,"first_public_time":"$D2019-11-09T19:18:49.755Z","has_unpublished_edits":null,"fork":{"id":"482865d740b971e4","slug":"3-filtres-pour-les-donnees-des-mooc","title":"3 filtres pour les données des MOOC","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":1084,"publish_version":1084,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"3 filtres pour les données des MOOC v3","cells":[{"id":0,"value":"md`# 3 filtres pour les données des MOOC v3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof sets = select({\n title: \"Sélection du dataset\",\n description: \"choisir un filtre pour les données\",\n options: Object.keys(data),\n value: Object.keys(data)[1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`Using dataset ${data[sets]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":" data_filtered_collective = filtrer_collective(data_filtered_date, collective_strenght)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"md`### Filtre temporel\nEn gris le nombre de messages, en couleur le nombre de messages d'acteur \"collectif\".\nSélectionner un interval et le faire glisser pour filtrer les données sur la partie grisée.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"md`Filtre sur les discussions\nEn pratique il y a plus de discussion mais pour ce test on se limite à trois. Là encore on peut choisir une ou plusieurs discussions à reporter dans le détail`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"dis_selection2 = Generators.observe(\n notify => {\n const signaled = (name, value) => notify(value);\n\n dis_overview.addSignalListener(\"brush\", signaled);\n\n notify(dis_overview.signal(\"brush\"));\n\n return () => dis_overview.removeSignalListener(\"brush\", signaled);\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"md`#### Détail par jour ou mois\n- Il montre le nombre de messages appartenant à des auteurs ne participant pas à des activités collectives (barres bleues) ou y participant (barres de couleurs selon les groupes). \nChaque sous graphe représente donc cette distribution selon les discussions et les topiques principaux ainsi que selon les jours ou les mois.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof unit_temps = select({\n title: \"Découpage du temps\",\n description: \"Choisir la répartition temporelle\",\n options: [\"day\", \"month\"],\n value: \"day\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`#### Filtre sur les forces collectives\nUn selecteur ternaire pour définir le seuil des liens à prendre en compte dans l'explicitation de la dynamique collective. La position du point indique l'importance relative des trois dimensions qui sont en jeux.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"viewof ternary = slide({value: [0.5, .5, .5], labels: ['Temps', 'Topique', 'Auteur'], width:400, height:300}).g","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"viewof ternary","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"ternary2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"ternary2 = slide({value: [0.5, .5, .5], labels: ['Temps', 'Topique', 'Auteur'], width:400, height:300}).g","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"viewof link_strength = slide({value: [0.5, .5, .5], labels: ['Temps', 'Topique', 'Auteur'], width:400, height:300}).node","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"md`### Inner working`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"md`#### dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"gridDim = {\n const layout = ({w: 12, w1: 2, w2:9, h:8, h1:1, h2:6});\n const mgsUnit = 8, // React space unit;\n numMgs = 8;\n \n const scalex = (x) => x* width / layout.w;\n const scaley = (y) => y* height / layout.h; \n\n const w = width,\n height = scalex(layout.h);\n return ({\n w : width,\n h : height,\n w1: scalex(layout.w1) - mgsUnit * numMgs ,\n w2: scalex(layout.w2) - mgsUnit * numMgs ,\n h1: scaley(layout.h1),\n h2: scaley(layout.h2),\n fontsize: '.5em',\n layout\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"collective_strenght = link_strength.map(d => Math.round(d*100*3)/100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"filtrer_collective = (data, ref_strenght) => {\n const filtered_data = []\n\n const strong_enought = (elt, index) => {\n return elt <= ref_strenght[index]\n }\n\n // à débugger pour avoir les nulls et les groupes filtrés\n const filtrer_strong2 = (datum) => {\n\n //debugger;\n const dgs = datum.group_force;\n\n if (dgs == null || dgs.every(strong_enought) ) {\n filtered_data.push(datum) \n }\n }\n\n data.map(d=>filtrer_strong2(d))\n\n\n\n // renvois le data sans les groupes null.\n return {\"sans_null\": data.filter(d => d.group_force? d.group_force.every(strong_enought):null ),\n \"avec_null\": filtered_data }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"data_filtered_date = d3.json(data[sets]).then(data => filtrer_date(data, selection)) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"filtrer_date = function(data, sel){\n // the data array must have object a msgTS attribute\n // we keep only datum whose timestamp is in the selection interval (ms or ns??)\n return data.filter(datum => sel[0] <= datum.msgTS && datum.msgTS <= sel[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"data_dates = // if empyt getTSExtent return everything\n d3.json(\"https://raw.githubusercontent.com/maliky/images/stable/vega-lite-json/data_0_191003T1056.rec.json\").then(get_dates)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"selection = get_overview_(interval, [-2192785699983, -2188041022016], data_dates.rawTSextent).corraw.map(d=>Math.round(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"function get_dates(data) {\n const ts = d3.timeFormat(\"%Y-%m-%d\"),\n rawTSextent = d3.extent(data.map(d => d.msgTS)),\n rawLatest = rawTSextent[1];\n\n return {rawTSextent,\n fmtTSextent: rawTSextent.map(t => ts(t)),\n rawLatest, \n fmtLatest: ts(rawLatest)\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"get_overview_ = function(interval, max_interval, rawTSextent, n) {\n // n the number of days to limite the initial selection to\n // give the time interval of the overview\n let [raw, corraw] = (Object.keys(interval).length === 0)? [max_interval, rawTSextent]: [Object.values(interval)[0], null];\n\n const ts = d3.timeFormat(\"%Y-%m-%d\"),\n correction_scale = d3.scaleLinear(max_interval, rawTSextent),\n invert_scale = d3.scaleLinear(rawTSextent, max_interval);\n // ts_sel_ini= init_overview_sel(n),\n // corts_sel_ini = ts_sel_ini.map(t => invert_scale(t));\n \n corraw = raw.map(t => correction_scale(t));\n\n return {\n raw,\n fmt: raw.map(d => ts(d)),\n corraw,\n corfmt: corraw.map(d => ts(d)),\n correction_scale,\n// ts_sel_ini,\n // corts_sel_ini\n };\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"init_overview_sel = (n, latest=data_dates.rawLatest) => {\n // display latest and latest -n days from data ts\n const newest = latest,\n oldest = mt(latest).subtract(n, 'days')._i\n \n return [oldest, newest]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"ts_sel_ini = init_overview_sel(15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"interval = Generators.observe(\n notify => {\n\n const signaled = (name, value) => notify(value);\n\n overview.addSignalListener(\"brush\", signaled);\n\n notify(overview.signal(\"brush\"));\n\n return () => overview.removeSignalListener(\"brush\", signaled);\n\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"dis_selection = Generators.observe(\n notify => {\n const signaled = (name, value) => notify(value);\n\n dis_overview.addSignalListener(\"brush\", signaled);\n\n notify(dis_overview.signal(\"brush\"));\n\n return () => dis_overview.removeSignalListener(\"brush\", signaled);\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md `4) discussion overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"vl2 = require(\"@observablehq/vega-lite@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"import {slider as ternary_slider} from \"@maliky/responsive-ternary-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"mt =require('moment@2.24.0/moment.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"data = ({\n \"set1\": \"https://raw.githubusercontent.com/maliky/images/master/data-json/data_0_191002T1115.rec.json\", \n \"set2\": \"https://raw.githubusercontent.com/maliky/images/master/data-json/data_0_191003T1056.rec.json\",\n \"set3\": \"https://raw.githubusercontent.com/maliky/images/master/data-json/large_dis_n_groups_with_nan_rec.json\",\n \"set4\": \"https://raw.githubusercontent.com/maliky/images/master/data-json/large_groups_with_nan_rec.json\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"md`### jashkenas function`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"md`### Slider`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"// Returns the (signed) area of the triangle with corners `a`, `b`, and `c`\narea = ([xa, ya], [xb, yb], [xc, yc]) => 0.5 * (xa*yb + xb*yc + xc*ya - xa*yc - xc*yb - xb*ya)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"projectY = ([a, b, c], weights) => \n d3.sum([a[1] * weights[0], b[1] * weights[1], c[1] * weights[2]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"// Project the composition given by `weights` onto the triangle defined by corners `a`, `b`, and `c`\nprojectX = ([a, b, c], weights) => \n d3.sum([a[0] * weights[0], b[0] * weights[1], c[0] * weights[2]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"// Composition closure operator: https://en.wikipedia.org/wiki/Compositional_data\n// Returns a composition version of `arr` where the elements are normalized to sum to 1\nC = arr => {\n let total = d3.sum(arr) \n return arr.map(d => d / total)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"