25:["$","title",null,{"children":"Intro to D3 Selections | Matthew Rubino | Observable"}] 49: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; }4a: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; }4b:[] 29:{"id":"cb12fc9f19cec7cb","slug":null,"title":"Intro to D3 Selections","thumbnail":"0d6e63f21949763f9614c4f24cd2da3a0b4d6ef09a69fe4057be7339bdba4a1a","access_level":"public","create_time":"$D2023-02-01T01:20:26.068Z","update_time":"$D2023-02-01T01:20:26.068Z","view_time":null,"first_public_time":"$D2023-02-01T01:20:26.068Z","has_unpublished_edits":null,"fork":{"id":"d182e08b7fabe895","slug":"intro-to-d3-selections","title":"Intro to D3 Selections","owner":{"id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course"}},"stars":0,"starred":false,"owner":{"type":"team","id":"eb63f57083816d63","login":"rubinomq","name":"Matthew Rubino","avatar_url":"https://avatars-next.observableusercontent.com/d9a873db59cd64e9f6423d558e249e9876f348ed397a11a034a3818f85ab0426","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":115,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1487768ce5e2123f","login":"rubinomq","name":"Matthew Rubino","avatar_url":"https://avatars-next.observableusercontent.com/d9a873db59cd64e9f6423d558e249e9876f348ed397a11a034a3818f85ab0426","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1487768ce5e2123f","login":"rubinomq","name":"Matthew Rubino","avatar_url":"https://avatars-next.observableusercontent.com/d9a873db59cd64e9f6423d558e249e9876f348ed397a11a034a3818f85ab0426","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"$49","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":"$4a","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":"$W4b","stdlib":"1"}} 24:null