Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add widget to consume BCN's timeline #34

Open
emibcn opened this issue Oct 22, 2020 · 0 comments
Open

Add widget to consume BCN's timeline #34

emibcn opened this issue Oct 22, 2020 · 0 comments
Labels
design Similar to UI/UX enhancement New feature or request javascript Javascript knowledge needed material/ui Related to Material/UI dependency react React knowledge needed scraping Related to data sources, which are scraped to https://github.com/emibcn/covid-data ui/ux Issues related to design/UI/UX

Comments

@emibcn
Copy link
Owner

emibcn commented Oct 22, 2020

The idea is to add a widget:

  • This is a Timeline data, which could match with a Timeline visualization like these ones, or some other (like Twitter/Facebook?). The original one is at Seguiment Covid19 BCN, section Cronograma/Timeline.
  • Use react-window or similar to prevent mounting too much components
  • Configurable tag list selector:
    • The tags may need to be manually/auto-post-processed grouped/structured (some are redundant, some may be included into others). Or look for another solution, like searching user inputs (including spaces) into each tag string.
    • The user may select multiple tags in a single widget
    • The widget shows a list of the messages matching the selected tags
    • Editable (saved) Positive/negative text filter? (in addition to tags selection/filter)
  • Show some fast controls to the user, like:
    • Auto-scrolling on/off on date change
    • Zoom?
    • Positive/negative text filter?
  • The widget will change depending on the currently selected date:
    • Center the visualization into the first message of the day
    • Animated scroll up/down on date change (controllable)

Data shape

BCN Timeline is a JSON containing an array similar to this:

[
  {
    date: "YYYY-MM-DD",
    title: "Some short text",
    tag: "Some non-cleaned up tag system",
  },
  ...
]

This data is scraped at Covid Data - BCN. There, some data post-processing may be added. For example, an index of {date: [matching messages]}, or some tags/grouping/fixing.

Original visualization

image

Data loading

It is loaded with the backend manager:

const cancelUpdates = this.BcnData.data('timeline', onLoadCallback);

Similar to BCN charts.

Some tags examples

  • OMS declaracions emergència
  • Internacional actuacions
  • Govern d'Espanya Actuacions
  • Primer cas a Espanya
  • Cancel·lacions esdeveniments
  • Primera mesura de confinament massiu
  • Concentracions massives als carrers
  • Espanya actuacions
    -...
@emibcn emibcn added enhancement New feature or request react React knowledge needed javascript Javascript knowledge needed ui/ux Issues related to design/UI/UX design Similar to UI/UX material/ui Related to Material/UI dependency scraping Related to data sources, which are scraped to https://github.com/emibcn/covid-data labels Oct 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Similar to UI/UX enhancement New feature or request javascript Javascript knowledge needed material/ui Related to Material/UI dependency react React knowledge needed scraping Related to data sources, which are scraped to https://github.com/emibcn/covid-data ui/ux Issues related to design/UI/UX
Projects
None yet
Development

No branches or pull requests

1 participant