2c:null 2d:["$","title",null,{"children":"Mon premier graphique Observable Plot | Romain Vuillemot | Observable"}] 32:T796,scatterplot = (var_x, var_y) => { const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const width = 400 const height = 300 // https://observablehq.com/@d3/margin-convention const svg = d3.create("svg") .attr("width", width) .attr("height", height) const x = d3.scaleLinear() .domain([d3.min(raw_dataset, d => d[var_x]), d3.max(raw_dataset, d => d[var_x])]) .range([margin.left, width -margin.left-margin.right]) const y = d3.scaleLinear() .domain([d3.min(raw_dataset, d => d[var_y]), d3.max(raw_dataset, d => d[var_y])]) .range([margin.top, height -margin.top-margin.bottom]) const c = d3.scaleOrdinal().domain(species).range(d3.schemeCategory10) svg.selectAll("circle").data(raw_dataset).enter().append("circle") .attr("cx", d => x(d[var_x])) .attr("cy", d => y(d[var_y])) .attr("r", d => d[var_y]) .attr("fill", d => c(d["species"])) const xAxis = g => g.append('g') .attr('transform', `translate(0, ${height-margin.bottom-margin.top})`) .call(d3.axisBottom(x)) const yAxis = g => g.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) svg .call(xAxis) .call(yAxis) var legend = svg.selectAll(".legend") .data(c.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return c(d); }) .attr("transform", function(d, i) { return "translate(" + (width -10) + "," + 10 + ")"; }) legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .attr("font-size", 15) .style("text-anchor", "end") .text(function(d) { return d; }); return svg.node() }33:[{"id":"15bab3b88f8bebc2df7ac3e543b7d9d7b9f00d3a91f5bfc57ba353a671a5a824441841cf1724e2501a33a8a69208b7f811493c1c33be746c99e303674bff283a","href":"https://static.observableusercontent.com/files/15bab3b88f8bebc2df7ac3e543b7d9d7b9f00d3a91f5bfc57ba353a671a5a824441841cf1724e2501a33a8a69208b7f811493c1c33be746c99e303674bff283a","name":"iris.csv","type":"text/csv","lastModified":1695131137872.439,"size":3716},{"id":"2d0c82c16eedd850acb9e4e956b2bfefaacd0b7a63f3fbff51d6c84c25ca60c3eda2c687abac21ab013b4df4ddeca415653f14d0386ba0c09bcfadeb31eccb7e","href":"https://static.observableusercontent.com/files/2d0c82c16eedd850acb9e4e956b2bfefaacd0b7a63f3fbff51d6c84c25ca60c3eda2c687abac21ab013b4df4ddeca415653f14d0386ba0c09bcfadeb31eccb7e","name":"edt-matiere.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1695133110187.6,"size":13572},{"id":"05604599232e1526d016e7edb47ad588e3dbada51cc99edc08f34411ef1b8dfcbb4ddc3a67a4fe8f71fcc02a02b2dedfeb22fdf4683508dc96a8aedc2e493799","href":"https://static.observableusercontent.com/files/05604599232e1526d016e7edb47ad588e3dbada51cc99edc08f34411ef1b8dfcbb4ddc3a67a4fe8f71fcc02a02b2dedfeb22fdf4683508dc96a8aedc2e493799","name":"edt-matiere.csv","type":"text/csv","lastModified":1695134219722.01,"size":17004}] 30:{"id":"ea9616e2326710b6","slug":"visu-cdl","title":"Mon premier graphique Observable Plot","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-19T13:28:12.099Z","update_time":"$D2023-09-20T14:53:32.287Z","view_time":null,"first_public_time":"$D2023-09-19T13:28:12.099Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae8b6fc79ca6fd4b","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":"starter_2024","bio":"dataviz & research"},"version":410,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"560201c9c61a188e","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":null,"bio":"dataviz & research"}],"members":[{"type":"individual","id":"560201c9c61a188e","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mon premier graphique Observable Plot","cells":[{"id":0,"value":"# Mon premier graphique Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"i = 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"j = 2 + k","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof k = Inputs.range([100, 200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"viewof var_x = Inputs.select(cats)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"viewof var_y = Inputs.select(cats)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"scatterplot(var_x, var_y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"species = [...new Set(raw_dataset.map(d => d[\"species\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"raw_dataset = FileAttachment(\"iris.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"cats = raw_dataset.columns.filter(d => d != \"species\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"dataset = raw_dataset.map(d => {\n\n d.sepal_length = parseFloat(d.sepal_length)\n d.petal_length = parseFloat(d.petal_length)\n d.sepal_width = parseFloat(d.sepal_width)\n d.petal_width = parseFloat(d.petal_width)\n \n return d\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Inputs.table(dataset)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"### Stats descriptifs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"dataset.map(d => parseFloat(d.sepal_length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"Math.max(...dataset.map(d => parseFloat(d.sepal_length)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"new Set(dataset.map(d => d.species))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"### Visualisation avec plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"Plot.dot(dataset, \n {x: \"petal_length\", \n y: \"petal_width\",\n r: \"petal_length\",\n fill: \"species\",\n }).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"Plot.rectY(dataset, Plot.binX({y: \"count\"}, {x: \"petal_length\"})).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"edt = FileAttachment(\"edt-matiere.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"e = edt.sheet(\"Sheet1\", {headers: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"csv_raw = FileAttachment(\"edt-matiere.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"csv = csv_raw.map((e, i) => {\n const d = Object.assign({}, e)\n d.Date = parseTime(e.Date)\n d.week = getISOWeekNumber(d.Date)\n\n d.hour_start = parseHour(d.Heure.split(\"-\")[0])\n d.full_time_start = parseDateHour(d.Date + \" \" + d.Heure.split(\"-\")[0])\n \n d.index = i\n return d\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"Plot.line(csv, {x: \"Date\", y: \"index\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"groupes = [...new Set(csv.map(d => d[\"Groupe(s)\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"weeks = [...new Set(csv.map(d => d[\"week\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"heures = [...new Set(csv.map(d => d[\"Heure\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"hour_starts = [...new Set(csv.map(d => d[\"hour_start\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"parseTime = d3.timeParse(\"%m/%d/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof f = Inputs.checkbox(groupes, {value: groupes})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"Plot.plot({\n marks:[\n Plot.dot(csv.filter(d => d[\"Groupe(s)\"].length < 2 && f.indexOf(d[\"Groupe(s)\"]) >= 0), \n {x: \"Date\", y: \"Groupe(s)\", fill: \"Groupe(s)\"}\n ),\n Plot.tickX(csv.filter(d => d[\"Groupe(s)\"].length > 2 && f.indexOf(d[\"Groupe(s)\"]) >= 0), \n {x: \"Date\", y: \"Groupe(s)\", stroke: \"Groupe(s)\"}) \n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"### Pour changer la langue des axes ([source](https://observablehq.com/@john-guerra/d3-locale))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"locale = fetch(\n \"https://unpkg.com/d3-time-format@2/locale/fr-FR.json\"\n).then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"d3 = require(\"d3@6\").then(_d3 => (_d3.timeFormatDefaultLocale(locale), _d3))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"{\n const target = html``;\n d3.select(target)\n .append(\"g\")\n .call(d3.axisBottom(x));\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"x = d3\n .scaleTime()\n .domain([new Date() - 3600000 * 24 * 7, new Date()])\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"getISOWeekNumber = (date) => {\n const currentDate = new Date(date);\n currentDate.setHours(0, 0, 0, 0); // Set the time to midnight to avoid time zone issues\n\n // Find the Thursday in this week (ISO week starts on Monday)\n currentDate.setDate(currentDate.getDate() + 3 - (currentDate.getDay() + 6) % 7);\n\n // Calculate the year of the Thursday\n const year = currentDate.getFullYear();\n\n // Calculate the day number of the year for the Thursday\n const dayNumber = Math.floor((currentDate - new Date(year, 0, 1)) / 86400000);\n\n // Calculate the week number\n const weekNumber = 1 + Math.floor(dayNumber / 7);\n\n return weekNumber;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"## Mon EDT\n\nTODO\n- specs Plot\n- axes X et Y\n- filtres\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"viewof w = Inputs.range(d3.extent(weeks), {step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof g = Inputs.select(groupes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"Plot.plot({\n title: \"Emploit du temps d'un groupe\",\n subtitle: \"Sélectionner le groupe et la semaine\",\n marginLeft: 100,\n x: {domain:[\"lun\", \"mar\", \"mer\", \"jeu\", \"ven\", \"sam\", \"dim\"]},\n y: {tickFormat: d3.timeFormat(\"%H:%M h\")},//, domain: heures},\n marks: [\n Plot.cell(csv.filter(d => d[\"Groupe(s)\"] == g && d[\"week\"] == w)\n , \n {x: \"Jour\", y:\"hour_start\"}\n )]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"Plot.plot({\n padding: 0,\n y: {\n tickFormat: Plot.formatMonth()\n },\n color: {\n scheme: \"BuRd\",\n legend: true,\n domain: [0, 10]\n },\n marks: [\n Plot.cell(csv, Plot.group({fill: \"count\"}, {\n x: d => d.Date.getUTCDate(),\n y: d => d.Date.getUTCMonth(),\n fill: \"count\",\n inset: 0.5\n })),\n Plot.text(csv, Plot.group({fill: \"count\"}, {\n x: d => d.Date.getUTCDate(),\n y: d => d.Date.getUTCMonth(),\n text: \"count\"\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"parseHour = d3.timeParse(\"%H:%M \");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"parseDateHour = d3.timeParse(\"%Y-%m-%d %H:%M \");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"