31:Teef,function hover(svg, x, y, data, color) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left); else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); const text = dot .append("text") .attr('font-weight', 'bold') .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr('y', -32); const date = svg.append("g").attr("display", "none"); date.append("circle").attr("r", 2.5); const $dateText = date .append("text") .attr('font-weight', 'bold') .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr('y', -4); const $value = svg.append("g").attr("display", "none"); $value.append("circle").attr("r", 2.5); const $valueText = $value .append("text") .attr('font-weight', 'bold') .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "start") .attr('x', 4); const $source = svg .append("g") .attr("display", "none") .attr('transform', `translate(${margin.left},${margin.top})`); const $sourceText = $source .append("text") .attr('font-weight', 'bold') .attr("font-family", "sans-serif") .attr("font-size", 16) .attr("text-anchor", "start") .attr('x', 4); const daysarr = _(data) .flatMap(([_source, series]) => _(series) .filter(([, val]) => _.isNumber(val)) .map(getDate) .value() ) .sortBy(v => +v) .sortedUniq() .value(); const dataPair = _(data) .fromPairs() .mapValues(series => _(series) .map(([date, value]) => [+date, value]) .fromPairs() .value() ) .toPairs() .value(); function moved() { d3.event.preventDefault(); const ym = y.invert(d3.event.layerY); const xm = x.invert(d3.event.layerX); const i1 = d3.bisectLeft(daysarr, xm, 1); const i0 = i1 - 1; const i = daysarr[xm - daysarr[i0] > daysarr[i1] - xm ? i1 : i0]; const s = d3.least(dataPair, d => { return Math.abs((_.isNumber(d[1][+i]) ? d[1][+i] : 999999) - ym); }); const display = _(dataPair) .map(([source, series]) => [source, series[+i], s[0] === source]) .filter(([, value]) => _.isNumber(value)) .orderBy(['[2]'], ['desc']) .value(); dot.attr("transform", `translate(${x(i)},${y(s[1][+i])})`); $value .attr('transform', `translate(${margin.left},${y(s[1][+i])})`) .attr('fill', color(s[0])); $valueText.text(s[1][+i]); date .attr('transform', `translate(${x(i)},${height - margin.bottom})`) .attr('fill', color(s[0])); $dateText.text(formatTime(i)); text.attr('fill', color(s[0])).text(d => d); $sourceText.attr('fill', color(s[0])).text(s[0]); // .join( // enter => // enter // // .text(([source, value]) => `${source}: ${value}`), // update => // update // .attr('dy', (d, i) => (d[2] ? null : i === 1 ? '1.4em' : '1.2em')) // .attr('font-weight', d => (d[2] ? 'bold' : 'normal')) // .text(([source, value, sel]) => // sel ? value : source + ': ' + value // ) // ); } function entered() { dot.attr("display", null); date.attr('display', null); $value.attr('display', null); $source.attr('display', null); } function left() { dot.attr("display", "none"); date.attr('display', 'none'); $value.attr('display', 'none'); $source.attr('display', 'none'); } }32:[] 2f:{"title":"Covid 19: france vis","cells":[{"id":0,"value":"md`# Covid 19: france vis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"md`\nSources des données indiquent d'où sont agrégés les données.\n\n\\`Santé Publique France\\` possède les données agrégés au niveau France, Région.\n\nPar conséquent, santé publique peuvent être agrégés par la somme des régions ou par juste le nombre donnée en déclaration nationale (représentés par \\`sante-publique-france\\` et \\`sante-publique-france-REG\\`).\n\n

\n\n\n${viewof attribut}\n${viewof sources}\n${viewof logScale}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"md`## Nombre de ${attribut} cumulés en France\n\n${swatches({ color })}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"viewof cumulated = chart(getCumulative(selectedDatasets), dateExtent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"md`## Nombre de ${attribut} au jour le jour\n\n${swatches({ color })}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"viewof daily = chart(getDaily(selectedDatasets), dateExtent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"md`### Différence par rapport au jour précédent\n\n${swatches({ color })}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2070,"value":"chart(\n _(selectedDatasets)\n .toPairs()\n .map(([source, series]) => [\n source,\n _(series)\n .map(getDatum)\n .thru(series => uncumulate(series, 'date', ['1']))\n .map(({ '0': date, '1': value }) => [date, value])\n .concat(days)\n .groupBy(([date]) => +date)\n .map(values => [values[0][0], _.sumBy(values, '[1]')])\n .sortBy('[0]')\n .value()\n ])\n .value(),\n dateExtent\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`## Sources selectionnés`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"html`${summary(sourceSet)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"sourceSet = _(selectedDatasets)\n .map(e => ({ sourceType: e.sourceType, source: e.source, date: e.date }))\n .groupBy('sourceType')\n .mapValues(vals =>\n _(vals)\n .sortBy('date')\n .uniqBy('source.url')\n .filter(val => val.source !== undefined)\n .groupBy('source.nom')\n .mapValues(values =>\n _(values)\n .groupBy(e =>\n e.date.toLocaleString(\"fr\", { month: \"long\", day: \"numeric\" })\n )\n .mapValues(url =>\n url.length === 1\n ? md`${_.first(url).source.url}`.innerHTML\n : _.map(url, e => md`${e.source.url}`.innerHTML)\n )\n .value()\n )\n .value()\n )\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Dataset\nDonnées nationales concernant l'épidémie de COVID19: [opencovid19-fr/data](https://github.com/opencovid19-fr/data)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"datasets = _([...data])\n .fromPairs()\n .mapValues(series =>\n _([...series])\n .map(pair => {\n const [key, series] = pair;\n return key.startsWith('FLAT_')\n ? [\n key,\n _(series)\n .groupBy('date')\n .toPairs()\n .value()\n ]\n : pair;\n })\n .fromPairs()\n .value()\n )\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"groupDatasets = _(datasets)\n .mapValues(dataset => _.pickBy(dataset, (_v, group) => canKeepSeries(group)))\n .pickBy((dataset, source) => !_.isEmpty(dataset))\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"availableAttributes = {\n const seriesFn = series =>\n _(series)\n .flatMap(datum => {\n if (_.isArray(datum)) return _.flatMap(datum[1], _.keys);\n else if (_.isMap(datum)) return _.flatMap([...datum.values()], _.keys);\n return _.keys(datum);\n })\n .uniq()\n .value();\n\n return _(groupDatasets)\n .flatMap(dataset =>\n _.flatMap(dataset, series => {\n return _.isArray(series)\n ? seriesFn(series)\n : _(series)\n .flatMap(seriesFn)\n .uniq()\n .value();\n })\n )\n .uniq()\n .intersection(numerable)\n .value();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"selectedDatasets = _(groupDatasets)\n .pickBy((_v, key) => _.includes(sources, key))\n .flatMap((values, key) =>\n _(values)\n .map((series, precision) => [\n key + (precision.slice(4).length === 0 ? '' : '-' + precision.slice(5)),\n series\n ])\n .value()\n )\n .fromPairs()\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"dateExtent = d3.extent(\n _.flatMap(selectedDatasets, series => _.map(series, getDate))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`## Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"numerable = [\n 'casConfirmes',\n 'deces',\n 'gueris',\n 'reanimation',\n 'hospitalises',\n 'capaciteTotaleLitsDisponibles',\n \"capaciteLitsReanimation\",\n \"capaciteLitsSoinsContinus\",\n \"capaciteLitsSoinsIntensifs\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"viewof group = select({\n title: \"Grouper par\",\n description: \"Granularité des données\",\n options: [\n { value: 'DEP', label: 'Départements' },\n { value: 'FRA', label: 'France' },\n { value: 'REG', label: 'Régions' }\n ],\n value: 'FRA'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof sources = select({\n description: \"Sources des données\",\n options: _.keys(groupDatasets),\n value: _.keys(groupDatasets),\n multiple: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof attribut = select({\n title: \"Afficher\",\n description: \"Attribut a afficher\",\n options: availableAttributes,\n value: 'casConfirmes'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"viewof logScale = checkbox([{ value: true, label: 'logScale? ' }])","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`## Utils\n\ncontains a set of tools useful for parsing, manipulating, generating data\n\n### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"/** some documentation */\ncanKeepSeries = g => {\n switch (group) {\n case 'FRA':\n return _.some(['FRA', 'FLAT'], f => g.startsWith(f));\n }\n return g.startsWith(group);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"getDatum = function(datum) {\n return [getDate(datum), getAttribute(datum)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1225,"value":"getDate = datum => {\n if (_.isArray(datum)) return new Date(datum[0]);\n return new Date(datum.date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"getAttribute = datum => {\n if (_.isArray(datum)) return d3.sum(datum[1], datum => datum[attribut]);\n else return datum[attribut];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"color = d3.scaleOrdinal(_.keys(selectedDatasets), d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"days = d3.utcDay\n .range(dateExtent[0], d3.timeDay.ceil(dateExtent[1]))\n .map(d => [d, null])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"chart = function(dataset, dateExtent) {\n const datasetExtent = d3.extent(\n _.flatMap(dataset, ([, series]) => d3.extent(series, ([, value]) => value))\n );\n\n const { x, xAxis } = getXScale(dateExtent);\n const { y, yAxis } = getYScale(datasetExtent, logScale);\n\n const svg = d3.create('svg').attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg\n .append(\"g\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .call(\n addLines,\n dataset,\n createLine(x, y, ([, value]) => value !== null),\n () => '#ccc'\n );\n const path = addLines(\n svg\n .append(\"g\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\"),\n dataset,\n createLine(x, y),\n color\n );\n\n svg.append(\"g\").call(addCircles, dataset, x, y);\n\n svg.call(hover, x, y, dataset, color);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2339,"value":"formatTime = d3.utcFormat(\"%a %d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"getCumulative = dataset =>\n _(dataset)\n .toPairs()\n .map(([source, series]) => [\n source,\n _(series)\n .map(getDatum)\n .unzip()\n .thru(([dates, values]) => _.zip(dates, d3.cumsum(values)))\n .value()\n ])\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"getDaily = dataset =>\n _(dataset)\n .toPairs()\n .map(([source, series]) => [\n source,\n _(series)\n .map(getDatum)\n .concat(days)\n .groupBy(([date]) => +date)\n .map(values => [values[0][0], _.sumBy(values, '[1]')])\n .sortBy('[0]')\n .value()\n ])\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"getXScale = domain => {\n const x = d3\n .scaleUtc()\n .domain(domain)\n .range([margin.left, width - margin.right]);\n return {\n x,\n xAxis: g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"getYScale = (domain, logScale) => {\n const y = (logScale ? d3.scaleSymlog() : d3.scaleLinear())\n .domain(domain)\n .nice()\n .range([height - margin.bottom, margin.top]);\n return {\n y,\n yAxis: g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(10))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"createLine = (x, y, defined) => ([_source, series]) => {\n const d3line = d3\n .line()\n .x(([date]) => x(date))\n .y(([_date, value]) => y(value));\n\n if (defined) {\n return d3line.defined(defined)(series.filter(defined));\n }\n\n return d3line.defined(([, value]) => _.isNumber(value))(series);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"addLines = function(svg, dataset, line, color) {\n return svg\n .selectAll('path')\n .data(dataset, ([source]) => source)\n .join(enter =>\n enter\n .append('path')\n .attr(\"stroke\", ([source]) => color(source))\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"none\")\n .attr(\"d\", line)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"addCircles = function(svg, dataset, x, y) {\n return svg\n .selectAll(\"g\")\n .data(dataset, ([source]) => source)\n .join(enter =>\n enter\n .append(\"g\")\n .attr(\"fill\", ([source]) => color(source))\n .attr(\"stroke\", \"none\")\n .selectAll('circle')\n .data(([source, series]) =>\n series.filter(([, value]) => value !== null)\n )\n .enter()\n .append('circle')\n .attr(\"cx\", ([date]) => x(date))\n .attr(\"cy\", ([_date, value]) => y(value))\n .attr(\"r\", 3)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3@5',\"d3-array\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"import { select, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"import {\n datasets as data,\n uncumulate\n} from '@stardisblue/covid19-france-dataset'","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"summary = {\n function summ(childrens, title) {\n if (title === undefined) return _.map(childrens, summ).join('\\n');\n if (_.isString(childrens))\n return `

${title} : ${\n _.isString(childrens) ? childrens : _.map(childrens, summ).join('\\n')\n }

`;\n return `\n

${title}

\n ${_.isString(childrens) ? childrens : _.map(childrens, summ).join('\\n')}\n

\n `;\n }\n\n return summ;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}