search

hackforla / lucky-parking

Visualization of parking data to assist in understanding of the effects of parking policies on a neighborhood by neighborhood basis in the City of Los Angeles
https://www.hackforla.org/projects/lucky-parking.html
34 stars 59 forks source link

[Frontend] Build graph component #614

Closed glenflorendo closed 3 months ago

glenflorendo commented 5 months ago

User Story

As a user, I want the parking citation data to be presented with visualizations, so that I can clearly and effectively view and analyze the dataset.

Description

We need to make components that will allow us to display our dataset with data visualizations.

For this ticket, the owner will partly conduct a technical spike to compare the different visualization libraries we can use.

Nivo: https://nivo.rocks Recharts: https://recharts.org/en-US Victory: https://formidable.com/open-source/victory/

The owner will use the above (or any other library) to build a horizontal bar chart.

This component will be the foundation for other graphs. It should be easy-to-use and flexible to achieve our design.

It should be able to take in data as props. Please see the API specification document for more information.

Acceptance Criteria

Design References

Technical References

Additional Information

No response

bennyv8 commented 5 months ago

Data Visualization Library

See google slides for more details and examples

When weighing the libraries, I primarily focused on ease of use and flexibility. Additionally, I assumed data sets to be at worst in the low tens of thousands and that each different kind of graph (line graph/bar graph) will be its own re-usable component.

Nivo

Pros

  1. Strong User Guide (detailed explanation with example chart and code)
  2. Highly Customizable (numerous props in components for styling)
  3. Offers support for Canvas graphs (more performant that SVG graphs for large data sets)
  4. Actively Maintained w/ built in types (compatible with typescript)
  5. Offers server-sider rendering

Cons

  1. Steeper learning curve compared to the others (high level as all customizations are props contained in a single component)
  2. Overkill (contains features that may not be necessary for the scope of this ticket; moot bc features are also modularized in packages)

Recharts

Pros

  1. Strong User Guide (detailed explanation with example chart and code)
  2. Straightforward and easiest to use out of box (syntax is akin to regular javascript, html, css and default looks similar to figma designs)

Cons

  1. Minimally actively maintained (as of today, 500 issues with 14 prs)
  2. Requires @types/Recharts packages

Victory

Pros

  1. Strong User Guide (detailed explanation with example chart and code)
  2. Actively maintained w/ built in types (Formidable is a reputable engineering consultancy)
  3. Provides mobile support with react native (moot point)

Cons

  1. Not as customizable (styling is opinionated though overridable)
  2. Out of the box design (default look doesn't align with Figma designs)

Overall

All 3 libraries satisfy the criteria of "easy-to-use" and "flexible" with strong user guides and are highly customizable. However, I would give the upper hand to Nivo due to its ability to better handle large data sets. Nivo offers canvas graphs which are more performant than SVG grpahs as they minimize depth of nodes on the DOM. (potentially a moot point depending on how we parse our payload). Additionally, Nivo is more actively maintained than Recharts and and offers a more active support community. Ultimately, I think Nivo would be safest option between the 3.

glenflorendo commented 5 months ago

@bennyv8 Excellent research and presentation! 💯 As mentioned, let's go forward with your recommendation with Nivo. Looking forward to see your implementation!