42:null 43:["$","title",null,{"children":"Nuage de points | Alain Ottenheimer | Observable"}] 49:T8fb,scatterplot = { // Get new canvas context const ctx = DOM.context2d( width + margin_scatter.left + margin_scatter.right, height //+ margin_scatter.bottom + margin_scatter.top ); ctx.fillStyle = "grey"; ctx.fillRect( 0, 0, width + margin_scatter.left + margin_scatter.right, height ); ctx.canvas.style.display = "block"; ctx.canvas.style.maxWidth = "100%"; //ctx.canvas.style.height = height + "px"; ctx.canvas.style.margins = "auto"; // ========================================= Tracé des points ============================================= const drawDot = (d) => { ctx.strokeStyle = "red"; ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc( x(d[1]) + margin_scatter.top, y(d[0]) + margin_scatter.left, 1, 0, circle_size * Math.PI ); ctx.fill(); ctx.stroke(); }; // ========================================= Titre du graphique ========================================== ctx.font = "24px sans-serif"; ctx.textAlign = "center"; ctx.fillStyle = "black"; ctx.fillText("COVID-19 ", width / 2, margin_scatter.top + 5); ctx.font = "24px sans-serif"; ctx.fillText( data_chart.length + " décès à l'hôpital en " + region + " au " + date_value, width / 2, 30 + margin_scatter.top ); // ========================================= Tracé des axes ============================================= const yAxis = () => { var tickCount = 10, tickSize = 6, tickPadding = 3, ticks = y.ticks(tickCount); // ticks ctx.beginPath(); ctx.font = "18px sans-serif"; ticks.forEach(function (d) { ctx.moveTo(margin_scatter.left + 25, y(d) + margin_scatter.top); ctx.lineTo(margin_scatter.left + 25 - 6, y(d) + margin_scatter.top); }); ctx.strokeStyle = "white"; ctx.stroke(); // text ctx.textAlign = "right"; ctx.textBaseline = "middle"; ctx.font = "12px sans-serif"; ctx.fillStyle = "white"; ticks.forEach(function (d) { ctx.fillText( dateInFr(d3.timeFormat("%b")(d)) + " - " + d3.timeFormat("%y")(d), margin_scatter.left - tickSize - tickPadding + 20, y(d) + margin_scatter.top ); }); }; yAxis(); data_chart.map(drawDot); yield ctx.canvas; }4a:[{"id":"660d3b890fa0b610f0e85f1cf580f3ff15b49950a4bc67b6106e15dbdebc744047dd0bbf9e8eed4d3cd981781198b769c729f84ab651a639c936525663b1cc68","href":"https://static.observableusercontent.com/files/660d3b890fa0b610f0e85f1cf580f3ff15b49950a4bc67b6106e15dbdebc744047dd0bbf9e8eed4d3cd981781198b769c729f84ab651a639c936525663b1cc68","name":"data_covid.csv","type":"text/csv","lastModified":1707239295120.941,"size":2558544}] 47:{"id":"ad44fffe926cd567","slug":"scatter-plot-of-covid-19-death-svg-canvas","title":" Nuage de points","thumbnail":"a9172f3f81382c62c81fe48cfb4faa81a813b04187ce08fba93035bcf3876bc0","access_level":"public","create_time":"$D2021-07-11T12:57:12.677Z","update_time":"$D2024-11-18T16:19:14.955Z","view_time":null,"first_public_time":"$D2021-07-18T13:58:56.932Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024","bio":"Data Analysis, Data Viz \nJavascript, python, QGIS, Tableau, illustrator...","following":false},"version":6224,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"bio":"Data Analysis, Data Viz \nJavascript, python, QGIS, Tableau, illustrator...","following":false}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":" Nuage de points","cells":[{"id":4,"value":"note = md`\n# Nuage de points\n## SVG et canvas\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"md`\n### INTRODUCTION \n\n\nLes [**données**](https://www.data.gouv.fr/fr/datasets/r/6fadff46-9efd-4c53-942a-54aca783c30c) de la COVID-19 proviennent du site [**data.gouv.fr**](https://www.data.gouv.fr/fr/datasets/donnees-hospitalieres-relatives-a-lepidemie-de-covid-19/). \nCes données sont présentées dans le tableau suivant :\n\nLe fichier csv des données COVID chargé à partir de cette url puis sauvegardé en local et ensuite chargé dans le notebook via la commande FileAttachment(\"data.csv\").csv() n'est pas lu correctement. \nIl faut le charger avec observable avec la commande\ndata_temp = d3.dsv(\";\",\"https://www.data.gouv.fr/fr/datasets/r/6fadff46-9efd-4c53-942a-54aca783c30c\") et ensuite l'exporter en csv en local. Ce fichier se charge alors correctement avec la commande : \ndata = FileAttachment(\"data_temp.csv\").csv()\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5001,"value":"md`\n### TABLE DES DONNEES `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5902,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2455,"value":"md`\n## INTERACTION \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5729,"value":"viewof region = Inputs.select([\"France\", \"Occitanie\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6128,"value":"viewof circle_size = Inputs.radio([\"0.05\", \".5\", \"1.5\"], {\n value: \".5\",\n label: \"rayon des cercles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6096,"value":"viewof height = Inputs.radio([\"300\", \"500\", \"700\", \"900\"], { value: \"500\", label : \"hauteur du graphique\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5697,"value":"md`\n## (canvas)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5301,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6067,"value":"md`\n## (svg)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5978,"value":"scatterplot_1 = Plot.plot({\n style: {\n background: \"grey\",\n color: \"black\"\n },\n title: \"COVID-19\",\n subtitle:\n data_chart.length + \" décès à l'hôpital en \" + region + \" au \" + date_value,\n marginTop: 50, //0,\n marginLeft: 60, //50,\n height: height,\n width: 500,\n //width: width, //500\n grid: false,\n inset: 5,\n marks: [\n Plot.dot(data_chart, {\n x: \"1\",\n y: \"0\",\n r: +circle_size,\n fillOpacity: 0.6,\n fill: \"red\"\n })\n ],\n x: {\n axis: null,\n label: \"\"\n },\n y: {\n label: \"↑ Date\",\n //ticks: 10,\n tickFormat: d3.timeFormat(\"%b %y\") // d3.timeFormat(\"%d %b %y\")\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5052,"value":"md`\n### DATA `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5867,"value":"data_temp1 = FileAttachment(\"data_covid.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5963,"value":"data_temp2 = data_temp1.map(function (d) {\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n const formatWeek = d3.timeFormat(\"%U-%Y\");\n return {\n id: d.dep + d.jour + \"0\",\n dep: +d.dep < 10 ? (+d.dep).toString() : d.dep,\n jour: parseDate(d.jour),\n jour_fr: dateFr(parseDate(d.jour)),\n week: formatWeek(parseDate(d.jour)),\n indic_hosp: +d.incid_hosp,\n indic_rea: +d.incid_rea,\n indic_rad: +d.incid_rad,\n indic_dc: +d.incid_dc\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6043,"value":"filtrage région","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6033,"value":"data = {\n if (region == \"Occitanie\") {\n var temp = data_temp2.filter(\n (d) =>\n (d.dep == 9) |\n (d.dep == 11) |\n (d.dep == 12) |\n (d.dep == 30) |\n (d.dep == 31) |\n (d.dep == 32) |\n (d.dep == 34) |\n (d.dep == 46) |\n (d.dep == 48) |\n (d.dep == 65) |\n (d.dep == 66) |\n (d.dep == 81) |\n (d.dep == 82)\n );\n } else {\n temp = data_temp2;\n }\n return temp;\n\n temp = data_temp2; //.filter(d => d.jour < new Date(\"2020-05-05\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5996,"value":"Pour lisser les données journalières, le nombre de morts est regroupé par semaine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5993,"value":"\ndata_group_week = d3\n .nest()\n .key((d) => d.week)\n .rollup(function (v) {\n return {\n incid_dc: d3.sum(v, function (d) {\n return d.indic_dc;\n })\n };\n })\n .entries(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6002,"value":"Il faut ensuite construire une array pour chaque décès avec une date aléatoire dans la semaine (axe y) et une position aléatoire (axe x)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5999,"value":"data_chart = {\n const parseWeek = d3.utcParse(\"%U-%Y\");\n let temp = [];\n\n for (let i = 0; i < data_group_week.length; i++) {\n for (let j = 0; j < data_group_week[i].value.incid_dc; j++) {\n temp.push([\n new Date(\n +new Date(parseWeek(data_group_week[i].key)) +\n Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 7)\n ),\n d3.randomUniform(0, width)()\n ]);\n }\n }\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5192,"value":"raw_data_hosp_new = d3.dsv(\n \";\",\n \"https://www.data.gouv.fr/fr/datasets/r/6fadff46-9efd-4c53-942a-54aca783c30c\",\n (d) => {\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n const formatWeek = d3.timeFormat(\"%U-%Y\");\n const r = {\n id: d.dep + d.jour + \"0\",\n dep: +d.dep < 10 ? (+d.dep).toString() : d.dep,\n jour: parseDate(d.jour),\n jour_fr: dateFr(parseDate(d.jour)),\n week: formatWeek(parseDate(d.jour)),\n indic_hosp: +d.incid_hosp,\n indic_rea: +d.incid_rea,\n indic_rad: +d.incid_rad,\n indic_dc: +d.incid_dc\n };\n return r;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6054,"value":"md`\n### PARAMETRAGE \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5783,"value":"date_value = data[data.length - 1].jour_fr","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5307,"value":"margin_scatter = ({ top: 20, right: 5, bottom: 30, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6058,"value":"md`\n### FONCTIONS \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5302,"value":"x = d3\n .scaleLinear()\n .domain([0, 800])\n .range([margin_scatter.left, width - margin_scatter.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5320,"value":"y = d3\n .scaleTime()\n .domain([data_chart[0][0], data_chart[data_chart.length - 1][0]])\n .rangeRound([height - margin_scatter.bottom, margin_scatter.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5195,"value":"function dateFr(date) {\n var jours = new Array(\"dim\", \"lun\", \"mar\", \"mer\", \"jeu\", \"ven\", \"sam\");\n var mois = new Array(\n \"jan\",\n \"fev\",\n \"mars\",\n \"avr\",\n \"mai\",\n \"juin\",\n \"juil\",\n \"aout\",\n \"sep\",\n \"oct\",\n \"nov\",\n \"dec\"\n );\n //var message = jours[date.getDay()] + \" \"; // nom du jour\n var message = date.getDate() + \" \"; // numero du jour\n message += mois[date.getMonth()] + \" \"; // mois\n message += date.getFullYear();\n return message;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5501,"value":"dateInFr = d3\n .scaleOrdinal()\n .domain([\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\"\n ])\n .range([\n \"Jan\",\n \"Fev\",\n \"Mar\",\n \"Avr\",\n \"Mai\",\n \"Juin\",\n \"Juil\",\n \"Aout\",\n \"Sept\",\n \"Oct\",\n \"Nov\",\n \"Dec\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5078,"value":"md`\n## IMPORT \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5116,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5148,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5150,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2528,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2285,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 48:"$47:body"