Fec-cms: Mockup presidential map layout

[JonellaCulmer]

What we're after: We need to make available the presidential map data going back to 2008. Right now we're operating under the assumption that this information will be best if located on the Candidates Browse data page under CFD section.

Content to include:
:lock: https://docs.google.com/document/d/1KbPV_v_nxZQOhq75ogrPohM0bNmNyjiFj0fQV1Di1OI/ :lock:

Completion criteria:

• [x] Design mockups with annotations for quick front-end development work (next step)

[JonellaCulmer]

Preliminary mockups below. @PaulClark2 @patphongs

This is what the candidate browse data page will look like. Individual accordions are below.

This is the first accordion: "All presidential map candidates". This is one option. It shows each year instead of truncating them under a toggle.

This is the first accordion: "All presidential map candidates." This is the second option. All four years are truncated under a toggle.

This is the second accordion: "All Democratic presidential map candidates". This follows the truncation seen in the second option for the first accordion above.

This is the third accordion: "All Republican presidential map candidates". This follows the truncation seen in the second option for the first accordion above.

This is the fourth accordion: "Individual presidential map candidates" The display of data is dependent on the candidate and whether they ran for president multiple years.

[patphongs]

This is the fourth accordion: "Individual presidential map candidates" The display of data is dependent on the candidate and whether they ran for president multiple years.

How do they select a candidate in the 4th accordion?

[JonellaCulmer]

@patphongs It's a complete list, they would need to scroll. Are you thinking of a candidate dropdown? That seemed more time-intensive for the development to me.

[patphongs]

I see, thanks for clarifying @JonellaCulmer. Yes it would be more difficult to add the dropdown, I'll develop it as a long list at first and then see if I have time to fit in a dropdown. There's 27 candidates right now in the list, which would make the accordion very expansive. I almost want to advocate for putting this on a separate wagtail page, it would also eliminate the need to do any hotfixes when the list changes. @PaulClark2 What do you think about that as a short-term solution?

[PaulClark2]

I'm not sure the fourth accordion will work for multiple presidential cycles?

election | id | candidate
---- | ---- | ----
2008 | P00003186 | Thompson, Fred Dalton
2008 | P00003251 | Giuliani, Rudolph W
2016 | P00003392 | Clinton, Hillary Rodham
2008 | P00003392 | Clinton, Hillary Rodham
2012 | P00003608 | Cain, Herman
2020 | P00006213 | Delaney, John K.
2020 | P00006486 | Yang, Andrew
2020 | P00008763 | Ojeda, Richard Neece II
2020 | P00009092 | Castro, Julián
2020 | P00009183 | Gabbard, Tulsi
2020 | P00009290 | Gillibrand, Kirsten
2020 | P00009423 | Harris, Kamala D.
2020 | P00009621 | Warren, Elizabeth
2020 | P00009795 | Booker, Cory A.
2020 | P00009910 | Williamson, Marianne
2020 | P00010298 | Buttigieg, Pete
2020 | P00010454 | Inslee, Jay R
2020 | P00010520 | Hickenlooper, John W.
2020 | P00010793 | O’Rourke, Robert Beto
2020 | P00011239 | Weld, William Floyd (Bill)
2020 | P00011254 | Gravel, Maurice Robert
2020 | P00011312 | Swalwell, Eric Michael
2020 | P00011338 | Ryan, Timothy J.
2020 | P00011833 | Bennet, Michael F.
2020 | P00011866 | Moulton, Seth
2020 | P00011999 | Bullock, Steve
2020 | P00012054 | de Blasio, Bill
2020 | P00012567 | Sestak, Joseph A. Jr.
2020 | P00012716 | Steyer, Tom
2020 | P00013276 | Walsh, Joe
2012 | P20002523 | Roemer, Charles E. 'Buddy' III
2012 | P20002556 | Pawlenty, Timothy
2016 | P20002671 | Johnson, Gary
2012 | P20002671 | Johnson, Gary Earl
2016 | P20002721 | Santorum, Richard J.
2012 | P20002721 | Santorum, Rick
2012 | P20002978 | Bachmann, Michele
2012 | P20003067 | Huntsman, Jon
2012 | P20003109 | McCotter, Thaddeus G
2016 | P20003281 | Perry, James R. (Rick)
2012 | P20003281 | Perry, Rick
2016 | P20003984 | Stein, Jill
2012 | P20003984 | Stein, Jill
2008 | P40002347 | Edwards, John
2008 | P40002545 | Kucinich, Dennis J
2016 | P40003576 | Paul, Rand
2012 | P60003654 | Gingrich, Newt
2016 | P60003670 | Kasich, John R.
2008 | P60003795 | Thompson, Tommy G
2008 | P60004751 | Gravel, Mike
2016 | P60005915 | Carson, Benjamin S.
2016 | P60006046 | Walker, Scott
2016 | P60006111 | Cruz, Rafael Edward 'Ted'
2016 | P60006723 | Rubio, Marco
2020 | P60007168 | Sanders, Bernard
2016 | P60007168 | Sanders, Bernard
2016 | P60007242 | Fiorina, Carly
2016 | P60007572 | Pataki, George E.
2016 | P60007671 | O'Malley, Martin Joseph
2016 | P60007697 | Graham, Lindsey O.
2016 | P60008059 | Bush, Jeb
2016 | P60008398 | Jindal, Bobby
2016 | P60008521 | Christie, Christopher J.
2016 | P60008885 | Webb, James Henry Jr.
2016 | P60009685 | Lessig, Lawrence
2016 | P60022654 | McMullin, Evan
2020 | P80000722 | Biden, Joseph R Jr
2008 | P80000722 | Biden, Joseph R Jr
2012 | P80000748 | Paul, Ron
2008 | P80000748 | Paul, Ron
2020 | P80001571 | Trump, Donald J.
2016 | P80001571 | Trump, Donald J.
2008 | P80002801 | McCain, John S
2008 | P80002983 | Cox, John H
2008 | P80003288 | Brownback, Samuel Dale
2012 | P80003338 | Obama, Barack
2008 | P80003338 | Obama, Barack
2012 | P80003353 | Romney, Mitt
2008 | P80003353 | Romney, Mitt
2016 | P80003379 | Gilmore, James S III
2008 | P80003379 | Gilmore, James S III
2008 | P80003387 | Dodd, Christopher J
2008 | P80003395 | Hunter, Duncan
2008 | P80003411 | Richardson, Bill
2008 | P80003429 | Tancredo, Thomas Gerald
2016 | P80003478 | Huckabee, Mike
2008 | P80003478 | Huckabee, Mike
2020 | P80006117 | Klobuchar, Amy J.

