2f:T44c,chart = { const data = [{"cat":"A", "val": 1}, {"cat":"B", "val": 10}, {"cat":"C", "val": 2}, {"cat":"D", "val": 15}, {"cat":"E", "val": 45}] const y =d3.scaleLinear().domain([0, d3.max(data, d=>d.val)]).range([height-margin.bottom, margin.top]) const x = d3.scaleBand().domain(new Set(data.map(d => d.cat))).range([margin.left, width-margin.right]) const c = d3.scaleOrdinal(d3.schemeCategory10) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const yAxis = g => g .attr("transform", `translate(,$[margin.left, 0]`) .call(d3.axisBottom(y)) const xAxis = g => g .attr("transform", `translate(0,$[height - margin.bottom]`) .call(d3.axisLeft(y)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.selectAll("rect").data(data).enter().append("rect") .attr("x", (d, i) => {return x(d.cat)}) .attr("y", (d, i) => {return height - margin.bottom - y(d.val)}) .attr("height", (d, i) => {return y(d.val)}) .attr("width", x.bandwidth()-2) .attr("fill", d => c(d.cat)) return svg.node(); }30:Tf38,function scatterplot(data, xVar, yVar, { width = 700, height = 500, marginTop = 20, marginRight = 140, marginBottom = 50, marginLeft = 60, useSymbols = false } = {}) { const innerWidth = width - marginLeft - marginRight; const innerHeight = height - marginTop - marginBottom; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const g = svg.append("g") .attr("transform", `translate(${marginLeft},${marginTop})`); // échelles const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[xVar]) + 0.5]) .range([0, innerWidth]) .nice(); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[yVar]) + 0.5]) .range([innerHeight, 0]) .nice(); const species = Array.from(new Set(data.map(d => d.species))); const colorScale = d3.scaleOrdinal() .domain(species) .range(d3.schemeCategory10); // Bonus : on rajoute des symboles selon la catégorie de fleur const symbolScale = d3.scaleOrdinal() .domain(species) .range([d3.symbolCircle, d3.symbolSquare, d3.symbolTriangle]); g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(xScale)) .call(g => g.append("text") .attr("x", innerWidth / 2) .attr("y", 40) .attr("fill", "currentColor") .attr("text-anchor", "middle") .style("font-size", "12px") .text(xVar.replace(/_/g, " ").toUpperCase())); g.append("g") .call(d3.axisLeft(yScale)) .call(g => g.append("text") .attr("transform", "rotate(-90)") .attr("x", -innerHeight / 2) .attr("y", -45) .attr("fill", "currentColor") .attr("text-anchor", "middle") .style("font-size", "12px") .text(yVar.replace(/_/g, " ").toUpperCase())); // On dessine les points et/ou symboles if (useSymbols) { g.selectAll(".symbol") .data(data) .join("path") .attr("class", "symbol") .attr("transform", d => `translate(${xScale(d[xVar])},${yScale(d[yVar])})`) .attr("d", d => d3.symbol() .type(symbolScale(d.species)) .size(80)()) .attr("fill", d => colorScale(d.species)) .attr("opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 1); } else { g.selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(d[xVar])) .attr("cy", d => yScale(d[yVar])) .attr("r", 5) .attr("fill", d => colorScale(d.species)) .attr("opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 1); } const legend = g.append("g") .attr("class", "legend") .attr("transform", `translate(${innerWidth + 20}, 0)`); legend.append("text") .attr("x", 0) .attr("y", 0) .attr("font-weight", "bold") .attr("font-size", "12px") .text("Espèces"); species.forEach((s, i) => { const legendRow = legend.append("g") .attr("class", "legend-item") .attr("transform", `translate(0, ${i * 25 + 15})`); if (useSymbols) { legendRow.append("path") .attr("transform", "translate(10, 5)") .attr("d", d3.symbol() .type(symbolScale(s)) .size(80)()) .attr("fill", colorScale(s)) .attr("opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 1); } else { legendRow.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", colorScale(s)) .attr("opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 1); } legendRow.append("text") .attr("x", 25) .attr("y", 12) .attr("font-size", "11px") .style("alignment-baseline", "middle") .text(s); }); return svg.node(); }31:Tce1,function lineChart(data, { width = 900, height = 500, marginTop = 20, marginRight = 140, marginBottom = 50, marginLeft = 60 } = {}) { const innerWidth = width - marginLeft - marginRight; const innerHeight = height - marginTop - marginBottom; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const g = svg.append("g") .attr("transform", `translate(${marginLeft},${marginTop})`); const allDates = data.flatMap(d => d.values.map(v => v.date)); const allPrices = data.flatMap(d => d.values.map(v => v.price)); const xScale = d3.scaleTime() .domain(d3.extent(allDates)) .range([0, innerWidth]) .nice(); const yScale = d3.scaleLinear() .domain([0, d3.max(allPrices)]) .range([innerHeight, 0]) .nice(); // Echelle de couleur const colorScale = d3.scaleOrdinal() .domain(data.map(d => d.symbol)) .range(d3.schemeCategory10); const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.price)) .curve(d3.curveMonotoneX); const formatDate = d3.timeFormat("%b %Y"); g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(xScale) .tickFormat(formatDate) .ticks(d3.timeMonth.every(6))) // Un tick tout les 6 mois .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 45) .attr("fill", "currentColor") .attr("text-anchor", "middle") .style("font-size", "12px") .text("Date"); g.append("g") .call(d3.axisLeft(yScale)); g.append("text") .attr("transform", "rotate(-90)") .attr("x", -innerHeight / 2) .attr("y", -45) .attr("fill", "currentColor") .attr("text-anchor", "middle") .style("font-size", "12px") .text("Price (USD)"); const lines = g.selectAll(".line") .data(data) .join("path") .attr("class", "line") .attr("d", d => line(d.values)) .attr("fill", "none") .attr("stroke", d => colorScale(d.symbol)) .attr("stroke-width", 2) .attr("opacity", 0.8); // Légende const legend = g.append("g") .attr("class", "legend") .attr("transform", `translate(${innerWidth + 20}, 0)`); legend.append("text") .attr("x", 0) .attr("y", 0) .attr("font-weight", "bold") .attr("font-size", "12px") .text("Company"); data.forEach((company, i) => { const legendRow = legend.append("g") .attr("class", "legend-item") .attr("transform", `translate(0, ${i * 25 + 15})`); legendRow.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", colorScale(company.symbol)) .attr("opacity", 0.8); legendRow.append("text") .attr("x", 25) .attr("y", 12) .attr("font-size", "11px") .style("alignment-baseline", "middle") .text(company.symbol); }); // titre svg.append("text") .attr("x", width / 2) .attr("y", marginTop / 2 + 5) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Stock Prices Over Time"); return svg.node(); }32:T894,function histogram(bins, attributeName, { width = 700, height = 500, marginTop = 20, marginRight = 20, marginBottom = 50, marginLeft = 60 } = {}) { const innerWidth = width - marginLeft - marginRight; const innerHeight = height - marginTop - marginBottom; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const xScale = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([marginLeft, width - marginRight]); const yScale = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .range([height - marginBottom, marginTop]) .nice(); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(xScale)) .call(g => g.append("text") .attr("x", (width - marginLeft - marginRight) / 2 + marginLeft) .attr("y", 40) .attr("fill", "currentColor") .attr("text-anchor", "middle") .style("font-size", "12px") .text(attributeName.replace(/_/g, " ").toUpperCase())); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(yScale)) .call(g => g.append("text") .attr("transform", "rotate(-90)") .attr("x", -(height - marginTop - marginBottom) / 2 - marginTop) .attr("y", -45) .attr("fill", "currentColor") .attr("text-anchor", "middle") .style("font-size", "12px") .text("Frequency")); svg.selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0) + 1) .attr("y", d => yScale(d.length)) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 2)) .attr("height", d => yScale(0) - yScale(d.length)) .attr("fill", "steelblue") .attr("opacity", 0.7) .attr("stroke", "white") .attr("stroke-width", 1); svg.append("text") .attr("x", width / 2) .attr("y", marginTop / 2 + 5) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .text(`Distribution of ${attributeName.replace(/_/g, " ")}`); return svg.node(); } 33:Tdaa,function scatterplotMatrix(data, attributes, { size = 150, padding = 30 } = {}) { const n = attributes.length; const totalSize = size * n + padding * (n + 1) + 100; const svg = d3.create("svg") .attr("width", totalSize) .attr("height", totalSize) .attr("viewBox", [0, 0, totalSize, totalSize]) .attr("style", "max-width: 100%; height: auto;"); const species = Array.from(new Set(data.map(d => d.species))); const colorScale = d3.scaleOrdinal() .domain(species) .range(d3.schemeCategory10); attributes.forEach((yAttr, i) => { attributes.forEach((xAttr, j) => { const x = j * (size + padding) + padding; const y = i * (size + padding) + padding; const g = svg.append("g") .attr("transform", `translate(${x},${y})`); const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[xAttr])]) .range([0, size]); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[yAttr])]) .range([size, 0]); g.append("rect") .attr("width", size) .attr("height", size) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 1); if (i === j) { // Diagonale : Histogramme const values = data.map(d => d[xAttr]); const bin = d3.bin() .domain(d3.extent(values)) .thresholds(15); const bins = bin(values); const histYScale = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .range([size, 0]); g.selectAll("rect.bar") .data(bins) .join("rect") .attr("class", "bar") .attr("x", d => xScale(d.x0)) .attr("y", d => histYScale(d.length)) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 1)) .attr("height", d => size - histYScale(d.length)) .attr("fill", "steelblue") .attr("opacity", 0.6); } else { // Hors diagonale : Scatterplot g.selectAll("circle") .data(data) .join("circle") .attr("cx", d => xScale(d[xAttr])) .attr("cy", d => yScale(d[yAttr])) .attr("r", 2) .attr("fill", d => colorScale(d.species)) .attr("opacity", 0.6); } if (i === n - 1) { g.append("text") .attr("x", size / 2) .attr("y", size + 20) .attr("text-anchor", "middle") .attr("font-size", "10px") .text(xAttr.replace(/_/g, " ")); } if (j === 0) { g.append("text") .attr("transform", "rotate(-90)") .attr("x", -size / 2) .attr("y", -15) .attr("text-anchor", "middle") .attr("font-size", "10px") .text(yAttr.replace(/_/g, " ")); } }); }); //Légende const legend = svg.append("g") .attr("transform", `translate(${totalSize - 100}, 20)`); legend.append("text") .attr("font-weight", "bold") .attr("font-size", "11px") .text("Species"); species.forEach((s, i) => { const item = legend.append("g") .attr("transform", `translate(0, ${i * 18 + 15})`); item.append("circle") .attr("cx", 5) .attr("cy", 0) .attr("r", 4) .attr("fill", colorScale(s)); item.append("text") .attr("x", 15) .attr("y", 4) .attr("font-size", "9px") .text(s); }); return svg.node(); }34:[{"id":"15bab3b88f8bebc2df7ac3e543b7d9d7b9f00d3a91f5bfc57ba353a671a5a824441841cf1724e2501a33a8a69208b7f811493c1c33be746c99e303674bff283a","href":"https://static.observableusercontent.com/files/15bab3b88f8bebc2df7ac3e543b7d9d7b9f00d3a91f5bfc57ba353a671a5a824441841cf1724e2501a33a8a69208b7f811493c1c33be746c99e303674bff283a","name":"iris.csv","type":"text/csv","lastModified":1769381282233.578,"size":3716},{"id":"47483a063761ae29ed13bd3938e6b4cf7167bd3e44a01830220f8b7e46fc4aec38bd53ff102614a573fd990c357392d1eec6a03a472279f82b70ac68f02c3519","href":"https://static.observableusercontent.com/files/47483a063761ae29ed13bd3938e6b4cf7167bd3e44a01830220f8b7e46fc4aec38bd53ff102614a573fd990c357392d1eec6a03a472279f82b70ac68f02c3519","name":"stocks.csv","type":"text/csv","lastModified":1769382493514.404,"size":9727}] 2d:{"title":"Notebook du cours 3","cells":[{"id":0,"value":"# Notebook du cours 3","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3.version","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"{\n let code_svg = \"\"\n return html`${code_svg}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"y=d3.scaleLinear().domain([0,100]).range([0,500])","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"x = d3.scaleBand().domain([\"A\", \"B\", \"C\"]).range([0,100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"x(\"C\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"c = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"c(\"C\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"{\n const svg = d3.create(\"svg\")\n const data = [{\"cat\":\"A\", \"val\": 1},{\"cat\":\"B\", \"val\": 10},{\"cat\":\"C\", \"val\": 2},{\"cat\":\"D\", \"val\": 15},{\"cat\":\"E\", \"val\": 45}]\n const y = d3.scaleLinear().domain([0, d3.max(data, d=>d.val)]).range([0,130])\n const x = d3.scaleBand().domain(new Set(data.map(d => d.cat))).range([0,200])\n \n svg.selectAll(\"rect\").data(data).enter().append(\"rect\")\n .attr(\"x\", (d, i) => {return x(d.cat)})\n .attr(\"y\", (d, i) => {return 130-y(d.val)})\n .attr(\"height\", (d, i) => {return y(d.val)})\n .attr(\"width\", x.bandwidth()-2)\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"# Template classique de graphique","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"# TP 3","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"## Scatterplot","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"raw = FileAttachment(\"iris.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"iris = raw.map(d => ({\n sepal_length: +d.sepal_length,\n sepal_width: +d.sepal_width,\n petal_length: +d.petal_length,\n petal_width: +d.petal_width,\n species: d.species\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"irisExploration = {\n console.log(\"Échantillon des données:\", iris.slice(0, 5));\n\n const attributes = [\"sepal_length\", \"sepal_width\", \"petal_length\", \"petal_width\"];\n const stats = attributes.map(attr => ({\n attribute: attr,\n min: d3.min(iris, d => d[attr]),\n max: d3.max(iris, d => d[attr]),\n mean: d3.mean(iris, d => d[attr]),\n median: d3.median(iris, d => d[attr])\n })); \n // Comptage par espèce\n const speciesCounts = d3.rollup(\n iris,\n v => v.length,\n d => d.species\n );\n\n return {\n totalObservations: iris.length,\n attributes: attributes,\n statistics: stats,\n species: Array.from(speciesCounts.keys()),\n speciesCounts: Array.from(speciesCounts, ([species, count]) => ({species, count}))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`### Exploration des données d'iris\n\n- observations totales : ${irisExploration.totalObservations}\n- Types d'espèces : ${irisExploration.species.join(\", \")}\n\nRépartition par espèce:\n${irisExploration.speciesCounts.map(d => `- ${d.species}: ${d.count} observations`).join(\"\\n\")}\n\nStatistiques :\n\n| Attribut | Min | Max | Moyenne | Médiane |\n|----------|-----|-----|---------|---------|\n${irisExploration.statistics.map(s => \n `| ${s.attribute.replace(/_/g, \" \")} | ${s.min.toFixed(2)} | ${s.max.toFixed(2)} | ${s.mean.toFixed(2)} | ${s.median.toFixed(2)} |`\n).join(\"\\n\")}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"// Boîtes à moustache\nPlot.plot({\n marginLeft: 100,\n height: 300,\n marks: [\n Plot.boxX(iris, {\n x: \"sepal_length\",\n y: \"species\",\n fill: \"species\"\n })\n ],\n x: {\n label: \"Sepal Length\"\n },\n y: {\n label: \"Species\"\n },\n color: {\n legend: true\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof xVar = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof yVar = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"scatterplot(iris, xVar, yVar, {useSymbols: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"## Line Chart : Stocks","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"stocks = FileAttachment(\"stocks.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"parsedStocks = {\n const parseDate = d3.timeParse(\"%b %Y\");\n \n return stocks.map(d => ({\n symbol: d.symbol,\n date: parseDate(d.date),\n price: +d.price\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"statsInitial = {\n const companies = Array.from(new Set(parsedStocks.map(d => d.symbol)));\n const numCompanies = companies.length;\n const dates = parsedStocks.map(d => d.date);\n const minDate = d3.min(dates);\n const maxDate = d3.max(dates);\n const numDataPoints = parsedStocks.length;\n const minPrice = d3.min(parsedStocks, d => d.price);\n const maxPrice = d3.max(parsedStocks, d => d.price);\n \n return {\n companies,\n numCompanies,\n minDate,\n maxDate,\n numDataPoints,\n minPrice,\n maxPrice\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"stocksByCompany = {\n // On groupe par symbole\n const grouped = d3.group(parsedStocks, d => d.symbol);\n \n return Array.from(grouped, ([symbol, values]) => ({\n symbol,\n values: values.sort((a, b) => a.date - b.date) // Tri par date\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"statsGroupees = {\n return {\n numCompanies: stocksByCompany.length,\n companies: stocksByCompany.map(d => d.symbol),\n pointsPerCompany: stocksByCompany.map(d => ({\n symbol: d.symbol,\n count: d.values.length\n })),\n priceRangePerCompany: stocksByCompany.map(d => ({\n symbol: d.symbol,\n min: d3.min(d.values, v => v.price),\n max: d3.max(d.values, v => v.price)\n }))\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`### Statistiques descriptives\n\nDonnées initiales :\n- Nombre d'entreprises : ${statsInitial.numCompanies}\n- Entreprises : ${statsInitial.companies.join(\", \")}\n- Période : ${d3.timeFormat(\"%b %Y\")(statsInitial.minDate)} - ${d3.timeFormat(\"%b %Y\")(statsInitial.maxDate)}\n- Nombre de points : ${statsInitial.numDataPoints}\n- Prix minimal : $${statsInitial.minPrice.toFixed(2)}\n- Prix maximal : $${statsInitial.maxPrice.toFixed(2)}\n\nPoints par entreprise:\n${statsGroupees.pointsPerCompany.map(d => `- ${d.symbol} : ${d.count} points`).join(\"\\n\")}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"Plot.plot({\n marks: [\n Plot.line(parsedStocks, {\n x: \"date\",\n y: \"price\",\n stroke: \"symbol\"\n })\n ],\n color: {\n legend: true\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"On rajoute axes, couleurs titre et légende : ","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"lineChart(stocksByCompany)","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"## Histogramme","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"viewof selectedAttribute = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"binnedData = {\n const values = iris.map(d => d[selectedAttribute]);\n\n const bin = d3.bin()\n .domain(d3.extent(values))\n .thresholds(20); // Nombre de bin\n const bins = bin(values);\n \n // On affiche la structure des bin\n console.log(\"Bins générés:\", bins);\n console.log(\"Premier bin:\", bins[0]);\n \n return bins;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"binStats = {\n return {\n numberOfBins: binnedData.length,\n minValue: d3.min(binnedData, d => d.x0),\n maxValue: d3.max(binnedData, d => d.x1),\n maxCount: d3.max(binnedData, d => d.length),\n totalItems: d3.sum(binnedData, d => d.length)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`### Statistiques du binning\n\n- Attribut sélectionné: ${selectedAttribute}\n- Nombre de bins: ${binStats.numberOfBins}\n- Valeur min: ${binStats.minValue.toFixed(2)}\n- Valeur max: ${binStats.maxValue.toFixed(2)}\n- Fréquence maximale: ${binStats.maxCount}\n- Total d'items: ${binStats.totalItems}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"randomData = Array.from({length: 20000}, d3.randomNormal(5, 1))\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"randomBins = {\n const bin = d3.bin()\n .domain(d3.extent(randomData))\n .thresholds(40);\n \n return bin(randomData);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"histogram(randomBins, \"Random Normal Distribution\", {width: 700, height: 400})","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"Bonus : matrice de scatterplot du jeu de données Iris avec histogrammes pour chaque\nquantité en diagonale.","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"scatterplotMatrix(iris, [\"sepal_length\", \"sepal_width\", \"petal_length\", \"petal_width\"])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}