{"componentChunkName":"component---src-templates-project-detail-js","path":"/project/civic-platform/","result":{"data":{"site":{"siteMetadata":{"host":"xenodochial-pasteur-bb9d87.netlify.com"}},"markdownRemark":{"html":"

The CIVIC Platform is the culmination of many years of civic work from Hack Oregon. I can't take credit for all of it. It's not my brain child, and it's the collaborative output of hundreds of volunteers, but in 2018 I served as the platform product owner and eventually the organization's CTO.

\n

Some Background

\n

I was drawn to Hack Oregon for two reasons: the ability to give back with skills instead of money and the attitude and ambition of the Hack Oregon organization. I've always felt kind of weird as a software engineer in the grand scheme f people and work in America. It's no secret that software engineers make good money despite having relatively low education and skill requirements, but why is that? The pointed answer is capitalism, but I think a more accurate answer is luck. I just happened to enjoy writing code and making websites, and that just so happened to translate into a solid career in a growing market.

\n

In addition to this luck, I managed to succeed in spite of the conditions of living in America working against me. The two most significant decisions that put me where I am now is the laptop my grandma bought me for my eighth grade graduation, and my personal dodging of financial aid in college in order to graduate despite not being able to afford it at the time. By all means, neither of these decisions were savvy. My grandma spent too much on that laptop given her income, and I accepted tens of thousands of dollars in debt even though I couldn't get approved for a loan. Regardless, both decisions set me up for success. So why? Not why did they set me up for success, I think that part is obvious. My confusions and curiosity has always been in the question, \"why were decisions that were so obvious in their value also so obviously bad decisions fiscally and socially?\" If getting a laptop early and going to college were exactly what I should have done, why is it that they were even remotely risky decisions to make?

\n

That's why I'm interested in civics. Hack Oregon is gives me an outlook to work in civics while also giving back to my local (Portland, OR) community.

\n

The CIVIC Platform

\n

Over the years, the projects at Hack Oregon have had common technology problems. Things like setting up databases, managing data as we receive it, writing ETL code to make turn spreadsheets machine readable, building APIs, and building UIs. The CIVIC Platform aims to aid in solving these common problems, which we have divided into four pillars:

\n
    \n
  1. Data Transfer and Security: Data if often found in silos within organizations. What common tools can we build to securely extract data from these silos and make sure that this data is kept current?
    2. \n
  2. Structure and Scale: Data is generally shapeless when we receive it, meaning there is no way to query it and the only way to work with it is to download entire archives. Can we write tools to transform shapeless data into databases and handle a variety of scales of data?
    3. \n
  3. Developers and Specialists: Data will always have nuance to it, and databases are too open-ended. Can we take the gruntwork out of making APIs for these databases to make it easier to access data as well as give a restricted and curated experience to prevent misinterpretations and abuse of the data?
    4. \n
  4. Access and Equity: Data alone isn't knowledge, and expecting everyone to make API calls in order to learn from data isn't fair to all. Can we create visualizations and sandboxes for exploring data?
    5. \n
\n

In the 2018 project season, we delivered on all four pillars. There is more work to do, and there always will be due to the nature of platforms, but I'm incredibly proud of what we collectively built with a volunteer workforce.

\n

I also gave a talk on the CIVIC Platform at CascadiaJS.

\n

Technology Used

\n","fields":{"id":"civic-platform"}},"dataProjectsToml":{"projects":[{"name":"Nomad Web UI","slug":"nomad-web-ui","tags":["JavaScript","EmberJS","Cluster Scheduler","DevOps","Work"],"url":"https://nomadproject.io","year":2018,"thumbnail":"nomad-ui.png","description":"The Web UI for the Nomad cluster scheduler developed and maintained by HashiCorp. Cluster schedulers are tools designed to take arbitrary workloads and run them on arbitrary computers in a cluster. The UI helps operators in an organization maintain availability of services and computation while monitoring resources across the cluster. The UI also helps developers deploy their own services without needing the expertise operators sepcialize in.\n"},{"name":"HashiConf Generative Art Plotter","slug":"hashiconf-genart-plotter","tags":["Processing","Generative Art","SVG"],"url":null,"year":2018,"thumbnail":"hashiconf-genart-plotter.jpg","description":"An art installation at HashiConf 2018. Throughout the two conference days, the 2D plotter and a preview monitor were installed in the HashiCafe for attendees to watch and (if they were lucky) take home a one-of-a-kind keepsake.\n"},{"name":"CIVIC Platform","slug":"civic-platform","tags":["JavaScript","Data Visualization","Python","Leadership","Volunteering"],"url":"https://civicplatform.org","year":2018,"thumbnail":"civic-platform.png","description":"The CIVIC Platform is the flagship product from the CIVIC Software foundation: a non-profit I am the volunteer CTO of. The platform facilitates a data pipeline, moving public data into structured, queryable databases in the cloud. It exposes numerous APIs for building tools and stories with public data. It also comes with a web application that curates stories in the form of cards to show insights that are consumable by any citizen.\n"},{"name":"U.S. in Water","slug":"us-in-water","tags":["JavaScript","Cartography","Tippecanoe","GCP"],"url":"http://stuff.mlange.io/wc-final","year":2017,"thumbnail":"us-in-water.png","description":"A detailed look at all the rivers, streams, and bodies of water in the United States as tracked in the USGS National Hydrography Dataset. Many gigabytes of data were converted into vector tiles using Mapbox's Tippecanoe tool.\n"},{"name":"Climb Tracker","slug":"climb-tracker","tags":["JavaScript","React","Firebase"],"url":"https://climb.mlange.io","year":2016,"thumbnail":"ct-tracker-thumb.png","description":"A simple web app for tracking bouldering workouts. It focuses on quickly marking which problems were completed and which were attempted. In this way, at the end of the workout, a histogram and tally of problems and problem difficulties is plotted. There are also monthly reports to look back on.\n"},{"name":"Emoji Skin Tone Randomizer","slug":"emoji-skin-tone-randomizer","tags":["JavaScript","Chrome"],"url":"https://github.com/DingoEatingFuzz/chrome-emoji-skin-tone-randomizer","year":2016,"thumbnail":"emoji-skin-tones.png","description":"A chrome extension for assigning a random skin tone to a skin tone eligible emoji that doesn't already have one assigned.\n"},{"name":"Headers Middleman","slug":"headers-middleman","tags":["JavaScript","React","Chrome"],"url":"https://github.com/DingoEatingFuzz/chrome-headers-middleman","year":2015,"thumbnail":"headers-middle-man.png","description":"A chrome extension for modifying the headers of HTTP Requests based on regex pattern matching.\n"},{"name":"NPR Songs We Love Bookmarklets","slug":"npr-songs-we-love","tags":["JavaScript","Browsers"],"url":"https://github.com/DingoEatingFuzz/npr-music-we-love-bookmarklets","year":2015,"thumbnail":"npr-songs-we-love.png","description":"The NPR Songs We Love app was a wonderful thing, but it had no way to pin/favorite/star/save the tracks you liked. This was solvable in many ways, but the way that sounded the most interesting at the time was bookmarklets. With a click of a bookmarklet, the track would be saved to localstorage. I went overboard and created additional bookmarklets for seeing the track list and for disliking tracks. You know, just for fun.\n"},{"name":"Github Avatar Arrangement","slug":"github-avatar-arrangement","tags":["Python","Processing"],"url":"https://github.com/DingoEatingFuzz/github-gravatars","year":2014,"thumbnail":"github-gravatars.png","description":"A quick sketch that generates all possible Github Avatars (not including color variations). Since Github default avatars are created through the toggling of 15 states, the resulting space is only 215. Which is high, but not so high it isn't presentable in a single image.\n"}],"images":[{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter.jpg","alt":"A finished plot of the Consul product","caption":"Each of the six HashiCorp products can potentially be plotted via the generative art algorithm. This is an example of the Consul product, which is the only product\ngrid that features circles.\n"},{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter-nomad.jpg","alt":"A finished plot of the Nomad product","caption":"This is an example of the Nomad product. Each plot is unique, so although each product grid is typically very well ordered, here they are not.\nUsing perlin noise, some lines are dropped, spaced irregularly, and slightly rotated.\n"},{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter-terraform.jpg","alt":"A finished plot of the Terraform product","caption":"To prevent the art from going to abstract, each plot includes the product logo, stylized in a way that complements the line art a plotter produces.\nThen, to tie the plot to the event, the latest product version number is plotted to hopefully invoke nostalgia years later.\n"},{"project":"us-in-water","url":"/images/us-in-water-fullscreen.png","alt":"A fullscreen seenshot of the U.S. in Water project","caption":"The project is presented as a minimalist map with a set of clickable features on the left-hand side. The features on the left are hand-picked coordinates\nthat I think are interesting to look at.\n"},{"project":"us-in-water","url":"/images/us-in-water-central-california.png","alt":"Central California in the U.S. in Water map","caption":"Central California has well-documented flowlines, which make for a rich picture of the passage of water.\n"},{"project":"us-in-water","url":"/images/us-in-water-louisiana.png","alt":"Louisiana in the U.S. in Water map","caption":"As the state sinks and eordes while the gulf rises, the total land area of Luisiana is shrinking.\n"},{"project":"us-in-water","url":"/images/us-in-water-mt-hood.png","alt":"Mt. Hood in the U.S. in Water map","caption":"The shape of Mt. Hood is distinct through the features of glaciers and lakes alone.\n"},{"project":"us-in-water","url":"/images/us-in-water-salton-sea.png","alt":"Salton Sea in the U.S. in Water map","caption":"The Salton Sea is the biggest lake in California. Evident in the water lines, there are massive-scale feats of engineering surrounding the lake.\n"},{"project":"civic-platform","url":"/images/civic-platform-overview.png","alt":"The CIVIC Platform home page","caption":"The CIVIC Platform website is a gateway to a suite of story cards that each provide an interactive tool or insight that lets people understand their city a little bit better.\n"},{"project":"civic-platform","url":"/images/civic-platform-housing.png","alt":"A story card in the 2018 housing collection","caption":"All StoryCards aim to have some explanation, some data visualization, and some interactivity.\n"},{"project":"civic-platform","url":"/images/civic-platform-disaster.png","alt":"A multivariate plot chart in the 2018 disaster collection","caption":"The frontend civic frontend repo provides a collection of a UI components that enable quickly making rich and interactive visual explanations.\n"},{"project":"civic-platform","url":"/images/civic-platform-sandbox.png","alt":"The CIVIC platform sandbox","caption":"The CIVIC sandbox is a feature of the CIVIC platform that gives people a chance to dive deeper into data without having to make the jump into developer tools to run databases and notebooks locally.\n"},{"project":"climb-tracker","url":"/images/ct-home.png","alt":"The landing page for the Climb Tracker app","caption":"A straight-forward page that markets some features and requires auth. The background photo I took in Zion National Park.\n"},{"project":"climb-tracker","url":"/images/ct-tracker-blank.png","alt":"The Climb Tracker tracker with nothing tracked yet","caption":"This is the screen you see after authenticating. It is the tracker, which is the primary experience. It has two features which are immediately\nidentifiable: a list of colored buttons for tracking a climb of a difficulty, and an undo button in the event you track something in error.\nThe third less obvious feature is the \"A\" button, which marks attempts at problems.\n"},{"project":"climb-tracker","url":"/images/ct-tracker-full.png","alt":"The Climb Tracker tracker with various climbs tracked","caption":"As you use the climb tracker throughout your session, a histogram is formed that makes it very clear which difficulties you are focusing on.\nThis can be used to tell you when your warmup is done, if you're pushing yourself too hard and maybe that's why you aren't finishing anything, or\nsimply, what your success rate per difficulty is. The stripe-textured regions denote attempts.\n"},{"project":"climb-tracker","url":"/images/ct-reports.png","alt":"The Climb Tracker reports section","caption":"The reports section gives you a detailed memory of your climbing progress and frequency over time. The dashboard metrics at the top\nare useful for quick stats for the current month. Proceeding the dashboard metrics are monthly report cards that feature kabob\ncharts to illustrate difficulty histograms over time.\n"},{"project":"headers-middleman","url":"/images/headers-middle-man-large.png","alt":"Headers Middleman options page","caption":"The options page for Headers Middleman. Used to add \"rules\", which are regular expressions that match URLs, and \"headers\" which can be values\nfor new headers, values to override headers, or removing an unwanted header.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-love.png","alt":"NPR Songs We Love love indication","caption":"Since clicking a bookmark to add an entry to local storage gives no feedback to the user, this heart is flashed on the screen. It's just slapped\ninto the DOM with some jQuery.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-hate.png","alt":"NPR Songs We Love hate indication","caption":"Hate is a nearly identical bookmark to Love. The only differences are the local storage key and the hotlinked icon URL.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-list.png","alt":"NPR Songs We Love love list","caption":"The Love List bookmarklet acts as a toggle. If the Love List element is found on the page, it's removed, otherwise it's added. This ended up being\na tricky bookmarklet since it contains full blown templating for binding the loved track data. Included in this project write up is\na sample of what that templating looks like.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-bookmarklets.png","alt":"NPR Songs We Love bookmarklet page","caption":"This was the quick and dirty \"installation\" page. A user interested in this augmentation to the Songs We Love 2014 app would drag these links\ninto their bookmark bar. The trick being that they aren't your typical link. They take the form of javascript:<insert-lots-of-javascript-here>.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-jobs.png","alt":"Nomad UI jobs list","caption":"The Jobs List page serves as the home page for developers interacting with Nomad. It represents all software known to the cluster.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-deployments.png","alt":"Nomad UI job deployments","caption":"Nomad supports automatic rolling and green/blue deployments as well as optional canary deployments. All of this is represented in the UI\nand kept up to date in realtime.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-logs.png","alt":"Nomad UI stdout log streaming","caption":"Nomad also has a streaming HTTP API for tailing logs for allocations. The UI lets any privileged user see these logs using fetch and streaming\nrequests when possible and falling back to polling otherwise.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-stats.png","alt":"Nomad UI metrics over time","caption":"Stats in Nomad are not stored, but the UI makes a best effort attempt at tracking data over time by storing previous values in memory,\naccounting for skipped data, and persisting historical data (up to a limit) between page views.\n"}]}},"pageContext":{"slug":"/project/civic-platform/"}},"staticQueryHashes":[]}