2f:T4d5,chart = { const height = 300 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("text") .attr("x", 50) .attr("y", 20) .text("MON TITRE") const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const h = 300 - margin.top - margin.bottom const w = height - margin.left - margin.right let data = [10, 40, 30, 20, 10, 100, 10, 10, 10, 10] const y = d3.scaleLinear() .domain([0, d3.max(data)]) .range([margin.top, height - margin.top]) const x = d3.scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.left - margin.right]) console.log(x.domain()) svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => x(i)) .attr("y", (d, i) => height - y(d) - margin.top ) // data[i] .attr("width", x.bandwidth() - 1) .attr("height", (d, i) => y(d)) const xAxis = g => g .attr("transform", `translate(0,${h+31})`) .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(); }30:T64d,{ const height = 300 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); let data = iris const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const h = 300 - margin.top - margin.bottom const w = height - margin.left - margin.right const x = d3.scaleLinear() .domain([d3.min(data, d => d.sepal_width), d3.max(data, d => d.sepal_width)]) .range([margin.top, h]) const y = d3.scaleLinear() .domain([d3.min(data, d => d.sepal_length), d3.max(data, d => d.sepal_length)]) .range([margin.left, w]) const color = d3.scaleOrdinal(d3.schemeCategory10) svg.selectAll("#circle") .data(data) .enter() .append("circle") .attr("id", "circle") .attr("cx", d => x(d.sepal_width)) .attr("cy", d => y(d.sepal_length)) .attr("fill", d => color(d.species)) .attr("r", 5) svg.selectAll("rect").data(color.domain()) .enter() .append("rect") .attr("x", 400) .attr("y", (d, i) => 15 + i * 30) .attr("width", 10) .attr("height", 10) .attr("fill", d => color(d)) svg.selectAll("text").data(color.domain()) .enter() .append("text") .attr("x", 400+15) .attr("y", (d, i) => 15 + i * 30 +10) .text(d => d) 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:T47d,line = { const height = 300 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("text") .attr("x", 50) .attr("y", 20) .text("MON TITRE") const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const h = 300 - margin.top - margin.bottom const w = height - margin.left - margin.right let data = stocks const y = d3.scaleLinear() .domain([0, 100]) .range([height - margin.top, margin.top]) const x = d3.scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.left - margin.right]) const line = d3.line() .x((d, i) => x(i)).y(d => y(d.price)) svg.selectAll(".line").data([data]) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", "black") const xAxis = g => g .attr("transform", `translate(0,${h+31})`) .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":"3fa5e197b22509d807a0ec62a59280f16dfa0e20490cc45d96cd5bb174048907daa478434881472df40d796238150cdbc7b1f960621b4d7baf2bb11cfe6f1750","href":"https://static.observableusercontent.com/files/3fa5e197b22509d807a0ec62a59280f16dfa0e20490cc45d96cd5bb174048907daa478434881472df40d796238150cdbc7b1f960621b4d7baf2bb11cfe6f1750","name":"stocks.csv","type":"text/csv","lastModified":1674470517926.346,"size":9727},{"id":"4785ade0b90550aaba3f2ebab7be103cd237c01e8c5e65ca475d4364e8a0ec46c116407afb6b736928a5348a2a6a5d7cf021428c26622b663150eae86d0a3659","href":"https://static.observableusercontent.com/files/4785ade0b90550aaba3f2ebab7be103cd237c01e8c5e65ca475d4364e8a0ec46c116407afb6b736928a5348a2a6a5d7cf021428c26622b663150eae86d0a3659","name":"iris.csv","type":"text/csv","lastModified":1674467515999.611,"size":3716}] 2d:{"title":"Cours SVG","cells":[{"id":0,"value":"# Cours SVG","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":10,"value":"{\n let data = [10,40,30]\n let resultat = \"\"\nreturn md`${resultat}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n const svg = d3.create(\"svg\")\n let data = [10, 40, 30]\n\n data.map((d, i) => {\n svg.append(\"rect\")\n .attr(\"x\",20*i)\n .attr(\"y\", 100-d)\n .attr(\"width\", 10)\n .attr(\"height\", d)\n })\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"{\n const svg = d3.create(\"svg\")\n let data = [10, 40, 30, 20, 10, 100]\n\n const y = d3.scaleLinear()\n .domain([0,d3.max(data)])\n .range([0,100])\n \n const x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,100])\n \n svg.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\",(d, i) => x(i))\n .attr(\"y\", (d) => 100-y(d))\n .attr(\"width\", x.bandwidth()-1)\n .attr(\"height\", (d) => y(d))\n\n return svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"# TP 3","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"{\n const svg = d3.create(\"svg\")\n\n let data = [ [10, 40], [10, 20], [40, 10],[50, 20], [10, 10]] \n\n let c = d3.scaleOrdinal()\n .domain([\"A\", \"B\"])\n .range([\"red\", \"blue\"])\n \n svg.selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\") \n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"fill\", d => c(d[2]))\n .attr(\"r\", 5)\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"iris = FileAttachment(\"iris.csv\").csv().then(d =>{\n d.forEach( e => {\n e.sepal_length = +e.sepal_length\n e.sepal_width = +e.sepal_width\n e.petal_length = +e.petal_length\n e.petal_width = +e.petal_width\n })\n return d\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"parseDate=d3.timeParse(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"\n\nstocks = FileAttachment(\"stocks.csv\").csv().then(d =>{\n d.forEach( e => {\n e.price = +e.price\n e.date = parseDate(e.date)\n })\n return d\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}