bocoup / coral-ask-election-2016

Bocoup

Coral Ask Election Reactions

A prototype application to visualize reactions to the outcome of the 2016 election.

Click here to see a version of it running at Philly.com

Click here for the user guide and how to manage submissions

If you have any questions or would like help installing, please contact [email protected]

Installation

This application depends on an AWS installation of Ask with S3 support. Please read the documentation for installing and configuring Ask at https://docs.coralproject.net/products/ask/.

1. Follow the instructions at data/README.md to import the interactive form into your Ask installation.

2. Clone this repository to your local machine

    git clone https://github.com/bocoup/coral-ask-election-2016.git
   

3. Copy the file config.sample.json in the project root to /public/config.json, then set the values of each key to match your deployment.

{
  "jsonURI": "https://s3-us-west-2.amazonaws.com/bucket-name/",
   "formId": "5816b369d489c974e0cc8be8",
   "formScript": "https://s3-us-west-2.amazonaws.com/bucket-name/5818fffcba6bce0001ba8ab8.js",
   "googleSheetId": "18yAMk_ydGpPLHTZPrLox7oplvgc-4aswu1arO_IHY9I",
}

Configuration Guide

jsonURI:

This field holds the URI at which the JSON files output by Ask can be located over HTTP. This should be a relative path from the app root to the location where the Ask JSON exports are available, such as ./data.

formId:

If you have a local instance of Coral Ask running at, say, localhost:2020, when you're editing the form you wish to use to drive this visualization you will be at a URL similar to this:

http://localhost:2020/forms/5816b369d489c974e0cc8be8

"5816b369d489c974e0cc8be8" is your formId. This ID is combined with the jsonURI to locate the JSON data files that will be loaded.

formScript:

This is the URL to the JS file that Ask provides to embed the script without using an iframe. (An iframe cannot be used here because it does not provide any flexibility around style and display, and does not communciate the height of the form.) To get the URL of this script, in the Ask form editor go to "Publish Options," then select "Without iframe" in Embed Options and copy the src attribute of the script tag from the embed code:

This src attribute should be pasted into config.json as the formScript value. Don't worry about the <div id="ask-form"></div>, this app creates that for you.

googleSheetId:

Editorial text fields in this visualization and the non-user-editable text of the "letter to the president" that is assembled from the responses is managed through Google Sheets: create a publicly-visible spreadsheet document by duplicating this sheet. Once your sheet is set up, copy the ID out of the spreadsheet URL; for the URL

https://docs.google.com/spreadsheets/d/18yAMk_ydGpPLHTZPrLox7oplvgc-4aswu1arO_IHY9I/edit#gid=904229865

"18yAMk_ydGpPLHTZPrLox7oplvgc-4aswu1arO_IHY9I" is your googleSheetId.

s3Bucket:

This is necessary if you would like to use npm run deploy to deploy the built project to an s3 bucket.

The deploy script uses the aws command line tool (link here) to push to s3.

Development

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

npm test

Runs the unit tests.

Data

The data used by this application is not included in this repo, but is expected to be placed in public/data/data.json.

How to change the form/manage submissions

Click here to go to the user guide

Questions? Problems?

Please submit an issue to this repo and/or contact [email protected]

Attribution

This project makes use of:

• Twemoji
  Copyright 2016 Twitter, Inc and other contributors
  Code licensed under the MIT License
  Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/

coral-ask-election-2016's Issues

Make selected emoji in bubble chart more obvious

Consider how to reliably match questions to letter format

As we think about the letter format,

Dear [Secretary Clinton/Mr. Trump],

As you prepare to become president I'm feeling [emoji from 1]. I think your top priority should be [list item from 2]. If you achieve one thing in the next four years, I want it to be: [short answer from 3].

Thank you and good luck.

[name from 4], [location from 5]

I think we may need to talk about what we have to assume about how "locked-down" our form is, or else find some way next week to embed this editorial text into the ask form back-end; because I can infer data charts from the data regardless of question order, but I can't compose a letter with fixed interstitial text if they re-order or change the questions

something to think about

Letter contents should be config/sheet-driven

Define JSON schema

This issue can serve as a place where @jde & I can toss JSON snippets back and forth to hammer out a good export format

Clicking on bubble chart emoji sometimes pulls the wrong letter

