2f:T60b,{ const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const w = 300 const h = 300 const svg = d3.create("svg").attr("width", w).attr("height", h); const data = penguins const titre = svg.append("text").attr("x", 100).attr("y", 20).text("MON TITRE") const scaleY = d3.scaleLinear().domain([0, d3.max(penguins, d => d.culmen_length_mm) ]).range([300, 0]); const scaleX = d3.scaleLinear().domain([0, d3.max(penguins, d => d.culmen_depth_mm) ]).range([0, 300]); const color = d3.scaleOrdinal(d3.schemeCategory10) //d3.scaleOrdinal().domain(list_categories).range(["red", "blue"]) svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d, i) => scaleX(d.culmen_depth_mm)) .attr("cy", (d, i) => scaleY(d.culmen_length_mm)) .style("fill", d => color(d.sex)) .attr("r", 3) const legend = svg.selectAll("rect") .data(list_categories) .enter() legend.append("rect") .attr("x", 50) .attr("y", (d,i) => 50 + i*20) .attr("height", 10) .attr("width", 10) .style("fill", d => color(d)) legend.append("text") .attr("x", 70) .attr("y", (d,i) => 50 + i*20) .text(d => d) const xAxis = g => g .attr("transform", `translate(0, ${280})`) .call(d3.axisBottom(scaleX)) const yAxis = g => g .attr("transform", `translate(${20}, 0)`) .call(d3.axisLeft(scaleY)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node() }30:T5ab,// https://observablehq.com/@d3/margin-convention linechart = { const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const height = 500 const x = d3.scaleTime() .domain(d3.extent(stocks_parsed, d=>d.date)) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain(d3.extent(stocks_parsed, d=>d.price)) .range([height - margin.bottom, margin.top]) const color = d3.scaleOrdinal(d3.schemeCategory10) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // svg.selectAll("circle").data(stocks_parsed).enter().append("circle") // .attr("cx", (d, i) => x(d.date)) // .attr("cy", (d, i) => y(d.price)) // .style("fill", d => color(d.symbol)) // .attr("r", 3) const grouped_data = d3.group(stocks_parsed, d => d.symbol) console.log(grouped_data) const line = d3.line() .x(d => x(d.date)) .y(d => y(d.price)) svg.selectAll("path").data(grouped_data).enter().append("path") .attr("d", d => line(d[1])) .attr("stroke", d => color(d[0])) .attr("fill", "none") console.log(grouped_data) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }31:T459,// https://observablehq.com/@d3/margin-convention histogram = { const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const height = 500 const bins = d3.bin()(dataset) const x = d3.scaleBand() .domain(bins.map(d => d.x0)) .range([margin.left, width - margin.right]) .padding(0.1); // Add padding for spacing between bars const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .range([height - margin.bottom, margin.top]) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.selectAll("rect").data(bins).enter().append("rect") .attr("x", (d, i) => x(d.x0)) .attr("y", d => y(d.length)) .attr("width", (d, i) => x.bandwidth()) .attr("height", d => height - y(d.length) - margin.bottom) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }32:[{"id":"47483a063761ae29ed13bd3938e6b4cf7167bd3e44a01830220f8b7e46fc4aec38bd53ff102614a573fd990c357392d1eec6a03a472279f82b70ac68f02c3519","href":"https://static.observableusercontent.com/files/47483a063761ae29ed13bd3938e6b4cf7167bd3e44a01830220f8b7e46fc4aec38bd53ff102614a573fd990c357392d1eec6a03a472279f82b70ac68f02c3519","name":"stocks.csv","type":"text/csv","lastModified":1737964866004.082,"size":9727}] 2d:{"title":"Notebook du cours 3 (24-25)","cells":[{"id":0,"value":"# Notebook du cours 3 (24-25)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":15,"value":"{\n let res = \"\"\n return html`${res}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n const svg = d3.create(\"svg\");\n const data = [10, 20, 30, 50];\n\n const scaleY = d3.scaleLinear().domain([0, d3.max(data)]).range([0, 50]);\n const scaleX = d3.scaleBand().domain(d3.range(data.length)).range([0, 100]);\n\n svg.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => scaleX(i))\n .attr(\"y\", d => 50 - scaleY(d)) // d => scaleY(d)\n .attr(\"width\", 20)\n .attr(\"height\", d => scaleY(d))\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof a = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"a","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"d3.max(penguins.map(d => d.culmen_length_mm))","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"list_categories = new Set(penguins.map(d => d.sex))","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"# Line chart","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"stocks = FileAttachment(\"stocks.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"list_symbol = new Set(stocks.map(d => d.symbol))","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"stocks_parsed = stocks.map(d => {\n\n let r = {}\n r.symbol = d.symbol\n r.date = new Date(d.date)\n r.price = +d.price\n\n return r\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"// https://observablehq.com/@d3/margin-convention\ntemplate = {\n\n const margin = ({top: 20, right: 30, bottom: 30, left: 40})\n const height = 500\n\n const x = d3.scaleLinear()\n .domain([0, 1])\n .range([margin.left, width - margin.right])\n \n const y = d3.scaleLinear()\n .domain([0, 1])\n .range([height - margin.bottom, margin.top])\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n\n const yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"dataset = Array.from({length: 20000}, d3.randomNormal(1, 1))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}