Circle!

29:null 2a:["$","title",null,{"children":"D3 Visualization (solutions) | Chris North | Observable"}] 2f:T660,chart11 = { // Define SVG tag let svg = d3 .create("svg") .attr("width", 800) // border goes outside of this, thus border adds to total width. .attr("height", 300) //.attr("viewBox", [0, 0, 800, 300]) //viewBox adds a transform that auto scales to the window width, .style("border", "1px solid black"); // minus the border width. // add a title let text = svg .append("text") .attr("x", 10) .attr("y", 20) .style("font", "12px Arial") .html("Chart title here"); // MARKS & CHANNELS (2 options:) //// Single Mark Method: map all data rows to one big complex mark (like a path or polyline) let path = svg .append("path") .attr("d", d3.line()(linedata)) .attr("stroke", "black") .attr("fill", "none"); //// Multi-Mark Method: map each data row to a mark (like a rect) let bars = svg .selectAll("rect") .data(data) // bind data rows to rects .join("rect") // creates new Rects for each data row (handles enter, update, and exit) // Multi-mark Channels: maps data columns to rect attributes .attr("x", (r, i) => i * 15) // map to pixels .attr("width", 13) //.attr("y", 0) .attr("y", (r) => 300 - (r.PercentCollegeGrad / 50) * 300) // map to pixels .attr("height", (r) => (r.PercentCollegeGrad / 50) * 300) .style("fill", "steelblue"); //.style("fill", (r) => d3.hsl(200, 0.5, 1 - r.IncomePerCapita / 85000)) // Blue Luminance scale // Tooltips bars .append("title") // adds the title tag inside the rect tag .text((r) => r.Name + " " + r.PercentCollegeGrad); // return SVG tag return svg.node(); }30:T5e1,//// = new stuff chart22 = { // Define SVG tag let svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); let text = svg .append("text") .attr("x", 50) .attr("y", 20) .style("font", "12px Arial") .html("Chart Title here"); //// Draw axes drawAxis(svg, yScale, "left", margin.left - 3, "Percent College Graduates"); drawAxis(svg, xScale, "bottom", height - margin.bottom + 3, "States"); //svg // .append("g") // .attr("transform", `translate(${margin.left - 3}, 0)`) //located at x=0 by default // .call(d3.axisLeft(yScale)); //svg // .append("g") // .attr("transform", `translate(0, ${height - margin.bottom + 3})`) //located at y=0 by default // .call(d3.axisBottom(xScale)); // MARKS: maps data rows to rects let bars = svg .selectAll("rect") .data(data, (r) => r.Abbrev) .join("rect") // creates new Rects for each data row //// CHANNELS: maps data columns to rect attributes .attr("x", (r) => xScale(r.Abbrev)) .attr("width", xScale.bandwidth() - 1) .attr("y", (r) => yScale(r.PercentCollegeGrad)) .attr("height", (r) => yScale(0) - yScale(r.PercentCollegeGrad) + 1) //.style("fill", "steelblue") .style("fill", (r) => cScale(r.IncomePerCapita)); // Tooltips bars .append("title") // adds the title tag inside the rect tag .text((r) => r.Name + " " + r.PercentCollegeGrad); // return SVG tag return svg.node(); }31:[{"id":"15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","href":"https://static.observableusercontent.com/files/15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","name":"States2010.csv","type":"text/csv","lastModified":1600219290117.223,"size":3002}] 2d:{"id":"36360d3f1706d778","slug":null,"title":"D3 Visualization (solutions)","thumbnail":"743403f02f024f332ef777fa2cb874d5fec11b57e87ec6f727f62219f8ee2d73","access_level":"public","create_time":"$D2020-09-16T01:21:30.117Z","update_time":"$D2023-09-29T01:36:03.957Z","view_time":null,"first_public_time":"$D2022-10-13T03:20:50.742Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":"starter_2024"},"version":865,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bd52d2c49b80248","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":null}],"members":[{"type":"individual","id":"2bd52d2c49b80248","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"9aa1bc9d4b544fec","slug":"vt-cs-5764","title":"VT CS 5764 Lecture Notes","owner":{"id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North"}},"type":"notebook","body":{"title":"D3 Visualization (solutions)","cells":[{"id":0,"value":"# D3 Visualization (solutions)\n\nVirginia Tech, CS 5764 InfoVis, Lecture Notes by Dr. Chris North\n\nCovers topics from Murray, \"[Interactive Data Visualization for the Web](https://www.oreilly.com/library/view/interactive-data-visualization/9781491921296/)\", Chapters 6, 7, 8.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"## Technology stack\n1. **HTML5** = HyperText Markup Language, rendered by browsers\n2. **CSS** = Cascading Style Sheets, specifies appearance of tags\n3. **DOM** = Document Object Model, dynamic object-oriented hierarchical structure of tags and their attributes in the browser\n4. **SVG** = Scalable Vector Graphics, tag that contains graphical tags\n5. **JavaScript**, runs in the browser and can modify the DOM\n6. **D3.js**, Javascript library to create data visualizations using DOM\n7. **Observable**, computational notebook development environment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"## HTML\nMake an HTML cell. Embed some data output.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"value = 37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"

This is some HTML code with embedded ${value} data

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"### SVG\nCreate an HTML SVG tag.\n\nThen, use your browser to \"inspect\" the SVG in the DOM.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg","database":"$undefined"},{"id":387,"value":"### CSS Styles\nCreate a CSS style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":543,"value":"## D3\n\n* D3.js: https://d3js.org\n* D3 gallery: https://observablehq.com/@d3/gallery\n* D3 in JavaScript vs. D3 in Observable?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"// D3 is automatically imported in Observable\n//d3 = require(\"d3\")\nd3.version ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"### D3 select\n\nD3 can be used to easily access and manipulate the DOM.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"d3\n .select(\"svg\")\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", 50)\n .attr(\"height\", 50).null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"### Observable data file load","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"data1 = await FileAttachment(\"States2010.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = (await FileAttachment(\"States2010.csv\").csv({ typed: true })).sort(\n (a, b) => a.PercentCollegeGrad - b.PercentCollegeGrad\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## D3 Data Mapping\n\nD3 can easily map data to graphical tags.\n* D3 joins: https://observablehq.com/@d3/learn-d3-joins\n* D3 shapes: https://observablehq.com/@d3/learn-d3-shapes\n \nCreate a D3 bar chart of states.PercentCollegeGrad:\n\n1. Define the SVG element, and any other needed elements\n2. Map data rows to marks -- D3 .selectAll, .data, .join\n3. Map data columns to channels -- D3 .attr, .style\n * Map data values to pixel values\n * Sort the data\n4. Add Tooltips for detail text\n\nDebug: Use browser dev tools to inspect the DOM of the bar chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"chart1 = {\n // Define SVG tag\n // Draw Axes (later...)\n // MARKS & CHANNELS (2 method options)\n //// Single Mark Method: map all data rows to one big complex mark (like a path or polyline)\n //// Multi-Mark Method: map each data row to a mark (like a rect)\n // Multi-mark Channels: maps data columns to rect attributes\n // Tooltip\n // return SVG tag\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"linedata = data.map((r, i, a) => [\n i * 15,\n 300 - (r.PercentCollegeGrad / 50) * 300\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"d3.line()(linedata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"d3.extent(data, (d) => d.PercentCollegeGrad)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"d3.extent(data, (d) => d.IncomePerCapita)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"## D3 Scales & Axes\n\nD3 has built-in support for Scales, Axes, Legends, etc.\n * Chart starter template: https://observablehq.com/@d3/chart-template\n * D3 scales and axes: https://observablehq.com/@d3/learn-d3-scales\n * Axes API: https://github.com/d3/d3-axis\n * Scales API: https://github.com/d3/d3-scale\n * Color scales API: https://github.com/d3/d3-scale-chromatic\n * D3 color legends: https://observablehq.com/@d3/color-legend\n\nD3 Scales: data domain → pixel range\n![](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_00/lesson_00.07/public/images/1-making-your-first-chart/scale-temp-px.png)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":735,"value":"Now improve the bar chart for better clarity.\n\n1. Add D3 Scales for mapping x, y, color \n2. Add Axes for x, y\n * add margins\n * add axis labels\n4. Add Legend for color\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"chart2 = {\n // copy and paste from above\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"Legend(cScale, { title: \"Income Per Capita ($)\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"yScale = d3\n .scaleLinear()\n .domain([0, 50])\n .range([height - margin.bottom, margin.top]) // flip y axis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"xScale = d3\n .scaleBand()\n .domain(data.map((d) => d.Abbrev)) // map categorical bands by Abbrevs\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"cScale = d3.scaleSequential(d3.interpolateBlues).domain([0, 65000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"margin = ({left: 45, top: 10, right: 10, bottom: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"// predefined by Observable:\nwidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"import { Legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"import { drawAxis } from \"@chrislnorth/simple-axis-drawing\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"