[patphongs]

I didn't even think about multiple cycles, ok thanks @PaulClark2, let me see how creative we can get there. I know that @JonellaCulmer has toggles built in for different cycles. But the list is still very long.

[PaulClark2]

Can the election cycle toggle be above the accordions and then once an election year is selected the right information is displayed in the accordions? This is probably ugly but could be a first pass, we have four sets of accordions for the four elections we want to display.

[johnnyporkchops]

The interaction between toggles an accordions may get visually confusing for users regardless of whether they are inside or outside the accordions. Maybe simply anchoring to a section inside an accordion would work, rather than switching out content like a typical tabbed -panel. My two-cents

[JonellaCulmer]

@PaulClark2 I think a toggle at the top, dictating what's in the accordions, is an interaction we have not introduced anywhere else on the site. Also, that kind of interaction would likely be more time-consuming from a development perspective. I would say that for the fourth accordion we could introduce a toggle within the accordion, but that still presents us with the same time-intensive work. As currently designed, it's more static and would likely be developed more quickly.

We can certainly iterate after the Wednesday deploy.
cc: @patphongs @johnnyporkchops

[patphongs]

@JonellaCulmer Should the candidate names be in all caps? I think that's normally how we list it in our data, I can't find an instance that we don't all caps it.

[PaulClark2]

@patphongs @JonellaCulmer on the map they were not in all caps. However, I'll defer to Jonella about this since this list will live on FEC.gov.

[patphongs]

Thanks @PaulClark2, another question, how is the list of candidates derived each presidential election year?

[PaulClark2]

Hi, @patphongs we use this formula: 17(a)(iii)-28(a) + 17(b)-28(b) + 17(c)-28(c) + 18 + 21. The line numbers are from the detailed summary pages of Form 3P. It's a manual process. After Jerry loads the presidential data into the presidential map tables. I look at the data summary data and make decisions. There is a flag, active in the main presidential link table that I can to Y (yes) or N (no). This determines what candidates are displayed on the map and what download files get generated.

From the presidential help page:

Formula to include candidates on the map
The numbers below (e.g. 17(a)(iii)) represent the line numbers from the detailed summary pages of Form 3P.

17(a)(iii)-28(a) + 17(b)-28(b) + 17(c)-28(c) + 18 + 21

Link to help page: https://www.fec.gov/campaign-finance-data/presidential-map-help/

[JonellaCulmer]

@patphongs Yes, all caps. Thanks for catching that!

@PaulClark2 How do you feel about the intro text in each section? There are _very_ slight differences, such as specifying Democratic and Republican based on the accordion. Do you think that should be in each accordion, or called out above it. I think we should introduce that section somewhat on the Candidates Browse data page.

[JonellaCulmer]

Closing in favor of implementation issue: https://github.com/fecgov/fec-cms/issues/3486