Topic is not bolded in letters

International should be bolded.

Scaffold React app

We need a base react scaffold w/ a build process, hot reloading, linting, the usual. Should we just use create-react-app?

Update all paths to use the base path from config

My suggestion to use relative paths wasn't sound. This works when hitting the index file directly on the S3 bucket. When embedding, however, relative paths resolve to the embedded site, not the bucket.

We will be putting the build into a folder called 'coral-ask-election-2016' inside the same place the json files are installed.

Update all paths to use the following base path:

jsonURI + "coral-ask-election-2016/"

Form UI issues - icons too big, form jumps around

Steps to reproduce:

1. Go here: https://s3-us-west-2.amazonaws.com/ask-stg/build/index.html
2. Click "Tell the..." to see the form
3. Icons are oversized
4. Entering information into the form causes page and form fields to jump around (try hitting the American Flag, and entering your Name or Location)

Extract CSS into separate file on build

Move all "look-and-feel" styles to a top-level .css file

This css file should be loaded directly from the index.html. Only structural styling should be embedded in the React components.

Order Filter by Topic issues by % of responses

Request from The Washington Post graphics team:

On the Filter by Topic section, Please order the topics by percentage of responses, with the top vote-getter at the top of the list and the lowest vote-getter at the bottom of the list.

Reason: it'll make the results more easy for users to compare.

Emoji Letter "flashes" when loading data

We should either put in a loading spinner or only replace the data when it comes back. It should be fast, but...

Choosing a topic that doesn't have entries will result in an error

Click on crime

Because of this action.js

function shouldFetchResponses(state, answerId) {
  var _state$responses = state.responses;
  var collections = _state$responses.collections;
  var isFetching = _state$responses.isFetching;

  return !collections[answerId].length && !isFetching[answerId];
}

There is no collections[answerId] entry

Move show more letters button on the emoji bar chart to the top so you can more easily page through them

Fix layout and click-blocking of percentage labels on bubble chart

The span tags overlap the other images; I can scale down the emoji to make them fit in the circle, but I'm investigating z-index and other tricks to ensure that the emoji themselves are the forefront clickable element.

Percentage label alignment is way off in IE, exacerbating the above problem:

Built files use absolute paths making hosting anywhere but the root impossible

All links in the build are absolute to the root of the server like so:

<script type="text/javascript" src="/static/js/main.6a0b6e5e.js"></script>

We need to be able to host the files in a subfolder. Please update all paths to be relative.

Emoji bubble chart is not aligned

Need editorial text options

• Between form and bubble chart
• Between bubble chart & bar chart
• At bottom of page

Resolve issue with emoji bubble chart animation

Chrome desktop:

And on iPhone:

Provisional approach: Check for a hasRendered state property (per item key?) in React, set this in componentDidUpdate after rendering DOM elements the first time. If this prop is present, don't render the margin from React, so that D3 and CSS behave predictably.

TODO: Get help w/ CSS transitions so that we can have each emoji:

1. POP in nicely
2. Zoom quickly on mouseover
3. Go back to normal on mouseout

Webpack warning on Tabletop library

Including tabletop triggers this warning:

Warning in ./~/tabletop/src/tabletop.js
Critical dependencies:
7:18-43 the request of a dependency is an expression
 @ ./~/tabletop/src/tabletop.js 7:18-43

Background on that error: webpack/webpack#196

Going to revisit this after app is fully working to determine if build needs to be somehow optimized, that thread makes it sound like we may be bundling code unnecessarily due to this issue.

Javascript error blocks dataviz rendering (staging)

When the form loads, a javascript error is thrown reading the data packet:

selectors.js:115Uncaught (in promise) TypeError: Cannot read property 'count' of undefined(…)

This bug is visible here:
https://s3-us-west-2.amazonaws.com/ask-stg/build/index.html

Datafile:
https://s3-us-west-2.amazonaws.com/ask-stg/form-5818fffcba6bce0001ba8ab8-aggregation-digest.json

Update sample data to have right emoji & issues list

😍😀😐😟😡😳😞🤔 🇺🇸

Cybersecurity, the economy, trade, education, energy and the environment, health care, crime, defense and national security, immigration, foreign policy, social issues

Need to be able to remove button if the submission period is closed

