{
const data = [{
type: 'choroplethmapbox',
locations: locations2,
z : medianIncome4,
geojson: fips_geojson,
coloraxis: 'coloraxis',
hoverinfo: 'skip'
}];
const layout = {
mapbox: {
center: {lat:37.0902,lon:-95.7129},
style: "open-street-map",
zoom: 3
},
coloraxis: {colorscale: "Jet"},
title: {text: "Median_Income"},
width: 900,
height: 500,
margin: {t: 30, b: 0}
};
const myDiv = DOM.element("div");
Plotly.newPlot(myDiv, data, layout);
return myDiv;
}
{
const data = [{
type: 'scattermapbox',
// locations: locations2,
lat: lats2,
lon: longs2,
mode : 'markers',
marker: {
size: income2.map(d=>d/10000).map(d=>d<3?3:d),
line: {
color: 'black',
width: 2
},
},
geojson: fips_geojson,
text: countyStateIncome
}];
const layout = {
mapbox: {
center: {lat:37.0902,lon:-95.7129},
style: "open-street-map",
zoom: 3
},
title: {text: "median income"},
width: 900,
height: 500,
margin: {t: 30, b: 0}
};
const myDiv = DOM.element("div");
Plotly.newPlot(myDiv, data, layout);
return myDiv;
}
myVectorDiv = DOM.element("div");
{
const data = [{
type: 'choroplethmapbox',
locations: locations,
z : medianIncome,
geojson: fips_geojson,
coloraxis: 'coloraxis',
hoverinfo: 'skip'
}];
const layout = {
mapbox: {
center: {lat:37.0902,lon:-95.7129},
style: "open-street-map",
zoom: 3
},
coloraxis: {colorscale: "Jet"},
title: {text: "Median_Income"},
width: 900,
height: 500,
margin: {t: 30, b: 0}
};
const myDiv = DOM.element("div");
Plotly.newPlot(myDiv, data, layout);
return myDiv;
}
fips_geojson = d3.json("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json")
medianIncome = locations.map(d=>Math.random()*10000) // Random
// This command extracts the Household Income from the file; however, I am also mistakenly
// pulling in states and puerto rico and US so the order and count of records doesn't match
//the GEO JSON file.
medianIncome3 = medianIncome2.map(d=>d.Median_Household_Income_2018)
//this command cleans of the text to make it a number in the income field.
medianIncome4 = medianIncome3.map(d=>d?+d.replace(/,/g, ''):0)
//this extracts the data from the FileAttachment area and parses into the fields
medianIncome2 = d3.csvParse(await FileAttachment("MedianIncomebyCounty.csv").text()/*,d3.autoType*/)
//medianIncome2[0].FIPStxt
//medianIncome2.map(d=>d.FIPStxt,d=>d.Median_Household_Income_2018)
population = countyFIPSLatLong.map(d=>d.POPULATION)
locations = countyFIPSLatLong.map(d=>zeroPad(d.STATEFP,2)+zeroPad(d.COUNTYFP,3))
locations2 = medianIncome2.map(d=>d.FIPStxt)
locationsLatLon = Object.fromEntries(locations.map((d,i)=>[d,[lats[i], longs[i]]]))
locationsLatLon['01001']
medianIncome2[0].FIPStxt
/* myObject = */
incomeinfo = {
let arr3 = [];
let n = medianIncome2.length
for (let i = 0; i < n; i++) {
if(locationsLatLon[medianIncome2[i].FIPStxt] !== undefined){
arr3.push([medianIncome2[i].FIPStxt,medianIncome2[i].area_name, locationsLatLon[medianIncome2[i].FIPStxt], medianIncome2[i].Median_Household_Income_2018]/*,medianIncome2[i].area_name*/);
}
}
return arr3 //return object.fromEntries(arr3
}
longs2 = incomeinfo.map(d=>d[2][1])
lats2 = incomeinfo.map(d=>d[2][0])
income= incomeinfo.map(d=>d[3])
income2 = income.map(d=>d?+d.replace(/,/g, ''):0);
function removeComma(arr4) {
return arr4.map(d=>d?+d.replace(/,/g, ''):0);
}
medianIncome2[34].FIPStxt
// Filter out state and US information by using the county file, locations which only has county data:
{
let arr4 = [];
let n = medianIncome2.length
let m = locations.length
for (let i = 0, k=0; i <n; i++){
for (let j = 0;j< m; j++){
if (medianIncome2[i].FIPStxt == locations[j]){
arr4[k++]= [medianIncome2[i].FIPStxt, medianIncome2[i].Median_Household_Income_2018]
}
}
}
return arr4
}
lats = countyFIPSLatLong.map(d=>+d.LATITUDE)
longs = countyFIPSLatLong.map(d=>+d.LONGITUDE)
countyStatePopulation = countyFIPSLatLong.map(d=>d.COUNAME + ", "+d.STNAME+" : "+d.POPULATION)
countyStateIncome = incomeinfo.map(d=>d[1] + ", " + d[3])
countyFIPSLatLong = d3.csvParse(await FileAttachment("CenPop2010_Mean_CO.csv").text(),d3.autoType) // Data Source: https://www2.census.gov/geo/docs/reference/cenpop2010/county/
countyFIPSLatLongContiguousUS = d3.csv("https://raw.githubusercontent.com/btskinner/spatial/master/data/county_centers.csv")
md `## Using GeoJson`
zeroPad = (num, places) => String(num).padStart(places, '0') //https://stackoverflow.com/questions/2998784/how-to-output-numbers-with-leading-zeros-in-javascript
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.
