Visualization project for DC Council committees, starting in 2023-2024.
Built by Andrew Turner in collaboration with Greater Greater Washington.
Read more about the project in this blog post.
You can embed this project into any other website or application. It was built with Web Components using StencilJS.
Add this HTML to your website:
<dc-council-game
agency-filename="https://ajturner.github.io/dc-council/assets/2022/agencies.csv"
minoragency-filename="https://ajturner.github.io/dc-council/assets/2022/minoragencies.csv"
committee-filename="https://ajturner.github.io/dc-council/assets/2022/committees.csv"
member-filename="https://ajturner.github.io/dc-council/assets/2022/members.csv">
<h3 slot="header">DC Fantasy Council 2022-2024</h3>
</dc-council-game>
<script type="module" src="https://ajturner.github.io/dc-council/build/dc-council.esm.js"></script>
<script nomodule src="https://ajturner.github.io/dc-council/build/dc-council.js"></script>
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.97/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.97/calcite.css" />
Councils are currently saved to a hosted API and database. The Council API code is here and is generic to storing any council.
You can load different Members, Agencies, and Committees from any organization. These are just spreadsheets, and should have these columns:
agencies.csv
code,name,budget,description,link,committee,type
code
is a unique stringname
is the Agency name to displaybudget
is the amount of money in the Agency's budgetdescription
optional short description to display for more infolink
optional Web URL to the Agency webpagecommittee
Name of the Committee in default assignmenttype
major or minor for showing in the UI
members.csv
name,role,elected,termstart,termend,affiliation,link,photo
name
Member name to displayrole
Council position (e.g. Chair, At-Large, Region 1)elected
optional year electedtermstart
optional year term startstermend
optional year term endsaffilition
optional politicial or other affiliation to displaylink
optional Web URL to the Member's webpagephoto
Web URL to an image of the member
committees.csv
Used for the default committee.
Columns: id,name,description,chair,members,link,permanent
id
unique string codename
Committee name to displaydescription
optional summary to display for more infochair
Member name that is the default Committee Chairmembers
comma-separated (and quoted) list of Members on the committee by defaultlink
optional Web URL to the existing Committee webpagepermanent
true if the Committee should not be editable and should always be present even with a "blank" council
To work on the code for this project
git clone https://github.com/ajturner/dc-council.git
cd dc-council
and run:
npm install
npm start
To build the component for production, run:
npm run build
To run the unit tests for the components, run:
npm test