25:["$","title",null,{"children":"D3 & SVG Tutorial | penguins | 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:[{"id":"4785ade0b90550aaba3f2ebab7be103cd237c01e8c5e65ca475d4364e8a0ec46c116407afb6b736928a5348a2a6a5d7cf021428c26622b663150eae86d0a3659","href":"https://static.observableusercontent.com/files/4785ade0b90550aaba3f2ebab7be103cd237c01e8c5e65ca475d4364e8a0ec46c116407afb6b736928a5348a2a6a5d7cf021428c26622b663150eae86d0a3659","name":"iris.csv","type":"text/csv","lastModified":1674467900757.043,"size":3716}] 29:{"id":"0655113068fff3fd","slug":null,"title":"D3 & SVG Tutorial","thumbnail":"4739c162bb7f6c250501b9a20d045e4eafafc87ac77767e823e3a6909ff924e1","access_level":"public","create_time":"$D2023-01-23T08:25:06.509Z","update_time":"$D2023-01-23T09:49:43.411Z","view_time":null,"first_public_time":"$D2023-01-23T08:25:06.509Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a21b5a999832b23c","login":"penguins","name":"penguins","avatar_url":"https://avatars-next.observableusercontent.com/722b713ff5e8551dc45b8c4ea4bbda2fb23d4c4117f2035d58568b6652b7fa3f","tier":"starter_2024","bio":"","following":false},"version":59,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ec58d3e88aa2dda","login":"penguins","name":"penguins","avatar_url":"https://avatars-next.observableusercontent.com/722b713ff5e8551dc45b8c4ea4bbda2fb23d4c4117f2035d58568b6652b7fa3f","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"5ec58d3e88aa2dda","login":"penguins","name":"penguins","avatar_url":"https://avatars-next.observableusercontent.com/722b713ff5e8551dc45b8c4ea4bbda2fb23d4c4117f2035d58568b6652b7fa3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 & SVG Tutorial","cells":[{"id":0,"value":"# D3 & SVG Tutorial","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":14,"value":"{\n let data = [10, 40, 30];\n let resultat = \"\";\n return html`${resultat}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"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":30,"value":"{\n const svg = d3.create(\"svg\")\n let data = [10, 40, 30, 20, 10, 100, 10, 10, 10, 10] \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 console.log(x.domain())\n \n svg.selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", (d, i) => 100 - y(d)) // data[i]\n .attr(\"width\", x.bandwidth() - 1)\n .attr(\"height\", (d, i) => 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":54,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"{\n const svg = d3.create(\"svg\")\n\n let data = [ [10, 40, \"A\"], [10, 20, \"A\"], [40, 10, \"B\"],[50, 20, \"B\"], [10, 10, \"C\"]] \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\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"}],"files":"$W4a","stdlib":"1"}} 24:null