2a:null 2b:["$","title",null,{"children":"US Household Income by Region | Eric Xia | Observable"}] 30:[{"id":"2efaeb1171ec1a636585260733d28e618d700c6d02ea6ff4b1040f43c0168b75ae0b80f9795b7ab8ea57498de6501deb47f61a73d802a2376722121c969ec9d5","href":"https://static.observableusercontent.com/files/2efaeb1171ec1a636585260733d28e618d700c6d02ea6ff4b1040f43c0168b75ae0b80f9795b7ab8ea57498de6501deb47f61a73d802a2376722121c969ec9d5","name":"incomes.csv","type":"text/csv","lastModified":1654018953747.581,"size":3498}] 2e:{"id":"64a1d2a2b4f0439f","slug":"us-household-income-by-region","title":"US Household Income by Region","thumbnail":"563f0150d90fd0f924696f5ee977b1cf734f7b63a8748dcc7e260b993dd624c6","access_level":"public","create_time":"$D2022-05-31T17:27:31.182Z","update_time":"$D2022-05-31T23:40:17.439Z","view_time":null,"first_public_time":"$D2022-05-31T19:29:56.869Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"24d7ab16ed0438f8","login":"759c6b835359aafe","name":"Eric Xia","avatar_url":"https://avatars-next.observableusercontent.com/516ab664028448c5b948f8e21029dcfe77d179e03adb7832e850c7c9a0950bf7","tier":"starter_2024"},"version":428,"publish_version":428,"role":null,"authored":false,"authors":[{"type":"individual","id":"759c6b835359aafe","login":"759c6b835359aafe","name":"Eric Xia","avatar_url":"https://avatars-next.observableusercontent.com/516ab664028448c5b948f8e21029dcfe77d179e03adb7832e850c7c9a0950bf7","tier":null}],"members":[{"type":"individual","id":"759c6b835359aafe","login":"759c6b835359aafe","name":"Eric Xia","avatar_url":"https://avatars-next.observableusercontent.com/516ab664028448c5b948f8e21029dcfe77d179e03adb7832e850c7c9a0950bf7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"US Household Income by Region","cells":[{"id":0,"value":"# US Household Income by Region\nData from [US Census 2020](https://www.census.gov/data.html). This is my first original interactive graph with d3. There are probably too many columns for this display method to be very effective, but it does create a histogram that looks cool.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":123,"value":"viewof thisLocation = Inputs.select(incomes.map(income => income[\"Location\"]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"thisLocationIncomeBuckets.indexOf(thisLocationIncomeBuckets[2])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"//We want to make bands proportional to each bucket across x.\nx = d3.scaleLinear()\n .domain([d3.min(thisLocationIncomeBuckets, d => d[1]), d3.max(thisLocationIncomeBuckets, d => d[1])])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"minc = d3.min(thisLocationIncomeBuckets, d => d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"x(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"y = d3.scaleBand()\n .domain(thisLocationIncomeBuckets.map(d => d[0]))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"x(1814)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"thisLocationIncome = incomes.find(income => income[\"Location\"] == thisLocation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"thisLocationIncome\n//We have our 41 bins with numbers in them. We want to display a band for each of these bins","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"thisLocationIncomeBuckets = {\n var arr = []\n for(var key in thisLocationIncome){\n if(key == \"Location\"){continue}\n var value = thisLocationIncome[key]\n if(typeof value === \"string\"){\n value = Number(value.replace(/,/g, ''))\n }\n arr.push([key,value])\n}\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"Number(\"1,200\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"rainbowArr = {\n var arrr = []\n var n = 80\nfor(let i = 0; i < n; i++) {\n arrr.push(d3.interpolateCubehelixDefault(i/n))\n}\n return arrr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"margin = ({top: 30, right: 80, bottom: 0, left: 140})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"height = margin.top + 42 * 10\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, \"%\"))\n .call(g => (g.selection ? g.selection() : g).select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"yAxis = (g, y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"incomes = FileAttachment(\"incomes.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"