2b:null 2c:["$","title",null,{"children":"W4 1 D3 v6 Selections explained | Harshit Gajjar | Observable"}] 31:T5a0,{ const target = htl.html``; // yield target; const svg = d3.select(target); const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.age)]) .range([0, width]) .nice(); // to round off the axis values const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.height)]) .range([height, 0]); // to round off the axis values const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); // to make axis gDrawing .append("g") .attr("class", "x--axis") .append("transform", `transform(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing.append("g").attr("class", "y--axis").call(d3.axisLeft(y)); // doing data binding const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => x(d.age)) // we pass function as a parameter and that function will be directly called by d3 whenever it is ready, in this case it will called 50 times .attr("cy", (d) => y(d.height)) .attr("r", 5) .style("fill", "purple"); return target; }32:T66e,{ const target = htl.html``; // yield target; const svg = d3.select(target); const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.age)]) .range([0, width]) .nice(); // to round off the axis values const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.height)]) .range([height, 0]); // to round off the axis values const color = d3 .scaleOrdinal() .domain(Array.from(new Set(data.map((d) => d.profession)).keys())) .range(["stellblue", "salmon", "cyan"]); // to round off the axis values const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); // to make axis gDrawing .append("g") .attr("class", "x--axis") .append("transform", `transform(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing.append("g").attr("class", "y--axis").call(d3.axisLeft(y)); // doing data binding const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => x(d.age)) // we pass function as a parameter and that function will be directly called by d3 whenever it is ready, in this case it will called 50 times .attr("cy", (d) => y(d.height)) .attr("r", 5) .style("fill", (d) => color(d.profession)); return target; }33:[] 2f:{"id":"62539db894f3662d","slug":null,"title":"W4 1 D3 v6 Selections explained","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-12T19:26:05.973Z","update_time":"$D2023-02-13T20:17:05.930Z","view_time":null,"first_public_time":"$D2023-02-12T19:26:05.973Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"666e343e9fc70af6","login":"hg24","name":"Harshit Gajjar","avatar_url":"https://avatars-next.observableusercontent.com/6f17a096ab3d83e4a953387b0069b305478a67613578aa9ebebb8eaa88a66abb","tier":"starter_2024"},"version":152,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e2ba07857faed1b","login":"hg24","name":"Harshit Gajjar","avatar_url":"https://avatars-next.observableusercontent.com/6f17a096ab3d83e4a953387b0069b305478a67613578aa9ebebb8eaa88a66abb","tier":null}],"members":[{"type":"individual","id":"5e2ba07857faed1b","login":"hg24","name":"Harshit Gajjar","avatar_url":"https://avatars-next.observableusercontent.com/6f17a096ab3d83e4a953387b0069b305478a67613578aa9ebebb8eaa88a66abb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"W4 1 D3 v6 Selections explained","cells":[{"id":0,"value":"# W4 1 D3 v6 Selections explained","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"data = Array.from({ length: 50 }).map((d, i) => ({\n age: Math.random() * 120,\n height: Math.random() * 2.0,\n name: `Person ${i}`,\n profession: [\"Teacher\", \"Lawyer\", \"Coffee\"][Math.floor(Math.random() * 3)]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## data binding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"{\n const target = htl.html``;\n\n // yield target;\n\n const svg = d3.select(target);\n\n // doing data binding\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => d.age * 5) // we pass function as a parameter and that function will be directly called by d3 whenever it is ready, in this case it will called 50 times\n .attr(\"cy\", (d) => d.height * 50)\n .attr(\"r\", 5)\n .style(\"fill\", \"purple\");\n\n const txt = svg\n .selectAll(\"text\")\n .data(data)\n .join(\"text\")\n .attr(\"x\", (d) => d.age * 5)\n .attr(\"y\", (d) => d.height * 50)\n .style(\"font-size\", \"8pt\")\n .text((d) => d.name);\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"## without data binding + scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"{\n const target = htl.html``;\n\n const svg = d3.select(target);\n\n // these scales act as functions, which takes the value as parameter and return the value as per scale\n const x = d3.scaleLinear().domain([0, 120]).range([0, width]);\n const y = d3.scaleLinear().domain([0, 3]).range([0, height]);\n\n for (let d of data) {\n svg\n .append(\"circle\") // point\n .attr(\"cx\", x(d.age)) // channel\n .attr(\"cy\", y(d.height)) // channel\n .attr(\"r\", 5) // channel\n .style(\"fill\", \"purple\");\n\n svg\n .append(\"text\")\n .attr(\"x\", x(d.age))\n .attr(\"y\", y(d.height))\n .style(\"font-size\", \"8pt\")\n .text(d.name);\n }\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"## Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Categorical scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = width * 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"# W209 W5 3 Vega-Lite API custom charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"vl\n .markPoint({ size: 200 })\n .transform(\n vl.window(vl.row_number().as(\"index\")).groupby([\"country\", \"animal\"])\n )\n .encode(\n vl.y().fieldN(\"animal\").axis({ title: false }),\n vl\n .shape()\n .fieldN(\"animal\")\n .scale({ domain: [\"cattle\", \"pigs\", \"sheep\"] }),\n vl.row().fieldN(\"country\").header({ title: false }),\n vl.x().fieldQ(\"index\").axis(null)\n )\n .data(animal_data)\n .config({ view: { stroke: false } })\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"animal_data = Array.from({ length: 30 }).map((d) => ({\n country: [\"Great Britain\", \"United States\"][Math.floor(Math.random() * 2)],\n animal: [\"cattle\", \"pig\", \"sheep\"][Math.floor(Math.random() * 3)]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"