Interested in knowing who you can vote for in DC’s upcoming election? Check out Greater Greater Washington to search by your address and learn more about candidates and their positions on important topics.
Where are We?
DC is a fundamentally geographical city. The boundaries are (originally) a 10-mile by 10-mile diamond that was located to balance preferences of northern & southern colonies and also be a close distance to George Washington’s home at Mount Vernon. Our roads are organized in a British-style grid of incrementing letter + number names with crisscrossing French-style roads named for each of the current U.S. States.
Within the City there are 8 Wards, each with approximately 100,000 residents. The Wards are then subdivided into 46 Advisory Neighborhood Commissions (ANC). And finally, each ANC is subdivided into 345 Single Member Districts (SMD) of approximately 2,000 residents. Combined together every resident has a local neighborhood code like 8C02 (Ward 8, ANC 8C, SMD 8C02).
One aspect that I find remarkable is that while the 8 Ward Councilmembers (and a few At-Large council members) are paid positions, the other 345 SMD representative commissioners are unpaid volunteers! more on that later…
In 2023, thanks to the U.S. decennial census, the neighborhood boundaries are redrawn to improve equitable representation by balancing population and demographics. Every resident might be assigned a new Ward, ANC, and SMD. (Find yours here!) Within these new boundaries are the people who will represent them on broad city-wide policies to hyperlocal residential building permits, business licenses, and individual road changes. While I’d love to believe that every city resident has been involved with their local SMD representative and ANC committees, it is more likely that people are unaware of their current, and upcoming, districts and therefore new representatives.
Seeing is Understanding
We all know where we live. We should be able to easily find out information about our government and neighborhoods with just this information. I’m passionate about the potential for everyone to learn and be engaged on topics they care about. This is what I’ve been working on for the past few decades but I’m often surprised with how difficult it is to find out “what’s going on near me?”
What if you could just type in your address and see what’s going on and who represents me?
While you can use Google Maps to find local stores – that doesn’t really tell you what’s going on. If you’re lucky there’s a local Hub that you can find data, similar to Open Data DC.
Who are my Candidates?
DC is again a particularly unique part of America. While we are the capital city for the United States, we don’t have U.S. Senators or Congressional Representatives. Residents of the city have a Mayor, a Ward Councilmember, and then our volunteer ANC representative based on our SMD (Single Member District, like 6C04). Because our ANC representatives are unpaid volunteers they have little budget or ability to campaign other than walking door-to-door to meet over 2,000 constituents.
I appreciate and applaud the efforts of my neighbors to take on significant and important work to represent our neighborhood. For the past year I have been a (volunteer) member of my neighborhood Transportation & Public Space Committee (yes, we have TPS reports), so I’ve become more involved in local issues but I’m not ready to run for office.
So, I took the opportunity to collaborate with Greater Greater Washington, a local news organization, to create informative, interactive, and accessible visualizations of their comprehensive candidate surveys. We’ve created a few versions through the summer, including the Mayor’s Primary, Ward Council, and the At-Large Council members. Each of these races are city-wide, so location (within the city) isn’t very relevant. That’s very different with the hyper-local SMD candidates.
You can now search by address or neighborhood district to find local candidate responses. Since these candidates are volunteers they only have their personal budget and time for any campaigning. Creating an accessible tool like this supports all candidates by making it easy for voters to find out more about the candidates.
Unfortunately, not all candidates responded to the survey. That was their decision and it leaves their potential constituents without any information on their positions and priorities. Maybe candidates will still respond and the tool will automatically update with their new responses.
How was it built?
This was a fun project to build as it uses several interesting and new technology standards. The visualization is a web component where software developers can create new HTML elements that work in any webpage or web application framework.
- Stencil.js tools from Ionic which simplify the development + builds.
- ArcGIS JSAPI for geographic maps
- Data from OpenData DC and DC Board of Elections
- TypeScript, HTML, + CSS
The web component makes it very easy to embed into a website like GGWash – or any other site built with common website editors (WordPress, Drupal, Wix, etc.). You would just add this code to your website:
<dc-election-survey
id="anc"
filename="https://ajturner.github.io/dc-elections/assets/2022_anc.csv"
candidates-files="https://ajturner.github.io/dc-elections/assets/2022_anc_candidates.csv"
format="surveymonkey"
show-filter=true
filter=""
></dc-election-survey>
<script type="module" src="https://ajturner.github.io/dc-elections/build/dc-election.esm.js"></script>
<script nomodule src="https://ajturner.github.io/dc-elections/build/dc-election.js"></script>
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/@esri/calcite-components@1.0.0-next.292/dist/calcite/calcite.css' />
<script type='module' src='https://cdn.jsdelivr.net/npm/@esri/hub-components@4.0.0-beta.341/dist/hub-components/hub-components.esm.js'></script>The web component are like building blocks. They can be used independently or put together into a composition that integrates several components together. You can see an overview of the dc-election visualization components and how they load data:
The entire code project is open-source at https://github.com/ajturner/dc-elections. Feel free to check it out and re-use it. There aren’t currently any tests, and quite a bit of complex logic that emerged as we progressively built the visualizations over time. In future iterations I plan to refactor the project and settle early on a standard format which would simplify a lot of the code.