Building CampaignHawk: Styling the Precinct Data Layer (Part 20)

[samcorcos]

Continuing the discussion from Building CampaignHawk: Scaling Colors and Values with D3 (Part 19):

In Part 20, we finally apply those scaled colors to the precinct data layer.

Building CampaignHawk: Scaling Colors and Values with D3 (Part 19)

Continuing the discussion from Building CampaignHawk: Making a Precinct Data Layer (Part 18):

In Part 19 we’ll use D3 to make math and scaling easier.

Building CampaignHawk: Making a Precinct Data Layer (Part 18)

Continuing the discussion from Building CampaignHawk: Clustering with Leaflet Markercluster (Part 17):

Part 18 takes the same data and breaks it down into precincts.

Building CampaignHawk: Clustering with Leaflet Markercluster (Part 17)

Continuing the discussion from Building CampaignHawk: Spacial Analysis Overview (Part 16):

Part 17 goes over Leaflet and Markercluster. I spent some time looking into clustering algorithms, which were pretty complicated, but then I found Markercluster, which made the whole process almost trivially easy.

Building CampaignHawk: Spacial Analysis Overview (Part 16)

Continuing the discussion from Building CampaignHawk: Triggering Functions with Radio Buttons (Part 15):

Part 16 finally gets into spacial analysis, where the map visualizations start to come together.

Building CampaignHawk: Triggering Functions with Radio Buttons (Part 15)

Continuing the discussion from Building CampaignHawk: Radio Button Styling (Part 14):

Now it time to connect those radio buttons using React in Part 15.

Building CampaignHawk: Radio Button Styling (Part 14)

Continuing the discussion from Building CampaignHawk: Popouts and Radio Buttons (Part 13):

There’s a lot more to styling radio buttons than you might think. There are a few pseudo classes you need to know about to get them to work properly. Part 14

Building CampaignHawk: Popouts and Radio Buttons (Part 13)

Continuing the discussion from Building CampaignHawk: Mapbox.js and Meteor (Part 12):

This is another one that mostly goes over styling. In it, we build popouts and radio buttons (to be styled later). Part 13.

Building CampaignHawk: Mapbox.js and Meteor (Part 12)

Continuing the discussion from Building CampaignHawk: Mapbox and GeoJSON (Part 11):

And here’s Part 10 in which we finally get our data to render on the map.

Building CampaignHawk: Mapbox and GeoJSON (Part 11)

Continuing the discussion from Building CampaignHawk: Thinking about Data (Part 10):

If you’re interested in data visualization and Mapbox, Part 11 might be useful.

Building CampaignHawk: Thinking about Data (Part 10)

Continuing the discussion from Building CampaignHawk: Mapbox and Data (Part 9):

Part 10 is more of an intermediary step that goes over the data to figure out how to best visualize/analyze it.

Building CampaignHawk: Mapbox and Data (Part 9)

Continuing the discussion from Building CampaignHawk: Connecting Modals with React (Part 8):

Part 9, in which we finally start working with Mapbox and some data. This is where things start to get interesting.

Building CampaignHawk: Connecting Modals with React (Part 8)

Continuing the discussion from Building CampaignHawk: Populating Modals (Part 7):

Part 8, connecting modals with React. I think this article does a pretty good job showing the thought process behind connecting components to each other in React.

Building CampaignHawk: Populating Modals (Part 7)

Continuing the discussion from Building CampaignHawk: Making Modals (Part 6):

Part 7, populating the modals. This is all about creating components—primarily forms—to be used to populate the modals. This is also a pretty good lesson in flexbox.

Building CampaignHawk: Making Modals (Part 6)

Continuing the discussion from Building CampaignHawk: Connecting Tooltips with React (Part 5):

Part 6, making modals. This one is also more about styling.

Building CampaignHawk: Connecting Tooltips with React (Part 5)

Continuing the discussion from Building CampaignHawk with Meteor and React (Part 4):

And here’s Part 4. This one goes over connecting tooltips with React.

Building CampaignHawk with Meteor and React (Part 4)

Continuing the discussion from Building CampaignHawk with Meteor and React (Part 3):

And here’s Part 4. This is mostly going over tooltips and material design.

Building CampaignHawk with Meteor and React (Part 3)

Continuing the discussion from Building CampaignHawk with Meteor and React (Part 2):

Here’s Part 3 . I built out the sidenav and did a lot of styling. I’ve also started tracking how much time I spent on various tasks while working on this project.

Building CampaignHawk with Meteor and React (Part 2)

Continuing the discussion from Building CampaignHawk: An Open-Source Election Canvassing App with Meteor and React (Part 1):

Here’s Part 2. This goes over basic file structure, packages, components, and routes.

Building CampaignHawk: An Open-Source Election Canvassing App with Meteor and React (Part 1)

I’ve been asked by a to build an open-source election canvassing app to make it easier to run a campaign. Since it’s open-source, I figure I might as well document how I did it. I have a feeling this is going to be a long series…

https://medium.com/@SamCorcos/building-campaignhawk-an-open-source-election-canvassing-app-with-meteor-and-react-part-1-aff5e8e19a32