2c:null 2d:["$","title",null,{"children":"Covid | Rey | Observable"}] 32:T1533, chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, viewbox.width, viewbox.height]); const stackwidth = (viewbox.width-margin.right-margin.left)/nbDay; const padding = 8 createTooltip(); createDayTooltip(); //let res = graphChoice(typeOfGraph) svg.append("g") .call(legend); // // Compute annotation line and text // svg.append("g") .selectAll("path") .data(buildedEventList) .join("path") .attr("d", d => d3.line()([ [x(d3.isoParse(d.dateRep)), y(d.max) ], [x(d3.isoParse(d.dateRep)) , y(d.max + (10 * y.domain().slice(1)[0])/100)], [x(d3.isoParse(d.dateRep)) - 30, y(d.max + (10 * y.domain().slice(1)[0])/100 + (5 * y.domain().slice(1)[0])/100)], ])) .attr("stroke", "black") .attr("fill", "white") .attr("stroke-opacity", 0.8) .attr("stroke-dasharray", 2) svg.append("g") .selectAll("text") .data(buildedEventList) .style('font-family', 'sans-serif') .join("text") .style("text-anchor", "end") .attr("transform", d => `translate(${x(d3.isoParse(d.dateRep))}, ${y(d.max + (12 * y.domain().slice(1)[0])/100)}), rotate(45)`) .attr("fill", "grey") .attr('font-size', "1em") .text( d => d.text); // // Compute rectangle for series // svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) //La je capte pas comment il s'y retrouve d3 avec d.key ? ... .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(d3.isoParse(d.data.dateRep))) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", d => stackwidth - padding) .attr("transform", `translate(-${(stackwidth - padding)/ 2},0)`) // Interactivity .on("mouseenter", (d, i, nodes) => { let tooltip = d3.select("#tooltip"); tooltip.style("opacity", 1); let keys = Object.keys(data[0]).filter( k => colToStack.includes(k) ); console.log(keys); let legend = keys.map((k,i) => { let scolor = color(k); return `

${metadata[k].name}: ${d.data[k]}

` }).reverse().join("\n"); d3.select("#tooltip-text").html(`

` + legend + `