Generic id may cause integration edge case issues

The script embed locks onto a div with id main:

<div id="root"></div><script type="text/javascript" src="./static/js/main.76efbf97.js"></script>

Many sites will have an element id="root". If so, it is likely that this interactive will take over the page in an unexpected way.

Broken styles in IE10

For some reason the emoji image tags are being given a width and height in IE10,

presumably derived from the "natural" 150px height of the linked SVG image.

Additionally, the buttons are no longer receiving their proper styling because display: table-header-group opts the <button> out of more display rules in IE10 than in newer browsers. Wrapping the button in a div and setting that display rule on the div instead of the button will resolve the issue.

Auto emojify google spreadsheet responses

Disable next letter button if there aren't any more

selected emoji button be darker

Font color changes - but background color does not.

Deployment Questions

• Do we create a custom build for each site, with configuration options built in to the bundle; or do we have an editable side-car file like config.json which can be edited on a per-site basis, and deploy the same bundle to all sites which will consume that for config?
• What is the latency on loading editorial text from google docs? What is the overhead on using a script to take that sheet and save it out as a code file to be hosted on S3, to reduce latency? Is that something that is within the capabilities and purview of a newsroom?
  • is there an opportunity to add content-editable areas within Coral, instead, that could be used to enter that data, and then surface that through a separate export feed?

Content needed for the interactive:

• title for interactive
• intro text
• address of coral installation/form embed (if not embedded separately)

Form re-renders emojis

Currently we have:

    // also re-emojify on click
    allLabels.on('click', () => {
      // re-emojify all nodes
      allLabels.nodes().forEach((node) => {
        twemoji.parse(node, icon => emojiSVGUrl(icon));
      });
    });

This only listens for clicking the emojis. but it looks like the form re-renders every time something changes in the form.... so maybe onChange in the form elements in the fix in EmbeddedAskForm

Emoji bar chart flashes when changing selected topic

emoji barchart doesn't have select feedback

selected emoji is not distinguishable from not selected one.
should use similar 'selected' color as other parts of page.

Fix rendering of filtered Emoji Bar Charts

The data that's being passed into the component doesn't match what is being shown

Externalize config file

Can't be part of build, needs to be sidecar JSON

Profile rendering performance and optimize selectors as needed

We should test each component and make sure we're only re-rendering when we need to; this should help with things like #44

Order of styles in generated CSS is unintuitive

While working on #118 @pbeshai & I noticed that the generic styles, such as h1, .btn etcetera, are rendered at the bottom of the CSS file; this means they actually override the more-specific styles like .form-toggle-button higher up in the document. This is unintuitive, because it means an integrator would have to not only change the definition of .form-toggle-button, but also re-order that rule to the end of overrides.css should they wish to alter the appearance of their document (as the two classes have the same CSS precedence, so the latter one wins).

I am investigating how we can change the order of our imports so that the generic styles end up going first.

Clicking a topic bar chart should page response letters

Make text for the letter and the issue labels in the data viz editable

Text with corrected spelling and capitalization is available in the Google spreadsheet here: https://docs.google.com/spreadsheets/d/18yAMk_ydGpPLHTZPrLox7oplvgc-4aswu1arO_IHY9I/edit#gid=904229865

emoji switches from one style to another in bottom letter when selecting an emoji from bars

Can we reliably render a pack layout with emoji?

After submitting form, "Don't submit" button still showing

Remove gray bars on top of emoji graph in topics data viz section

Request from Washington Post Graphics team:

The gray bars on top of the emoji graph in the topic section aren't large enough to show differences in size. The percentages below are effective enough. Can the gray bars be removed?

Emoji Rendering PoC

• Can we render emoji in plain text on different platforms/devices (Android, iOS, FireFox, etc)
• Can we render emoji in <text> elements in SVG, and size them arbitrarily?

Once we have a form sample,

• Can the form actually be used to pose a question w/ emoji responses?

Embed form in vis

• Drive rendering of bubble chart from React
• Use <button> elements for bubble chart containers
• Make API configurable
• Get data rendering from Google Sheets
• Get letter rendering below bubble chart, filtered by bubble chart
• Connect emoji graph to topic bar chart filters
• Get letter rendering below topipc bar chart, filtered by bar charts
• Embed form
• Make form collapsible