Light

nathanzlion / hacks-datavis Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 0.0 459 KB

Home Page: https://hacks-datavis.vercel.app

JavaScript 5.98% HTML 0.32% CSS 1.99% TypeScript 91.71%

hacks-datavis's Introduction

Hacks Datavis website

This a website to get a real-time data about A2SV AI for Impact Hackathon (hackathon.a2sv.org). Deployment can be found at hacks-datavis.vercel.app

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

hacks-datavis's People

Contributors

Stargazers

Watchers

hacks-datavis's Issues

Hard reload messes up timeline data

How to reproduce

First Filter the data with the date range

As you can see you can view the correct data.

Then you could either reload with the refresh button for the timeseries only or the refresh on the top of the page, then you'll see that the data becomes messed up.

Use better chart library

Checkout https://flowbite.com/ or other libraries for that matter to make the visuals better.

Add population based map for seeing per population registration

Theme Change should be toggle

The current way of changing theme is not necessary. Make the theme change with just a single click.

Reload Button Doesn't Look Like a Reload Button

A typical Reload Icon would be like this ↻ .

Change Ugly Table View to Chart

The table data of previous Hackathon participations could better be seen if we represent the data as a Barchart.

Frontend Should Have Pagination to timseries data

Prevent Geocoding Api Call

The Map View library is making requests to google Api For Geocoding, and this is creating a nasty console error message whenever the app reloads. You can see the error in the image below

Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

Frequent Clicks on Reload will fire a continuous reload

There is no mechanism to disable clicking the reload button 100 times! 1000 times! from the front end side, resulting in the execution of the fetch that many times. To avoid this type of 'DDOS 😄 Attacks', the typical thing to do is to rate limit from the backend side since the user can send the requests directly via api calls (say using things like postman...). But from the front end side let's cache things and limit the rate of reload. Plus avoid firing a reload event if it's already reloading. Now it just reloads one after the other continuously.

Add Vercel Web Analytics

https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app

Make Readme Descriptive

Add a descriptive readme for the purpose of the website.

Mention the purpose
Mention the hackathon
Contribution guideline
How to add Issue (Feature request and things like that)
How to run the project

Add View to see new registrations by day

We need a way to see how many new registrations we had the other day.
Also maybe a view of the registration over the week, to see the peak points.

Eswatini is listed in unrepresented countries, although there are participants from there.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.