25:["$","title",null,{"children":"Cours : Bar chart | penguinos | Observable"}] 49:T41b,chart = { const height = 300 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const margin = ({top: 20, right: 30, bottom: 30, left: 40}) 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]) 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,${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(); }4a:[] 29:{"id":"a9c9b94f4af7e91e","slug":null,"title":"Cours : Bar chart","thumbnail":"4739c162bb7f6c250501b9a20d045e4eafafc87ac77767e823e3a6909ff924e1","access_level":"public","create_time":"$D2023-01-23T08:22:53.163Z","update_time":"$D2023-01-23T09:43:23.539Z","view_time":null,"first_public_time":"$D2023-01-23T08:22:53.163Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0d200658ca1f75b0","login":"penguinos","name":"penguinos","avatar_url":"https://avatars-next.observableusercontent.com/709245e0009ff5f67973bad6d1fd6f26a9d923159051215cd1578d4f63552c39","tier":"starter_2024","bio":"","following":false},"version":78,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc052ca38022d53f","login":"penguinos","name":"penguinos","avatar_url":"https://avatars-next.observableusercontent.com/709245e0009ff5f67973bad6d1fd6f26a9d923159051215cd1578d4f63552c39","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"fc052ca38022d53f","login":"penguinos","name":"penguinos","avatar_url":"https://avatars-next.observableusercontent.com/709245e0009ff5f67973bad6d1fd6f26a9d923159051215cd1578d4f63552c39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cours : Bar chart","cells":[{"id":0,"value":"# Cours : Bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"{\n let data = [10, 50, 30]\n\n let resultat = \"\"\n\n return html `${resultat}`\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"{\n const svg = d3.create(\"svg\")\n\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\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n const svg = d3.create(\"svg\")\n\n let data = [200, 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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null