Show Me The Plan: Collection of Interactive Visualizations & Calculators

[john-osullivan]

Update: If the project below sounds interesting, come over to techforwarren/policyboard! Submit issues with ideas, help gather research, find good new datasets, and let's make this happen 🎉

---

This issue was originally about making something like the current elizabethwarren.com/plans page, but the cool thing I was hoping to help create are interactive plan/data-driven visualizations. The debt calculator is what got me thinking about this because it puts the policy in the terms of peoples' lives.

I think putting plans in terms of individual voter's lives is the big thing here, whether that's showing how a plan will benefit them, or how much the problem could be hurting them. A calculator for the affordable housing plan, for instance, could use their zip code to show how much Warren's plans would reduce average rent in their area/city. Something for climate change could show whether somebody is in outdated flood zone maps, or whether their risk for asthma/cancers is elevated.

The prior idea had so many pieces that it was tough to get a simple skeleton off the ground. For now I'm going to set up a basic tabbed page with one visualization. The CPFB dataset over in https://github.com/techforwarren/datasets seems like a great place to start! I'm going to borrow as much styling as I can from https://github.com/techforwarren/eventmap , see if we can start building out a shared design system.

[jasonkalmeida]

Really love this idea John, and a lot of the detailed points you've listed. I especially agree with the general idea of figuring out ways to better communicate the impact of these plans to real people.

Couple thoughts: 1) While I think the "board" page's design will be incredibly important, I really think the detail page design is critical to this whole thing - if it visually comes off as approachable and informative, I think people will feel interested in coming back; but if it's too heavy/overwhelming, people might just disconnect. I agree with you on almost all the points of what should be on there, but how we want it is something we should figure out. Do we have any designers in the group that could potentially add some input on ideas of how to go about this? I know not every issue will be the same, but I do think getting a general "detail page" format would be helpful here.

2) To move forward with this, are there 4-5 issues we can start with to just conceptually work with while figuring this page out? I know the grander concept is a seemingly infinite list, but I think to get the details of this right it might help to have some working issues. Maybe @vyedin might have some thoughts on this point?

Would love to chat more and something come out of this idea!

[john-osullivan]

Hey @jasonkalmeida !

Agreed that the detail page is going to be crucial here! It's going to be tricky balancing repeatable layouts with making sure each issue is presented as well as possible. Totally with you that we've gotta keep it from being overwhelming. I've got a few different specific thoughts, but my general idea is that it'll start from voters' lived experience of the problem, move to simple before & afters of the plan, and gradually work down to the actual legislation linked at the bottom.

I don't know if they've taken a look at this GitHub yet, but I think a few people in the "Introduce yourself" thread said they'd done web design. I've done my fair share of front-ends, but those are more interfaces than designs, so I'd definitely like to defer to somebody w/ web & graphic design experience.

In terms of just getting this moving, how about we take the first column from the image (below) and call that the prototype set? I'll reach out to the person who Tweeted it and see if they organized the files used for those printouts, see if they could save us a bunch of data gathering.

1. Climate Change
2. Big Tech
3. Economic Patriotism
4. Puerto Rico

[Hucxley]

Probably the easiest way to do this is to use something like VueJS for the templating engine, Combine it with Material UI with Vuetify, and the front end gets much easier.

This is a simple proof of concept I did for a local soccer team supporters' group that gives a rough idea of what can be done with a relatively low amount of effort.

From a UI perspective, I'd present the list of topics like as policy manuals, but with more simplified contents that summarize the policy in 1 or 2 pages. When clicking on the manual "cover", use a modal or sliding bottom sheet to open the policy summary to view. Include a link to the full policy proposal on the campaign website under the summary for more info, and it should be good to go.

On the backend, VueJS works best with a Mongo/Firebase JSON data storage system, so there are some limitations on storing the text, but it can be done relatively easy. If there isn't a solution already in the works, I can see if I can put something together in my time off as a proof of concept of the basic framework if there's interest in pursuing a web app approach.

[john-osullivan]

Hey @Hucxley , glad to hear you're on board! This is definitely going to be a web app. There are a few decisions to be made with the stack, but I think those are just implementation details. My personal preference is toward React and a fully static deployment, but I think talking frameworks right now is putting the cart before the horse. I think you may be underestimating the complexity in the "policy summary" section.

Most of these policies don't have dedicated sections on Warren's website, that's why I think this webapp would be really useful. The bulk of the real work here is going to be finding and crafting the content. For instance, we might find interview answers she's given about the policy and surface them with some real nice formatting. Even better, we could make interactive experiences which put each policy in the context of voters' lives. Climate Change, for instance, could tell people which disasters have increased in frequency in their areas (are you living in an outdated flood map which doesn't reflect three 100-year storms in five years?). This is something I'd love to get shared ideation on, have us all contribute ideas along the lines of her debt calculator, but for other policies.

