25:["$","title",null,{"children":"Mon notebook observable | Haowei | Observable"}] 49:T5ce,scatterplot = (dataset) => { const w = 700; const h = 500; const padding = 60; const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d["quality_of_education"])]) .range([padding, w - padding]); const yScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d["score"])]) .range([h - padding, padding]); const svg = d3.create("svg") .attr("width", w) .attr("height", h); const c = d3.scaleOrdinal().domain(new Set(dataset.map(d => d.country))).range([1,1000]) svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", (d) => xScale(d["quality_of_education"])) .attr("cy",(d) => yScale(d["score"])) .attr("r", (d) => 5) .style("fill", d => c(d.country)); svg.selectAll("text") .data(dataset) .enter() .append("text") .text((d) => (d["quality_of_education"] + "," + d["score"])) .attr("x", (d) => xScale(d["quality_of_education"] + 10)) .attr("y", (d) => yScale(d["score"])) const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); svg.append("g") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); svg.append("g") .attr("transform", "translate(" + padding + ",0)") .call(yAxis) return svg.node() }4a:[] 29:{"id":"b7800066a3511fa0","slug":null,"title":"Mon notebook observable","thumbnail":"7e591d6f0ea6a8e1d3e947d80ea249b4c14bd2d31804ff6ce977f1a46e8d04b8","access_level":"public","create_time":"$D2022-11-22T08:11:22.864Z","update_time":"$D2023-01-03T10:23:25.497Z","view_time":null,"first_public_time":"$D2022-11-22T08:11:22.864Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2b5c258eb83e46e4","login":"haowei98","name":"Haowei","avatar_url":"https://avatars-next.observableusercontent.com/96e43cba7941e7cab83ccb2ab776d96597ce7514114a1162353b0d02aafb7ca4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":50,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ae0b55da90ab5c4","login":"haowei98","name":"Haowei","avatar_url":"https://avatars-next.observableusercontent.com/96e43cba7941e7cab83ccb2ab776d96597ce7514114a1162353b0d02aafb7ca4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7ae0b55da90ab5c4","login":"haowei98","name":"Haowei","avatar_url":"https://avatars-next.observableusercontent.com/96e43cba7941e7cab83ccb2ab776d96597ce7514114a1162353b0d02aafb7ca4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mon notebook observable","cells":[{"id":0,"value":"# Mon notebook observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"- je vais creer un graphe en svg\n- jeu de données [4,2,1,5]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"html`\n\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 const data = [4,2,1,5,3,5,10,20,0,4,2,1]\n const h = 50\n\n const x = d3.scaleLinear()\n .domain([0,d3.max(data)])\n .range([0,50])\n\n const y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,200])\n\n console.log(y(1))\n \n data.forEach((d,i) => {\n svg.append(\"rect\")\n .attr(\"x\",y(i))\n .attr(\"y\",h-x(d))\n .attr(\"width\",y.bandwidth())\n .attr(\"height\",x(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":43,"value":"{\n const svg = d3.create(\"svg\")\n const data = [4,2,1,5,3,5,10,20,0,4,2,1]\n const h = 50\n\n const x = d3.scaleLinear()\n .domain([0,d3.max(data)])\n .range([0,50])\n\n const y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,200])\n \n svg.selectAll(\"rect\").data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\",(d,i)=>y(i))\n .attr(\"y\",(d,i)=>h-x(d))\n .attr(\"width\",(d,i)=>y.bandwidth()-1)\n .attr(\"height\",(d,i)=>x(d))\n\n svg.selectAll(\"text\").data(data)\n .enter()\n .append(\"text\")\n .attr(\"x\",(d,i)=>y(i))\n .attr(\"y\",(d,i)=>h-x(d))\n .text((d,i)=>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":49,"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