`); let barPos = nodes[i].getBoundingClientRect(); let tooltipWidth = tooltip.node().getBoundingClientRect().width; tooltip .style("left", ((barPos.x + (barPos.width / 2)) - (tooltipWidth / 2)) + "px") .style("top", (d3.event.pageY - 160) + "px"); }) .on("mouseleave", () => { d3.select("#tooltip").style("opacity", 0); }); //.append("title"); if (typeOfGraph == "cum"){ svg.append("g") .selectAll("arcs") .data(dataforCircle) . join('path') .style("fill", "none") .attr("stroke", "none") .attr("stroke-width", 3) .attr("class","arcs") .attr("d", d => buildArc(d)); svg.append("g") .selectAll('circle') .data(dataforCircle) .join('circle') //.attr('cx', function(d,i) { console.log(d3.select(this).attr("x"))}) .attr('cx', d=> x(d3.isoParse(d.dateRep)) ) .attr('cy', d => y(d.ymax) - 8) .attr('r', 4) .style('fill', d => dotcolor(d.XDelta)) .on("mouseenter", function(d) { d3.select(this) .raise() // bring to front .attr('r', 6); //.style("stroke-width", 8); //let tooltip = d3.select("#tooltip-day"); //d3.select("#tooltip-day-text").html("

" + d.XDelta + "

"); //Select the good arc ? //console.log(d3.selectAll(".arcs").size()); d3.selectAll(".arcs") .style('stroke', function (arcd) { //console.log("arcd.dateRep = " + arcd.dateRep); return arcd.dateRep === d.dateRep ? 'firebrick' : 'none';}) //tooltip // .style("opacity", 1) // .style("left", "389 px") // .style("top", "564 px") // .text('radius = ' + d.XDelta); }) .on("mouseleave", function(d) { d3.select(this).attr('r', '4'); d3.select("#tooltip-day").style("opacity", 0); //d3.select(this).attr('stroke-width', '0'); d3.selectAll(".arcs") .style('stroke', function (arcd) { //console.log("arcd.dateRep = " + arcd.dateRep); return arcd.dateRep === d.dateRep ? 'none' : 'none';}) });} if (typeOfGraph == "daily"){ svg.append("g") .selectAll("path") .data(optionSeriesFiltered) .join("path") .attr("stroke", d => ycolor(d[0].name)) .attr("stroke-width", 3) .attr("fill", "none") .attr("d", myline); svg.append("g").selectAll("text") .data([null]) .style('font-family', 'sans-serif') .join("text") .attr("transform", `translate(${margin.left + 15}, 20)`) .attr("fill", "grey") .style("text-anchor", "left") .attr('font-size', "1.5em"); //.text(res[2]); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(yAxis2); return svg.node(); }33:T52e, function buildArc (d) { // d.source and d.target are the locations in graphData.links // xScale takes a node name and finds its location on the x axis from 0 to width // So start is the location in pixels of the start of the arc if (!(d.XDatef in dateToNode)){ //console.log("d.XDatef = " + d.XDatef ) return null; } else { let start = x(d3.isoParse(d.dateRep)); let start_y = y(d.ymax) let end = x(d3.isoParse(d.XDatef)); let end_y = y(dateToNode[d.XDatef].ymax); // This code builds up the SVG arc path element const arcPath = ['M', // start the path start, start_y - 8, // declare the (x,y) of where to start 'A', // specify an eliptical curve (start - end)/2, ',', // xradius: height of arc is proportional to start - end (start - end)/2, // yradius 0, 0, ",", // rotation of ellipse is 0 along x and y; see arc url for details start < end ? 1: 0, // make all arcs curve above the nodes; see arc documentation end, end_y - 8] // declare (x,y) of endpoint .join(' '); // convert the bracketed array into a string return arcPath; } };34:T46b,legend = svg => { let legend_xpadding = 20; let legend_ypadding = 20; let dataL = 0; let offset = 20; const g = svg .attr("transform", `translate(${margin.left + legend_xpadding},${margin.top + legend_ypadding})`) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(color.domain().slice().reverse()) .join("g") .attr("transform", function (d, i) { if (i === 0) { dataL = d.length + offset return "translate(0,0)" } else { var newdataL = dataL dataL += d.length + offset return "translate(0,"+ newdataL +")" } }); g.append("rect") .attr("width", 20) .attr("height", 20) .attr("fill", color); g.append("text") .attr("x", 25) .attr("y", 10) //centering text .attr("dy", "0.35em") .style("text-anchor", "start") //Moche ! //.text(d => metadataStackFiltered.filter( o => o.value == d).map( o => o.label["name"])); }35:T8cb,metadata = ({cases_cum: {name:"Cas cumulés", color:"#f4a582"}, cases_daily: {name:"Cas journalier", color:"#f4a582"}, deaths_all_daily: {name:"Décès totaux journalier", color:"#c2a5cf"}, cases_cum_daily: {name:"Cas journaliers cumulés", color:"#f4a582"}, deaths_hospital_cum_daily: {name:"Décès à l'Hopital cumulés", color:"#c2a5cf"}, deaths_hospital_daily: {name:"Décès à l'Hopital journalier", color:"#c2a5cf"}, deaths_ehpad_cum_daily: {name:"Morts en Ehpad cumulés", color:"#7b3294"}, deaths_ehpad_daily: {name:"Morts en Ehpad journalier", color:"#7b3294"}, deaths_all_cum_daily: {name:"Morts en Ehpad et Hopital cumulés", color:"#000000"}, deaths_all_daily: {name:"Morts en Ehpad et Hopital journalier", color:"#000000"}, ventilated_daily_state: {name:"Réanimation cumulés",color:"#92c5de"}, hospitalized_daily_state: {name:"Hospitalisation cumulées", color:"#ffffbf"}, ventilated_daily_diff: {name:"Réanimation VQ",color:"#92c5de"}, hospitalized_daily_diff: {name:"Hospitalisation VQ", color:"#ffffbf"}, recover_cum_daily: {name:"Retour à domicile cumulés",color:"#a6dba0"}, recover_daily: {name:"Retour à domicile journalier",color:"#a6dba0"}, nm_growth_cases_cum: {name: "Croisance cumulées des cas", color:"#ca0020"}, nm_growth_deaths_cum : {name: "Croissance cumulées des morts", color:"#000000"}, nm_growth_cases_daily: {name:"Croissance cumulée journalière des cas", color:"#ca0020"}, nm_growth_deaths_daily: {name:"Croissance cumulée journalière des décès", color:"#000000"}, rolling_deaths_hospital_daily: {name:"Moyenne mobile des morts à l'hopital", color:"#ca0020"}, rolling_deaths_ehpad_daily: {name:"Moyenne mobile des morts en Ehpad", color:"#ca0020"}, rolling_deaths_all_daily: {name:"Moyenne mobile des morts en totalité", color:"#ca0020"}, rolling_cases_daily: {name:"Moyenne mobile des cas", color:"#ca0020"}, rolling_deaths_daily: {name:"Moyenne mobile des décès", color:"#000000"}})36:T4b7,createDayTooltip = () => { //If exist, remove d3.selectAll("#tooltip-day").remove() let tooltipDayWrapper = d3.select("body") .append("div") .attr("id", "tooltip-day") .style("opacity", "0") .style("pointer-events", "none") .style("position", "absolute") .style("transition", "all 0.1s ease-out"); tooltipDayWrapper.append("div") .attr("class", "tooltip-day") .attr("id", "tooltip-day-text") .attr("style", `position: absolute; z-index: 10; visibility: hidden; background-color: lightblue; text-align: center; padding: 4px; border-radius: 4px; font-weight: bold; color: orange;` ); tooltipDayWrapper.append("div") .attr("style", `position: absolute; bottom: 0; left: 50%; width: 13px; height: 13px; background: white; border: 1px solid #ddd; border-top-color: transparent; border-left-color: transparent; transform: translate(-50%, 50%) rotate(45deg); transform-origin: center center; z-index: 10;` ) }37:T4d9, createTooltip = () => { //If exist, remove d3.selectAll("#tooltip").remove() let tooltipWrapper = d3.select("body") .append("div") .attr("id", "tooltip") .style("opacity", "0") .style("pointer-events", "none") .style("position", "absolute") .style("transition", "all 0.1s ease-out"); tooltipWrapper.append("div") .attr("class", "tooltip") .attr("id", "tooltip-text") .attr("style", `background: #fff; z-index: 10; display: inline-block; pointer-events: none; text-align: left; padding: 0.6em 2em; padding-left: 7px; padding-right: 7px; white-space: nowrap; font: 12px sans-serif; background: white; border-radius: 8px;` ); tooltipWrapper.append("div") .attr("style", `position: absolute; bottom: 0; left: 50%; width: 13px; height: 13px; background: white; border: 1px solid #ddd; border-top-color: transparent; border-left-color: transparent; transform: translate(-50%, 50%) rotate(45deg); transform-origin: center center; z-index: 10;` ) }38:[{"id":"9db441095524723f421e49d78f7dbcaa4606b3192afe49e3586e39c6050e447ba0368dfe5636d9e3c927950fbb39fe85bc14862ac5bc87a2c8f757fa9e25baac","href":"https://static.observableusercontent.com/files/9db441095524723f421e49d78f7dbcaa4606b3192afe49e3586e39c6050e447ba0368dfe5636d9e3c927950fbb39fe85bc14862ac5bc87a2c8f757fa9e25baac","name":"today@4.json","type":"application/json","lastModified":1585069843978.761,"size":11692}] 30:{"id":"00a88ff43c0892a0","slug":"covid","title":"Covid","thumbnail":"73a078c84a4c9269120806caa7163eb6404adc5d5490a57c2a201d8ca787f78e","access_level":"public","create_time":"$D2020-03-24T14:56:51.311Z","update_time":"$D2020-05-18T12:24:36.416Z","view_time":null,"first_public_time":"$D2020-03-24T23:14:43.846Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"31a0b0c0235efaa1","login":"reyman","name":"Rey ","avatar_url":"https://avatars-next.observableusercontent.com/26c5e2ceffa1cd289ccb3cb4067122bb25501dda613a4d347869b291ec91a15a","tier":"starter_2024"},"version":2901,"publish_version":2901,"role":null,"authored":false,"authors":[{"type":"individual","id":"406282f369260b95","login":"reyman","name":"Rey ","avatar_url":"https://avatars-next.observableusercontent.com/26c5e2ceffa1cd289ccb3cb4067122bb25501dda613a4d347869b291ec91a15a","tier":null}],"members":[{"type":"individual","id":"406282f369260b95","login":"reyman","name":"Rey ","avatar_url":"https://avatars-next.observableusercontent.com/26c5e2ceffa1cd289ccb3cb4067122bb25501dda613a4d347869b291ec91a15a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Covid","cells":[{"id":0,"value":"md`# Covid `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"//graphChoice(typeOfGraph)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"viewof sources = select({\n title: \"Sources des données\",\n description: \"\",\n options: [\"ecdc\", \"etalab\"],\n value : \"ecdc\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"viewof typeOfGraph = radio({\n title: 'Afficher les données en :',\n options: metadata_type(sources),\n value: 'cum'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2733,"value":"viewof optionsCheckbox = {\n if (metadata_opt(sources,typeOfGraph).length) {\n \n return checkbox({\n title: \"\",\n description: \"\",\n options: metadata_opt(sources,typeOfGraph),\n submit: false\n })\n }\n \n else { return undefined}\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"md`## Charts parts `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"myline = d3.line() \n //.defined(d => !isNaN(d.values))\n .x(d => x(d3.isoParse(d.dateRep)))\n .y(d => y2(d.values))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2505,"value":"dateToNode = { \n let dict = {};\n dataforCircle.forEach(function(n) {\n dict[n.dateRep] = n; \n });\n return dict;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2513,"value":"dateToTargetNodes =\n{\n let dict = {};\n dataforCircle.forEach(function (n) {\n dict[n.dateRep] = n.XDatef;\n });\n return dict;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2540,"value":"dataforCircle.map( d => dateToNode[d.XDatef]).filter( d => d )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2435,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2482,"value":"md`## Metadata mapping `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2132,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"metadataLineFiltered = colToDot.flatMap( c => [{value: c, label: metadata[c]}]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2192,"value":"metadataStackFiltered = colToStack.flatMap( c => [{value: c, label: metadata[c]}]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"md`## Events `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"buildedEventList = eventList.map( s => {\n //La serie n+1 a une valeur y forcement sup à la valeur y de la n\n let lastFromSeries = series.length - 1;\n let eventData = (getEventData(series[lastFromSeries],s.date))[0];\n let ymax = d3.max([eventData[0],eventData[1]]);\n return { max : ymax,\n dateRep: eventData.data.dateRep,\n text : s.text};\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"eventList = [{\n id:1,\n date: \"2020-03-17\",\n text: \"Confinement stade 3\"}, {\n id:2,\n date: \"2020-03-24\",\n text: \"Etat d'urgence sanitaire\"}, {\n id:3,\n date: \"2020-03-27\",\n text: \"Extension jusqu'au 15 avril\"},{\n id:4,\n date: \"2020-04-04\",\n text: \"Ajout des décès en EHPAD\"}];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"function getEventData(dataToFilter, getDate) { \n return dataToFilter.filter( d => d3.timeDay.count(d3.isoParse(d.data.dateRep), d3.isoParse(getDate) ) === 0);}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2462,"value":"md`## DATA `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2648,"value":"metadata_url = \"https://api-covid.unthinkingdepths.fr/covid19/metadata\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"url = 'https://api-covid.unthinkingdepths.fr/covid19/'+sources+'?type='+typeOfGraph+\"&rolling=7\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2655,"value":"metadata_keys = Object.keys(metadata_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2657,"value":"metadata_type = function(g) { return metadata_data[g].type.map(o => ({\"label\": o.name, \"value\": o.name}))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"metadata_opt = function(g,t) { return metadata_data[g].type.filter( o => o.name == t)[0][\"options\"]}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2650,"value":"metadata_data = (await d3.json(metadata_url)).data\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = (await d3.json(url)).data\n/*dataJson = Promise.all([d3.json(url),\n d3.json(url_etalab)]).then(\n function success(allData) {\n return [allData[0], allData[1]];\n },\n function error(e) {\n throw e;\n }\n)*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"data_filtered = data.filter(d => (d3.isoParse(d.dateRep).getMonth() >= 2) && d3.isoParse(d.dateRep).getYear() == 120 )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"keys = Object.keys((data_filtered[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"dataforCircle = {\n // get last series with highest values\n let ymaxvalue = series[series.length-1].map( d => {\n return { \n dateRep : d.data.dateRep,\n ymax: d3.max([d[0],d[1]])\n }});\n // thanks SO : \n // https://stackoverflow.com/questions/46849286/merge-two-array-of-objects-based-on-a-key\n let mergeByDateRep = (a1, a2) =>\n a1.map(itm => ({\n ...a2.find((item) => (item.dateRep === itm.dateRep) && item),\n ...itm\n }));\n\n return mergeByDateRep(ymaxvalue, data_filtered)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"series = d3.stack()\n .keys(colToStack)\n (data_filtered)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1919,"value":"optionSeries = colToDot.map( c => \n data_filtered.flatMap( \n d => { \n let x = {} ;\n x[\"dateRep\"] = d.dateRep;\n x[\"values\"] = d[c];\n x[\"name\"] = c;\n return x;\n }\n ).filter(s => !(s.values === null) )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2155,"value":"optionSeriesFiltered = { \n if (optionsCheckbox !== undefined )\n { return optionSeries.map(s => s.filter( d => optionsCheckbox.includes(d.name) )).filter(e => e.length)}\n else\n {\n return \"bla\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2490,"value":"md`## Regex / Filtering columns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"re = [new RegExp(\"nm\"), new RegExp(\"rolling\")]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"re2 = [new RegExp(\"cum|daily\"), new RegExp(\"^(?!nm).*\"),new RegExp(\"^(?!growth).*\"),new RegExp(\"^(?!rolling).*\")]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2254,"value":"re3 = [new RegExp(\"X\")]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"colToStack = keys.filter( text => re2.every(re => re.test(text)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"colToDot = keys.filter( text => re.some(re => re.test(text)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2253,"value":"colToDelta = keys.filter( text => re3.some( re => re.test(text)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"md`## Tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2445,"value":"md`## Axis `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"nbDay = d3.timeDay.count(extent[0], extent[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"extent = d3.extent( series[0].map ( d=> d3.isoParse(d.data.dateRep)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"x = d3.scaleTime()\n .domain([d3.min(data_filtered.map(d => d3.isoParse(d.dateRep))), d3.max(data_filtered.map(d => d3.isoParse(d.dateRep))) ])\n .range([margin.left, viewbox.width - margin.right])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${viewbox.height - margin.bottom + 5 })`)\n .call(d3.axisBottom(x)\n .ticks(d3.utcDay)\n .tickFormat(d3.timeFormat(\"%d/%m\"))\n //.tickSizeOuter(0)\n )\n .call(g => g\n .selectAll(\"text\")\n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-65)\")\n )\n\n .call(g => g.select(\".domain\"))//.remove())\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1])) + (60 * d3.max(series, d => d3.max(d, d => d[1])) /100) ])\n .rangeRound([viewbox.height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left - 20} ,0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.selectAll(\".domain\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1733,"value":"d3.extent(d3.max(series,d => d.map( x => x.data.growth_cases_cum)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"y2 = d3.scaleLinear()\n .domain([getMinfromGrowthSeries,getMaxfromGrowthSeries]).nice()\n .rangeRound([viewbox.height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"yAxis2 = g => g\n .attr(\"transform\", `translate(${viewbox.width - margin.right} ,0)`)\n .call(d3.axisRight(y2).ticks())\n .call(g => g.selectAll(\".domain2\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewbox = ({ x: 0, y: 0, width: 1000, height: 700 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"margin = ({top: 20, right: 60, bottom: 50, left: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2450,"value":"md`## Colors `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"colorsCat_stack = new Map(metadataStackFiltered.map(m=> [m.value, m.label[\"color\"]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1972,"value":"colorsCat_line = new Map(metadataLineFiltered.map(m=> [m.value, m.label[\"color\"]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"getMaxfromGrowthSeries = d3.max(optionSeries.map( s => d3.max( s.map( p => p.values))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"getMinfromGrowthSeries = d3.min(optionSeries.map( s => d3.min( s.map( p => p.values))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"color = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range([...colorsCat_stack.values()])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"ycolor = d3.scaleOrdinal()\n .domain(colToDot)\n .range([...colorsCat_line.values()])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"dotcolor = d3.scaleLinear()\n .domain(d3.extent(data_filtered.map( d => d[\"XDelta\"])))\n .range([\"red\",\"grey\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"import {radio, select, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 31:"$30:body"