2c:null 2d:["$","title",null,{"children":"D3 Draw Notes | Morva Saaty | Observable"}] 32:T537,{ var element = html` `; var svg = d3.select(element); var yScale = d3.scaleLinear().domain([0,100]).range([0,300]) //range of a data attribute in domain and sicne PercentCollegeGrad is in percent => it is between 0 to 100 and rang of range is between the range of height which here is between 0 to 300 //if you change the 100 to 50, it can be a zoom in task var cScale = d3.scaleSequential(d3.interpolateBlues).domain([2000, d3.max(data, d=>d.IncomePerCapita)]) //colorscale in different shades of blue. it also it can be other domain[0,300] // D3 stuff here... var rects = svg.selectAll('rect') .data(data).join('rect') //map rows to rectangles .attr('x', (d,i) => i*15) //map the index to x channel .attr('width' , 13) .attr('height' , (d,i) => yScale(d.PercentCollegeGrad)) // map PercentCollegeGrad to height channel .attr('y' , (d,i) => (300 - yScale(d.PercentCollegeGrad))) .style('fill' , (d,i) => cScale(d.IncomePerCapita)); //map IncomePerCapita to color saturation //style('fill' , 'SteelBlue') => if you want to have a static color for all bars rects.append('title').text((d,i) => d.Abbrev + ' ' + d.PercentCollegeGrad + ' ' + d.IncomePerCapita); return element; }33:T6a3,{ var element = html` `; var svg = d3.select(element); var xScale = d3.scaleBand().domain(data.map(d=>d.Abbrev)).range([margin.left, width-margin.right]); var yScale = d3.scaleLinear().domain([0,50]).range([height-margin.bottom, margin.top]); //var cScale = d3.scaleSequential(d3.interpolateBlues).domain([0,65000]); svg.append('g') .attr("transform" , `translate(${margin.left - 2}, 0)`) .call(d3.axisLeft(yScale)); svg.append('g') .attr("transform" , `translate(0, ${height - margin.bottom +2})`) .call(d3.axisLeft(xScale)); // D3 stuff here... var rects = svg.selectAll('rect') .data(data).join('rect') //map rows to rectangles .attr('x', (d,i) => xScale(d.Abbrev)) //map the index to x channel .attr('width' , xScale.bandwidth()-1) .attr('height' , (d,i) => yScale(0) - yScale(d.PercentCollegeGrad)) // map PercentCollegeGrad to height channel .attr('y' , (d,i) => (yScale(d.PercentCollegeGrad))) .style('fill' , (d,i) => cScale(d.IncomePerCapita)) //map IncomePerCapita to color saturation //style('fill' , 'SteelBlue') => if you want to have a static color for all bars .on("mouseover", (event,d) => { d3.select(event.target).style('fill','orange');}) .on("mouseout", (event,d) => { d3.select(event.target).style('fill',cScale(d.IncomePerCapita));}); rects.append('title').text((d,i) => d.Abbrev + ' ' + d.PercentCollegeGrad + ' ' + d.IncomePerCapita); return element; }34:[{"id":"15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","href":"https://static.observableusercontent.com/files/15ea0fcea2d8534d17dc5bb9551a35d8b1755a3ac631092d2a2cecc4a1864c1036c346e0da3627df35e4745f168b0b781686c43be1a1bb17323f498ab67bba65","name":"States2010.csv","type":"text/csv","lastModified":1600286567875.469,"size":3002}] 30:{"id":"1d353b8337ef716e","slug":"d3-draw-notes","title":"D3 Draw Notes","thumbnail":null,"access_level":"public","create_time":"$D2020-09-16T20:02:47.875Z","update_time":"$D2020-09-23T21:20:38.787Z","view_time":null,"first_public_time":"$D2020-09-24T14:57:54.348Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e528d6b7ff0490a4","login":"morvasaaty","name":"Morva Saaty","avatar_url":"https://avatars-next.observableusercontent.com/84d57fbc829971dcc99e6cdc3f435140e4b5d2b41c74a95165001427230f2d26","tier":"starter_2024","bio":""},"version":301,"publish_version":301,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd80360632e7c161","login":"morvasaaty","name":"Morva Saaty","avatar_url":"https://avatars-next.observableusercontent.com/84d57fbc829971dcc99e6cdc3f435140e4b5d2b41c74a95165001427230f2d26","tier":null,"bio":""}],"members":[{"type":"individual","id":"dd80360632e7c161","login":"morvasaaty","name":"Morva Saaty","avatar_url":"https://avatars-next.observableusercontent.com/84d57fbc829971dcc99e6cdc3f435140e4b5d2b41c74a95165001427230f2d26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Draw Notes","cells":[{"id":0,"value":"md`# D3 Draw Notes\n\nVirginia Tech, CS 5764 InfoVis, Lecture Notes by Dr. Chris North\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`**Review:** \n* What is the purpose of visualization?\n* What are the two steps to map data to visualization?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`**Resources:**\n* D3: https://d3js.org\n* D3 joins: https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3\n* D3 scales and axes: https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3\n * Scales API: https://github.com/d3/d3-scale/tree/v3.2.2#sequential-scales\n * Color scales API: https://github.com/d3/d3-scale-chromatic\n* D3 shapes: https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3\n* D3 gallery: https://observablehq.com/@d3/gallery\n* Murray chapters 6, 7, 8\n\n**Technology stack:** \n* HTML5, DOM, CSS, SVG, JavaScript, D3, Observable\n* D3 in JS vs. D3 in Observable?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"svg = html`\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"html`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`### D3 SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"d3.select(svg).append('rect').attr('x',0).attr('y',0).attr('width',50).attr('height',50).attr('class', 'fancy')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`### D3 data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = d3.csvParse(await FileAttachment(\"States2010.csv\").text(), d3.autoType)\n .sort( (a,b) => b.PercentCollegeGrad - a.PercentCollegeGrad)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`### D3 drawing\nScaling: Domain → Range\n![](http://www.jeromecukier.net/wp-content/uploads/2011/08/d3scale1.png)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"d3.extent(data, d=>d.PercentCollegeGrad)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"d3.extent(data, d=>d.IncomePerCapita)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`### D3 Scales & Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`##Percent college Grad of each State in the US","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"legend({\n color: cScale,\n title: \"IncomePerCapita ($)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"margin = ({left: 40, top: 10, right: 10, bottom: 10})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"cScale = d3.scaleSequential(d3.interpolateBlues).domain([0,65000]); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"height = 300\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"width // by dragging the screen, you can see different values for width\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"import {legend} from \"@d3/color-legend\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"