2c:null 2d:["$","title",null,{"children":"Raconter une histoire avec un nuage de points | ToulouseDataviz | Observable"}] 32:T23d9,scatterplot = { const backgroundColor = "#f0f0f0"; const textColor = "#333"; const gridColor = "#ddd"; const widthWithMargin = width + margin_scatter.left + margin_scatter.right; const heightWithMargin = height + margin_scatter.bottom + margin_scatter.top; // Get new canvas context const ctx = DOM.context2d(widthWithMargin, heightWithMargin); ctx.canvas.style.display = "block"; ctx.canvas.style.maxWidth = "100%"; ctx.canvas.style.margins = "auto"; ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, widthWithMargin, heightWithMargin); // ========================================= Tracé des points ============================================= const drawDot = (d) => { ctx.strokeStyle = gender === genreID_None ? textColor : color_gender(d.gender); ctx.beginPath(); if (graph_option.find((d) => d == "jitterAge")) { ctx.arc( x(d.chiptime) + margin_scatter.left, y(d.ageRand) + margin_scatter.top, 1, 0, circle_size * Math.PI ); } else { ctx.arc( x(d.chiptime) + margin_scatter.left, y(d.age) + margin_scatter.top, 1, 0, circle_size * Math.PI ); } ctx.fill(); ctx.stroke(); }; // ========================================= Legende ========================================== ctx.fillStyle = textColor; ctx.textAlign = "right"; ctx.font = "16px sans-serif"; ctx.fillText( "Nombre de points : " + nyc_marathon_2011_filter.length.toLocaleString("fr-FR"), width, y(10) + margin_scatter.top ); // ========================================= Tracé de la grille =========================================== const grid = () => { ctx.beginPath(); ctx.lineWidth = 1; //grid X var tick = [ 120, 150, 180, 210, 240, 270, 300, 330, 360, 390, 420, 450, 480, 510, 540, 570, 600 ]; tick.forEach(function (d) { ctx.moveTo(x(d) + margin_scatter.left, margin_scatter.top); ctx.lineTo( x(d) + margin_scatter.left, height + margin_scatter.top - margin_scatter.bottom ); }); //grid y var tickCount = 10, tickSize = 6, tickPadding = 3, ticks = y.ticks(tickCount), tickFormat = y.tickFormat(tickCount); ticks.forEach(function (d) { ctx.moveTo(margin_scatter.left + 40, y(d) + margin_scatter.top); ctx.lineTo( width + margin_scatter.left - margin_scatter.right, y(d) + margin_scatter.top ); }); ctx.strokeStyle = gridColor; ctx.stroke(); }; // ========================================= Tracé des axes ============================================= const xAxis = () => { var tickCount = 15, tickSize = 10, ticks = x.ticks(tickCount), tickFormat = x.tickFormat(); ctx.beginPath(); var tick = [ 120, 150, 180, 210, 240, 270, 300, 330, 360, 390, 420, 450, 480, 510, 540, 570, 600 ]; var tickValue = [120, 180, 240, 300, 360, 420, 480, 540]; tick.forEach(function (d) { ctx.moveTo( x(d) + margin_scatter.left, height + margin_scatter.top - margin_scatter.bottom ); ctx.lineTo( x(d) + margin_scatter.left, height + margin_scatter.top - margin_scatter.bottom + tickSize ); }); ctx.strokeStyle = textColor; ctx.stroke(); ctx.fillStyle = textColor; ctx.textBaseline = "top"; ctx.font = "16px sans-serif"; ctx.textAlign = "center"; for (var i in tickValue) { ctx.fillText( toHHMMSS(tickValue[i]).slice(0, 4), x(tickValue[i]) + margin_scatter.left, height + margin_scatter.top - margin_scatter.bottom + tickSize ); } ctx.textAlign = "right"; ctx.fillText( "Temps à l'arrivée en hh:mm", width + margin_scatter.left, height + margin_scatter.top + 25 - margin_scatter.bottom + tickSize ); ctx.textAlign = "left"; ctx.font = "16px sans-serif"; ctx.fillText( "Age en année", x(120) + margin_scatter.left, margin_scatter.top + 15 - margin_scatter.bottom + tickSize ); }; const yAxis = () => { var tickCount = 10, tickSize = 6, tickPadding = 3, ticks = y.ticks(tickCount), tickFormat = y.tickFormat(tickCount); // ticks ctx.beginPath(); ctx.font = "16px sans-serif"; ticks.forEach(function (d) { ctx.moveTo(margin_scatter.left + 40, y(d) + margin_scatter.top); ctx.lineTo(margin_scatter.left + 40 - 6, y(d) + margin_scatter.top); }); ctx.strokeStyle = textColor; ctx.stroke(); // text ctx.textAlign = "right"; ctx.textBaseline = "middle"; ticks.forEach(function (d) { ctx.fillText( tickFormat(d), margin_scatter.left - tickSize - tickPadding + 40, y(d) + margin_scatter.top ); }); }; // ========================================= Tracé des stats ============================================= const statsA = () => { // Age ctx.beginPath(); ctx.font = "14px sans-serif"; if (graph_option.find((d) => d == "qA")) { ctx.fillStyle = "Salmon"; ctx.textAlign = "left"; ctx.fillText( format(statValues.Q1_age), x(600) + margin_scatter.left, y(statValues.Q1_age) + margin_scatter.top ); ctx.fillText( "(Q1)", x(600) + margin_scatter.left, y(statValues.Q1_age) + 20 + margin_scatter.top ); ctx.textAlign = "left"; ctx.fillText( format(statValues.Q3_age), x(600) + margin_scatter.left, y(statValues.Q3_age) + margin_scatter.top ); ctx.fillText( "(Q3)", x(600) + margin_scatter.left, y(statValues.Q3_age) + 20 + margin_scatter.top ); ctx.rect( x(122) + margin_scatter.left, y(statValues.Q1_age) + margin_scatter.top, x(600) - x(122), y(statValues.Q3_age) - y(statValues.Q1_age) ); } if (graph_option.find((d) => d == "mA")) { ctx.fillStyle = "Salmon"; ctx.textAlign = "left"; ctx.fillText( format(statValues.median_age), x(600) + margin_scatter.left, y(statValues.median_age) + margin_scatter.top ); ctx.textAlign = "center"; ctx.fillText( "(médiane)", x(600) + margin_scatter.left, y(statValues.median_age) + 20 + margin_scatter.top ); ctx.moveTo( x(122) + margin_scatter.left, y(statValues.median_age) + margin_scatter.top ); ctx.lineTo( x(600) + margin_scatter.left, y(statValues.median_age) + margin_scatter.top ); } ctx.strokeStyle = "LightSalmon"; ctx.stroke(); }; const statsT = () => { // Time ctx.beginPath(); ctx.font = "14px sans-serif"; if (graph_option.find((d) => d == "qT")) { ctx.fillStyle = "green"; ctx.textAlign = "right"; ctx.fillText( toHHMMSS(statValues.Q1_time).slice(0, 4), x(statValues.Q1_time) + margin_scatter.left, y(12) + margin_scatter.top ); ctx.fillText( "(Q1)", x(statValues.Q1_time) + margin_scatter.left, y(10) + margin_scatter.top ); ctx.textAlign = "left"; ctx.fillText( toHHMMSS(statValues.Q3_time).slice(0, 4), x(statValues.Q3_time) + margin_scatter.left, y(12) + margin_scatter.top ); ctx.fillText( "(Q3)", x(statValues.Q3_time) + margin_scatter.left, y(10) + margin_scatter.top ); ctx.rect( x(statValues.Q1_time) + margin_scatter.left, y(85) + margin_scatter.top, x(statValues.Q3_time) - x(statValues.Q1_time), y(8) - y(85) ); } if (graph_option.find((d) => d == "mT")) { ctx.strokeStyle = "lightgreen"; ctx.fillStyle = "green"; ctx.textAlign = "center"; ctx.fillText( toHHMMSS(statValues.median_time).slice(0, 4), x(statValues.median_time) + margin_scatter.left, y(5) + margin_scatter.top ); ctx.fillText( "(médiane)", x(statValues.median_time) + margin_scatter.left, y(3) + margin_scatter.top ); ctx.moveTo( x(statValues.median_time) + margin_scatter.left, y(8) + margin_scatter.top ); ctx.lineTo( x(statValues.median_time) + margin_scatter.left, y(85) + margin_scatter.top ); } ctx.strokeStyle = "lightgreen"; ctx.stroke(); }; statsT(); statsA(); grid(); xAxis(); yAxis(); nyc_marathon_2011_filter.map(drawDot); // ========================================= simulation explorateur de résultat ============================== ctx.font = "24px sans-serif"; if (runner == "runner A") { ctx.moveTo(x(250) + margin_scatter.left, margin_scatter.top); ctx.moveTo(margin_scatter.left + 40, y(44) + margin_scatter.top); ctx.arc( x(250) + margin_scatter.left, y(44) + margin_scatter.top, 5, 0, 5 * Math.PI ); ctx.fillStyle = "red"; ctx.fill(); } yield ctx.canvas; }33:[] 30:{"id":"46828e9f593e4483","slug":"raconter-une-histoire-avec-des-donnees","title":" Raconter une histoire avec un nuage de points","thumbnail":"8fece104091cbcdf7d8dbda38f0df2c081604aea712fdce0d5213b6848b6e796","access_level":"public","create_time":"$D2024-02-04T00:14:23.667Z","update_time":"$D2024-02-09T16:31:43.490Z","view_time":null,"first_public_time":"$D2024-02-04T01:10:34.945Z","has_unpublished_edits":null,"fork":{"id":"42a49ed6df6801ac","slug":null,"title":" Raconter une histoire avec des données ","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":1001,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null}],"members":[{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d3620e7df67703ac","slug":"production-design-guidelines","title":"Guide DataViz","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"titling":"auto","title":" Raconter une histoire avec un nuage de points","cells":[{"id":0,"value":"md`# Raconter une histoire avec un nuage de points\nV1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"html0 = html`

${\"Résultats du marathon de New York 2011\"}

\n ${viewof gender} ${viewof graph_option} ${viewof circle_size}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"viewof graph_option = Inputs.checkbox(\n new Map([\n [\"Age médian\", \"mA\"],\n [\"Temps médian\", \"mT\"],\n [\"Age sur les quartiles Q1-Q3\", \"qA\"],\n [\"Temps sur les quartiles Q1-Q3\", \"qT\"],\n [\"Gigue sur les âges\", \"jitterAge\"]\n ]),\n { value: [\"jitterAge\"], label: \"Options d'affichage\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof circle_size = Inputs.radio([\".1\", \".2\", \".5\", \"1\", \"1.5\", \"2\"], {\n label: \"Choisir le rayon des circles\",\n value: \"1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof gender = Inputs.select(\n new Map([\n [\"Pas de distinction\", \"none\"],\n [\"Hommes et femmes\", \"both\"],\n [\"Hommes\", \"M\"],\n [\"Femmes\", \"F\"]\n ]),\n { value: \"Pas de distinction\", label: \"Participants\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`\nDEROULE \n1- Quel est le nombre de points ? \n\n2- De quoi parle ce jeu de données?\n\n3- Ou se situe la médiane du temps à l'arrivée ? \n\n4- Ou se situe la mediane des ages ? \n\n5- Quelles sont les valeurs de Q1 et Q3 pour le temps? \n\n6- Quelles sont les valeurs de Q1 et Q3 pour l'age? \n\nPasser en mode couleur \n\n7- Quelle est la différence de performance entre homme et femme? \n\nRegler le diamètre des cercles pour faire apparaitre le mieux le quadrillage dans le nuage de points \n\n8- Qu'est ce que ce quadrillage signifie? comparer le quadrillage H et F? \n\n9- et pourtant les données de base ont été modifiées ! \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"viewof runner = Inputs.select([\"\", \"runner A\", \"runner B\", \"runner C\"], {\n value: \"\",\n label: \"Select a runner\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"nyc_marathon_2011 = d3.csv(\"https://raw.githubusercontent.com/ToulouseDataViz/toulousedataviz.github.io/master/NYC_marathon_2011_results.csv\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"//nyc_marathon_2011 = d3.csvParse(await FileAttachment(\"NYC_marathon_2011_results.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"nyc_marathon_2011_filter = nyc_marathon_2011.filter((d) =>\n (gender === genreID_None) | (gender === genreID_Both) ? d : d.gender == gender\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"nyc_marathon_2011_filter_sortA = nyc_marathon_2011_filter.map(d=>d.ageRand).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"nyc_marathon_2011_filter_sortT = nyc_marathon_2011_filter.map(d=>d.chiptime).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`## Stats`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"statValues = ({\n max_age: d3.max(nyc_marathon_2011_filter_sortA),\n min_age : d3.min(nyc_marathon_2011_filter_sortA),\n max_time : d3.max(nyc_marathon_2011_filter_sortT),\n min_time : d3.min(nyc_marathon_2011_filter_sortT),\n median_age : d3.quantile(nyc_marathon_2011_filter_sortA,.5),\n Q1_age : d3.quantile(nyc_marathon_2011_filter_sortA,.25),\n Q3_age : d3.quantile(nyc_marathon_2011_filter_sortA,.75),\n median_time :d3.quantile(nyc_marathon_2011_filter_sortT,.5),\n Q1_time : d3.quantile(nyc_marathon_2011_filter_sortT,.25),\n Q3_time : d3.quantile(nyc_marathon_2011_filter_sortT,.75),\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"margin_scatter = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"x = d3.scaleLinear()\n\t\t\t.domain([120, 600])\n\t\t\t.range([margin_scatter.left, width - margin_scatter.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"y = d3.scaleLinear()\n\t\t\t.domain([0, 100])\n\t\t\t.range([height - margin_scatter.bottom, margin_scatter.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"color_gender = d3\n .scaleOrdinal()\n .domain([\"M\", \"F\"])\n .range([\"#3182bd\", \"#fa9fb5\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function toHHMMSS (totalSeconds){\n\tvar hours = Math.floor(totalSeconds / 60);\n\tvar minutes = Math.floor(totalSeconds % 60);\n\tvar seconds = Math.floor(totalSeconds % 60 * 60);\n\tvar timeHHMMSS= hours +':'+ ('0'+minutes).slice(-2) +':'+ ('0'+seconds).slice(-2);\t\n\treturn timeHHMMSS;\n\t\t}\t","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"format = d3.format(\".0f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"genreID_None = \"none\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"genreID_Both = \"both\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"genreID_M = \"M\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"genreID_F = \"F\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"genres = [\n { value: genreID_None, label: \"Pas de distinction\" },\n { value: genreID_Both, label: \"Hommes et femmes\" },\n { value: genreID_M, label: \"Hommes\" },\n { value: genreID_F, label: \"Femmes\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"