The technical work here isn't the heaviest part, the actual site is a basic static web page displaying fixed content. We don't even really need a backend, we're not storing any user data -- it could all be handled with Markdown files within the repo, something like that.

The real meat here is putting together all of the content.

[Hucxley]

That's certainly true, as well. A reusable template front end is a reusable template front end, whatever way you go with it. I've never really enjoyed working with React, so I don't know how much I can help there, but it would also be important to be able to easily update the policy summaries, examples, etc. in case they change or add new plans.

So, I don't know how much of it I would make static as opposed to rendering what exists in the now.

Either way, it sounds like y'all have a start already, and if you need anything from me, I'll keep watching the repo to see if I'm able to contribute anything meaningful to the work.

On Thu, Aug 1, 2019, 12:38 PM john-osullivan notifications@github.com wrote:

Hey @Hucxley https://github.com/Hucxley , glad to hear you're on board! This is definitely going to be a web app. There are a few decisions to be made with the stack, but I think those are just implementation details. My personal preference is toward React and a fully static deployment, but I think talking frameworks right now is putting the cart before the horse. I think you may be underestimating the complexity in the "policy summary" section.

Most of these policies don't have dedicated sections on Warren's website, that's why I think this webapp would be really useful. The bulk of the real work here is going to be finding and crafting the content. For instance, we might find interview answers she's given about the policy and surface them with some real nice formatting. Even better, we could make interactive experiences which put each policy in the context of voters' lives. Climate Change, for instance, could tell people which disasters have increased in frequency in their areas (are you living in an outdated flood map which doesn't reflect three 100-year storms in five years?). This is something I'd love to get shared ideation on, have us all contribute ideas along the lines of her debt calculator https://elizabethwarren.com/debt, but for other policies.

The technical work here isn't the heaviest part, the actual site is a basic static web page displaying fixed content. We don't even really need a backend, we're not storing any user data -- it could all be handled with Markdown files within the repo, something like that.

The real meat here is putting together all of the content.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/techforwarren/idea-board/issues/4?email_source=notifications&email_token=ABWCBHCQQOGWFHLMIZMQFZDQCMGQRA5CNFSM4IHFX2JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3LF4TY#issuecomment-517365327, or mute the thread https://github.com/notifications/unsubscribe-auth/ABWCBHBNQZFN2G3TDEYV723QCMGQRANCNFSM4IHFX2JA .

[john-osullivan]

Sounds good! create-react-app bundles all the assets such that the output bundle will always show the updated content, even if the app is hosted on a CDN. React does occasionally feel clunky, but the ecosystem is just so strong. Related, have you worked with Typescript before? I enjoy using it, but will hold off if you haven't.

I'm going to make a repo and lay out the boilerplate this weekend. Once I've got a repo, would you be down to join me brainstorming on visualizations we could plug in?

[shaisachs]

So excited for the progress here! Can I help by creating a techforwarren repo where you can push this stuff into? Or will that only get in the way?

[jasonkalmeida]

Would love to help figure out the information page/cards and contribute! And I’m down to use React.

One point where I think React might be helpful here is if we want to personalize any data for a reader based on zip code/income/etc. One potential aspect of this is we could possibly show people how much these plans will impact incomes/taxes, so they can see the reality of the policies. Obviously just throwing that idea out there as an example, but yeah.

[john-osullivan]

So excited for the progress here! Can I help by creating a techforwarren repo where you can push this stuff into? Or will that only get in the way?

Please do! I'd rather have the code live here than start out in my own repository.

[shaisachs]

Awesome! Here you go... https://github.com/techforwarren/policyboard

[john-osullivan]

@shaisachs Still waiting on push permissions for policyboard & septdebates! Got some initial commits for both of them, lemme know when you get a chance to give the perms out.

[shaisachs]

I think I see the problem - you were not a member of the techforwarren organization. Every member has write access to every repo by default. I just sent you an invite - once you accept, can you now write in to the repo?

[john-osullivan]

U: Just got it! Thanks so much

U: Tried inviting a friend to a different org and it hasn't gone through yet either, will give it some time and see what happens.

Hey, I wanted to give it some time to go through, but I haven't gotten any invite yet -- was it definitely sent to @john-osullivan ? Will update this comment letting you know once I've got one! Much appreciated.

On Wed, Aug 14, 2019 at 10:01 PM Shai Sachs notifications@github.com wrote:

