45:["$","title",null,{"children":"Intro to D3 Selections | Berkeley MIDS W209 Information Visualization Course | Observable"}] 4d:T4a4,{ const target = html``; const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([0, d3.max(data, d => d.age)]) .range([0, iwidth]) .nice(); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => d.height)]) .range([iheight, 0]) .nice(); gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing .append("g") .attr("class", "y--axis") .call(d3.axisLeft(y)); const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.age)) .attr("cy", d => y(d.height)) .attr("r", 5) .attr("fill", "steelblue"); return target; }4e:T52d,{ const target = html``; const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([0, d3.max(data, d => d.age)]) .range([0, iwidth]) .nice(); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => d.height)]) .range([iheight, 0]) .nice(); const color = d3.scaleOrdinal(d3.schemeAccent); // .domain(Array.from(new Set(data.map(d => d.profession)).values())); gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing .append("g") .attr("class", "y--axis") .call(d3.axisLeft(y)); const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.age)) .attr("cy", d => y(d.height)) .attr("r", 5) .attr("fill", d => color(d.profession)); return target; }4f:[] 49:{"id":"d182e08b7fabe895","slug":"intro-to-d3-selections","title":"Intro to D3 Selections","thumbnail":"3abc21654a2e56fff808de51e4fcaf732e9b238dd6c666ed6fb1803670750570","access_level":"public","create_time":"$D2020-09-03T00:03:09.769Z","update_time":"$D2020-09-03T00:37:40.902Z","view_time":null,"first_public_time":"$D2021-04-13T15:48:45.261Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":115,"publish_version":115,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"},{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":70,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro to D3 Selections","cells":[{"id":0,"value":"md`# Intro to D3 Selections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = Array.from({ length: 50 }).map((d, i) => ({\n age: Math.random() * 150,\n height: Math.random() * 2.0,\n name: `Person ${i}`,\n profession: [\"Teacher\", \"Lawyer\", \"Coffee Grower\"][\n Math.floor(Math.random() * 3)\n ]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"{\n const target = html``;\n\n const svg = d3.select(target);\n\n for (let d of data) {\n svg\n .append(\"circle\")\n .attr(\"cx\", d.age * 5)\n .attr(\"cy\", d.height * 50)\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n svg\n .append(\"text\")\n .attr(\"x\", d.age * 5)\n .attr(\"y\", d.height * 50)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Data Binding`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"{\n const target = html``;\n\n const svg = d3.select(target);\n\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => d.age * 5)\n .attr(\"cy\", d => d.height * 50)\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## Scales`","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 target = html``;\n\n const svg = d3.select(target);\n\n const x = d3\n .scaleLinear()\n .domain([0, 120])\n .range([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, 2])\n .range([0, height]);\n\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.age))\n .attr(\"cy\", d => y(d.height))\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## Axis`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`## Categorical Scale`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = width * .5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null