2f:T50d,{ 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.firstNameLength)]) .range([0, iwidth]) .nice(); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.lastNameLength)]) .range([iheight, 0]) .nice(); const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => x(d.firstNameLength)) .attr("cy", (d) => y(d.lastNameLength)) .attr("r", 5) .attr("fill", "steelblue"); gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight / 2})`) .call(d3.axisBottom(x)); gDrawing .append("g") .attr("class", "y--axis") .attr("transform", `translate(${iwidth / 2}, 0)`) .call(d3.axisLeft(y)); return target; }30:T694,{ 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.firstNameLength)]) .range([0, iwidth]) .nice(); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.lastNameLength)]) .range([iheight, 0]) .nice(); const color = d3.scaleOrdinal(d3.schemePastel2); // .domain(Array.from(new Set(data.map(d => d.profession)).values())); gDrawing .selectAll("text") .data(data) .join("text") .attr("x", (d) => x(d.firstNameLength)) .attr("y", (d) => y(d.lastNameLength) + 15) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "black") .text((d) => d.firstName); const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => x(d.firstNameLength)) .attr("cy", (d) => y(d.lastNameLength)) .attr("r", 5) .attr("fill", (d) => color(d.profession)); 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)); return target; }31:T4f5,students = [ { first_name: "Radia", last_name: "Wahab", email: "radiawahab@ischool.berkeley.edu", observable: null }, { first_name: "Yolanda", last_name: "Cardenas", email: "ycardenas@ischool.berkeley.edu", observable: null }, { first_name: "Leon", last_name: "Gutierrez", email: "leonrafael29@ischool.berkeley.edu", observable: null }, { first_name: "EJ", last_name: "Haselden", email: "ejhaselden@ischool.berkeley.edu", observable: null }, { first_name: "Matt", last_name: "Kinkley", email: "mattkinkley@ischool.berkeley.edu", observable: null }, { first_name: "Chenxi", last_name: "Lu", email: "luchenxi@ischool.berkeley.edu", observable: null }, { first_name: "Erick", last_name: "Martinez", email: "efm@ischool.berkeley.edu", observable: null }, { first_name: "Thomas", last_name: "McNeil", email: "temcneil@ischool.berkeley.edu", observable: null }, { first_name: "Aishah", last_name: "Newson", email: "anewson@ischool.berkeley.edu", observable: null }, { first_name: "Ciaran", last_name: "O'Connor", email: "oconnorcpj@ischool.berkeley.edu", observable: null } ]32:[] 2d:{"title":"D3 Scatter Plot Example","cells":[{"id":0,"value":"md`# D3 Scatter Plot Example`","pinned":false,"hidden":false,"mode":"ojs"},{"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}))*/\n\ndata = students.map((d, i) => ({\n firstName: d.first_name,\n lastName: d.last_name,\n firstNameLength: d.first_name.length + Math.random() ,\n lastNameLength: d.last_name.length + Math.random(),\n nameLength: d.first_name.length + d.last_name.length + Math.random(),\n profession: [\"A\", \"B\", \"C\"][Math.floor(Math.random() * 3)]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"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.firstNameLength * 50)\n .attr(\"cy\", d.lastNameLength * 50)\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n svg\n .append(\"text\")\n .attr(\"x\", d.firstNameLength * 50 + 7)\n .attr(\"y\", d.lastNameLength * 50 + 3)\n .style(\"font-size\", \"8pt\")\n .text(d.firstName);\n }\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Data Binding`","pinned":false,"hidden":false,"mode":"ojs"},{"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.firstNameLength * 300)\n .attr(\"cy\", (d) => d.lastNameLength * 50)\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"{\n const target = html``;\n\n const svg = d3.select(target);\n\n const x = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.firstNameLength)])\n .range([0, width - margin.right - margin.left]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.lastNameLength)])\n .range([0, height - margin.bottom - margin.top]);\n\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => x(d.firstNameLength))\n .attr(\"cy\", (d) => y(d.lastNameLength))\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`## Categorical Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = width * .5","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}