police-brutality-2020 / visualizer Goto Github PK
View Code? Open in Web Editor NEWA heatmap that visualizes acts of violence against peaceful protestors in the USA.
Home Page: https://brutalityvisualizer.app
A heatmap that visualizes acts of violence against peaceful protestors in the USA.
Home Page: https://brutalityvisualizer.app
Roboto or something nice.
Showing icons for incident links in the search results provides a better overview of the available data.
div
list in the SearchResult
componentparseUrl(...)
hookThe keyboard navigation isn't working as expected.
After pressing tab
, the page focus on the search field. The user clicks enter
and then the app starts fetching the articles. The first article is focused after pressing tab
, but if the user presses it again, the app just opens the article up, which is not the correct behavior. I think this issue is better explained with a visual demonstration, so here's a short GIF I made showing what's happening right now.
This is happening because each result has an onKeyDown listener, which also captures the tab key.
After the results are fetched and rendered, the user should be able to navigate through them by clicking tab
or the arrow down key. If the user wants to open an article, he then would click enter
. You can find more information about keyboard accessibility here.
Share this code with the Video component, too.
Currently, our color codes are scattered throughout component .css
files, and there are quite a few identical ones in different components.
Create a single file consisting of light- and dark-mode colors defined as CSS variables. These should use the naming scheme from the Material Design color system, like colorPrimary
, colorSecondary
, colorSurface
, etc.
This will allow future components to use a consistent set of colors and improve maintainability if a color needs to be tweaked.
Switch from heatmap-view to pin-view when searching. Ideally, mark each pin with its result number and show a corresponding number next to each result in the list.
Steps to Reproduce:
Expected Behaviour:
Search results for the city reappear.
Actual Behaviour:
Nothing happens.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
panTo
goes to wrong coordinateExpected behavior
Pan to Minneapolis
Screenshots
https://www.loom.com/share/2986c3b41d2646679c6fb11054f2625e
Desktop (please complete the following information):
Update in-browser URLs, implement routing, handle back button presses (on Android).
I personally would love a zip-code feature with an added radius option to show incidences that may be within, say, 30 miles of your front door. This would be especially helpful with municipalities within larger cities (i.e. Culver City, Los Angeles, CA)
Autocomplete (or automatic suggestions) improve discoverability of key search terms and help users avoid common misspellings.
incidents
throughout the component treeFuse.js
-related code from the Sidebar
component into a separate hookOmnibox
componentCurrently, clicking on the map causes it to pan/zoom to the nearest city and populate the Omnibox with its name. However, directly searching for a city/state does not have the same pan/zoom behaviour. This issue should address that asymmetry.
Omnibox
and Map
componentsmapValue
state in App
in favor of the new contextA declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.