simpleSVGMap = {
// we create an SVG with the width and height specified
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 600)
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
// This line renders our population data
.attr("fill", d => getColorByAIGE(countyByFips.get(+d.id)))
.attr("d", path)
.append("title")
.text(d => {
// console.log('countyByFips.get(+d.id)', countyByFips.get(+d.id));
const obj = countyByFips.get(+d.id);
const aige = obj? obj.AIGE: ''
return `${d.properties.name}, AIGE: ${aige}`
});
// this part renders the state borders over top of our counties
svg.append("path")
.datum(states)
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
// we need to return a DOM element.
// the .node() function returns the DOM element corresponding to the d3 selection.
return svg.node();
}
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 600]);
const margin={left: 50, right: 50, top: 50, bottom: 50};
const attr = 'Med_HH_Income_Percent_of_State_Total_2020'
const y = d3.scaleLinear()
.domain(colorRange).nice()
.range([600 - margin.bottom, margin.top])
const x = d3.scaleLinear()
.domain(d3.extent(county_income_unemployment, d => + (d[attr].replace(/,/g, '') ))).nice()
.range([margin.left, width - margin.right])
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
const xAxis = g => g
.attr("transform", `translate(0,${600 - margin.bottom})`)
.call(d3.axisBottom(x))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.selectAll("circle")
.data(county_income_unemployment)
.join("circle")
.attr("cx", d => x(+ (d[attr].replace(/,/g, '')) ))
.attr("cy", d => {
const obj = countyByFips.get(+d['FIPS_code'])
if(!obj) return 0
return y(+obj['AIGE'])
})
.attr("r", 4)
.attr('opacity', 0.2)
return svg.node();
}
d3.extent(county_income_unemployment, d => + (d['Median_Household_Income_2020'].replace(/,/g, '') ))
colorRange = d3.extent(aioe_by_geo, d=> d.AIGE)
function getColorByAIGE(obj){
var colors = ['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58']
var colorFn = d3.scaleQuantize()
.domain(colorRange)
.range(colors)
if(obj){
return colorFn(obj['AIGE'])
}
return 'gold'
}
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
path = d3.geoPath()
states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
nation = topojson.feature(us, us.objects.nation)
counties = topojson.feature(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
AIOE_by_Geo.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
countyByFips = new Map(aioe_by_geo.map(d => [d['FIPS Code'], d]))
aioe_by_geo
d3Geo = require("d3-geo@2")
d3 = require("d3@^5.9")
getIncomeByFip = new Map(county_income_unemployment.map(d => [+d['FIPS_code'], d]))
county_income_unemployment = sheet_data_fn("https://docs.google.com/spreadsheets/d/e/2PACX-1vTvKGSsOVYZtSerp-b9iN3rIcjm82lCnsDmxY7H3lP8LQLlJcDZ6gpFC-eoZOhaK_sifzCa8jo6FXMk/pub?gid=1905153992&single=true&output=tsv")
async function sheet_data_fn (new_url){
let sheet_data =[];
const spreadsheet = await d3.tsv(new_url)
.then(data => data.forEach(d => {
// d[''] = months[+ d.DATE.split("/")[0] -1 ]
sheet_data.push(d);
} )); // d3.tsv returns a Promise
return sheet_data;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
