Published
Edited
Aug 10, 2021
1 star
md`# forked from https://observablehq.com/@elibenton/who-represents-me`
md`huge thanks to https://observablehq.com/@elibenton/who-represents-me. all code is theirs, with a few small changes`
//https://observablehq.com/d/d1c18167b05cfb4b
embed = html`
${viewof addressAlpha}<br/>
${Array.from(
categorizedData,
([key, values]) => html`
<table>
<thead>
</thead>
${values.map(
d =>
html`<tr><td align="left" style="vertical-align:top;">${
d.office
}</td><td align="right">
${d.politicians.map(d =>
d.urls && d.phones
?
html`<a style="color:black; border-bottom: #fcf574 solid 1.5px;" href=${
d.urls[0]
}>${d.name}</a> ${partyColor(
d.party[0]
)}
<span style="color:gray;"><i>
<a href= "tel: ${phone_num(d.phones)}">${d.phones}</a>
</i></span><br/>`
: html`${d.name} ${partyColor(d.party[0])}<br/>`
)}
</td></tr>`
)}
</table><br/>`
)}`
requestAlpha = encodeURI(
`${endpoint}/${requestType}?key=${apiKey}&address=${addressAlpha}`
)
responseAlpha = d3.json(requestAlpha)
categorizedData = {
var offices = responseAlpha.offices
let sen_rep = [];
for (let i = 0; i < offices.length; i++) {
if (offices[i].name == "U.S. Senator" | offices[i].name == "U.S. Representative" ) {
sen_rep.push(offices[i]);
}
}
console.log(sen_rep);
const processedData = Array.from(
d3array.groups(sen_rep, d => d.name),
([office, value]) => ({
office,
level: value[0].levels[0],
politicians: value[0].officialIndices.map(d => responseAlpha.officials[d])
})
);
console.log(processedData)
console.log(responseAlpha.offices)
const categories = d3array.group(processedData.reverse(), d =>
categorize(d.level)
);
return categories;
}
viewof addressAlpha = text({
title: "Your zip code:",
placeholder: "99354",
submit: "View Representatives!",
width: width,
value: "99354"
})
import {
textarea,
text,
radio,
usaMapCoordinates,
slider
} from "@jashkenas/inputs"
d3 = require("d3@5")
d3array = require("d3-array@^2.2")
function partyColor(data) {
if (data === "R") {
return html`<span style="color:#fc473a">(R)</span>`;
} else if (data === "D") {
return html`<span style="color:#118efc">(D)</span>`;
} else {
return html`<span style="color:#acafac">(I)</span>`;
}
}
function phone_num(phone_input) {
var new_phone = String(phone_input).replace(/[^0-9]/g, '');
console.log(new_phone)
return new_phone;
}
endpoint = `https://www.googleapis.com/civicinfo/v2`
apiKey = `AIzaSyAeBXmh-VC60AmBRrlc5OQBJmKQg7upwDo`
viewof requestType = radio({
title: 'Request Type',
description: 'What kind of data would you like to query from the API?',
options: [
{ label: 'representativeInfoQuery ', value: 'representatives' },
{ label: 'electionQuery', value: 'elections' }
// { label: 'voterInfoQuery', value: 'voterinfo' }
],
value: 'representatives'
})
function categorize(data) {
if (data === "country") {
return "Federal";
} else if (data === "administrativeArea1") {
return "State";
} else {
return "Local";
}
}
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.