I think I see the problem - you were not a member of the techforwarren organization. Every member has write access to every repo by default. I just sent you an invite - once you accept, can you now write in to the repo?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/techforwarren/idea-board/issues/4?email_source=notifications&email_token=AA5E3NLGLVPEE4A6BYJGTK3QES2F3A5CNFSM4IHFX2JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4KT42Y#issuecomment-521485931, or mute the thread https://github.com/notifications/unsubscribe-auth/AA5E3NIQKDPIWECEX63QXD3QES2F3ANCNFSM4IHFX2JA .

--

John O'Sullivan MIT Class of 2015 Computer Science & CMS

[egiurleo]

Hi, all! I'm a web developer and would love to help with this project. Can I also have an invite?

I think adding interactive widgets to each of the pages (like the debt calculator) would be a huge distinguishing factor and really cement these policies in voters' minds.

[jasonkalmeida]

Hey @egiurleo! I think if you're already a member of the Tech Volunteers for Warren group, you should have permissions to push? Unless they're talking about another group, in which case I would need an invite too 😅

I really like your idea for interactive widgets on policy pages. Are there potentially standardized widgets that could be used across multiple policy issues (i.e. impact to yearly income)? Would love to ideate more on this/potentially help out as the design of the policy pages are a huge interest to me.

[shaisachs]

Hi @egiurleo - looks like you're already a member of the techforwarren organization, so you should have push/pull access to all our repos. Are you not seeing that?

[john-osullivan]

Hey @egiurleo , thanks for coming in to help out -- I'm excited to have more people on board!

I just pushed up a commit to policyboard with:

(1) some initial codegen from create-react-blog, and (2) the beginning of my research gathering for this.

She's got the raw policy texts on her Medium page, but her descriptions in TV & interviews are often really strong. So far I've gathered everything she said in Debate 2 by going through the published transcript, next is adding in that Medium content. I'm not at all tied to using create-react-blog, just trying to find a middle ground between being able to use React and having the content in an easy-to-edit format. This is my first time using it, I'm open to other suggestions if you've got something else that in mind! Right now, I think there are two big categories of next steps: tech prototyping and content gathering.

On the tech front, I like @jasonkalmeida 's suggestion of starting with a smaller subset of the full policies so that we start iterating on the design. Definitely think the interactive widgets are gonna be key, so if you've got ideas, we ought to include those policies in the initial batch! For the sake of gathering ideas in one place, make an issue with what you're thinking. In terms of what frameworks we use on top of React, I'm going to put off making a final decision until I get around to actually prototyping an interface. If anyone here has a strong preference then I can work with that, otherwise will probably just try out the structure that's already there.

On the research front, I want to gather & label as much source as possible so we've got juicy pull quotes and stuff like that. I put together a list of interviews, I'll update the research directory with a README listing which ones I've already finished gathering. Once we nail down a set of first topics to prototype the interface, then we can start grabbing that content out of the source.

[Hucxley]

@john-osullivan if it will help, we have the 32 issues she has listed on her site right now on the WarrenPlanBot repo, and we have the ability to parse all of the medium plans (and other HTML) into sets of keyphrases of varying lengths (if you wanted to create a TLDR or bullet point them), if that will help make your job easier on the data modeling side.

[john-osullivan]

Thanks for sharing the link! I'd been checking WarrenPlanBot to see when you'd start uploading y'all's source. That synonym keyphrase thing is fascinating, how's that generated?

[joegoldbeck]

Looks like the campaign made something like this happen! http://elizabethwarren.com/plans

I was about to run off and make a search backend to power things like this, so this saved me some time as well~

[danielnarey]

@john-osullivan This seems like a large project. Would like to check in on where you’re at with it and how we can help to hone it down to a MVP that we can prototype.

@joegoldbeck @shaisachs

[john-osullivan]

Hey all! Finally have a little more spare time to hop in here.

Once I saw that the campaign page had implemented the core of this idea, I decided to think through what new stuff we could add. The part of this which got me and others excited was the interactive visualizations, calculators, things like that. I'm thinking that I'm going to rescope this project to be a collection of those for different plans. The overriding goal here is, "Show, don't tell" -- maybe techforwarren.github.io/showme. From that angle, the MVP is just making one good visualization.

I'm going to rename the issue, update the original comment, and set about making a skeleton with the new goal in mind!

[danielnarey]

@john-osullivan Cool, sounds like a good direction for this project. I think a number of people would be interested in contributing to this if you can give them a place to start, or an example to emulate - that seems to be the hurdle for a lot of our project ideas!

[shaisachs]

Nice, that is awesome! Should we break ground on a new repo, or too early for that? What's a good first visualization to tackle?

[danielnarey]

@shaisachs John has maintainer status on the policyboard repo, so he can go ahead and rename the project, etc. when he is ready.

[danielnarey]

@john-osullivan Take a look at the data and charts here as a possible starting point: https://usafacts.org/reports/facts-in-focus/democratic-primary-debate-october-2019