Line Chart interaction bug

[jwchumley]

What we're after: Update the raising/spending charts, currently on the CFD landing page, to that data is presented accurately and users can quickly and easily identify valuable information .

The line chart (currently disabled) on the Campaign finance data landing page shows the totals raised and spent by entity type. Both the data (now fixed: fecgov/openFEC#3240) and the front-end interaction need to be fixed in order to accurately provide these totals. This issue handles the front-end interaction problems.

The line charts (one for spending, one for raising) have an issue with the mouse logic, which does not "point" to the intended target. (Ex. Hovering over May 2018, looks like June 2018). Additionally, the dashed-line marker appears as though it's on June instead of May. That is because the last day of the month is used (ex. 07/31/2018) and so the marker (dashed line) looks as though it's on the following month (08/01/2018), but it's actually very very very close to the next month. Still, that's not how it appears to onlookers, it appears as the thought the chart is inaccurate. See number 2 below.

The line charts can be found on feature, while they are disabled on production: https://fec-feature-cms.app.cloud.gov/data/

Completion criteria:

• Improve mouse logic (movecursor function in js file)
• Aggregate data by month/year, instead of month/day/year
• If unable to correct, propose alternative fix.
• Possible solutions:
  • Replacing chart with one that can be more readily manipulated than one that is outside the current team skillset
  • Remove movecursor interaction (has usability implications) and leave only click-through

Great background information at #1983

[AmyKort]

@JonellaCulmer Could you check out the level of effort to fix this interaction? Is it going to be super tricky to get what we want?

[JonellaCulmer]

Scheduled a discussion with Andrew to attempt to discover the underlying issue and possibly determine the level of difficulty in advance of grooming.

[apburnes]

Key Factors to Investigate:

• Simplify results dates to month/year and not day/month/year to better chart datasets resolution
• Investigate the mouse over method so it accurately orients itself within chart
• As charting features are added, switching from d3js to a charting library built on top of d3js maybe more beneficial in maintenance and feature expansion

[JonellaCulmer]

As part of this ticket, I'm also curious if we can make the Y axis dynamic and update based on the figures on the table. At the beginning of a cycle, we should probably start at a smaller increment and increase it over time to accommodate the changing figures. That will help alleviate some of the trouble reading figures that appear as zero's at the beginning of the cycle.