hackoregon / component-library Goto Github PK
View Code? Open in Web Editor NEWOfficial component library and storybook for Hack Oregon
Home Page: https://hackoregon.github.io/component-library
Official component library and storybook for Hack Oregon
Home Page: https://hackoregon.github.io/component-library
The Leaflet map component tooltip (#33) will require a composed component with the existing Pie/Donut Visualization plus a legend.
We can look to the existing BarChart component for an example of a simple legend via Recharts.
Recharts Legend General Component API: http://recharts.org/#/en-US/api/Legend
The housing team needs a component that takes geojson and renders a leaflet map.
We'll be building this, but I wanted to make an issue first to make sure we aren't duplicating effort across teams!
Ultimately it will fit into a page that looks like this:
So you can expect it to require geojson and provide hover and click events for points and regions.
Based on discussion with @dsdemaria, we want to create generic, styled select component using react-select
Chart displays monetary value - size of circles relative to other values. When circle is clicked monetary value is displayed to the left of the chart with a text description.
see (https://bl.ocks.org/mbostock/07ec62d9957a29a30e71cad962ff2efd)
and (http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0) as examples
Looking into how to visualize this - a dot matrix chart with custom icons
dot matrix visualization example (https://arpitnarechania.github.io/d3-dotmatrix/)
Next generation of issue #33, renamed to better fit the component description.
Need an info panel to display neighborhood data when a neighborhood is clicked on the leaflet map.
Prototype for reference is here - https://projects.invisionapp.com/d/main#/console/9943843/212434100/preview
Transitions are limited over at InVision, but as long as that's editable via css, should be good.
try and fetch leaflet data from backend and wrap in a higher order react component (provider)
The underline sticks out to the left of the text. Should be aligned to under it.
copied from Pete's issue
To use these components in project repos, the plan is to require this as an npm dependency, yes?
If so, the package name will have to change and it will need to be published. Housing front-end is ready to put their site together. In the interim, we can use some npm link
shenanigans, but we'll want to get this public soon.
Part of the map component (issue #2 ) requires a tooltip that opens when clicking a neighborhood. Expect that the tooltip contents will be unique depending on the project.
Prototype reference: https://invis.io/T99ULMFYA
Platform Hero:
A vanilla Hero section for the Platform home page. Accepts html content. Markup should only include .Hero div for maximum flexibility in content.
Collection Hero:
Hero section for a Collection page. Markup should include .Hero .Container .Content divs for normalization.
Card Hero
Hero section for a Collection page. Markup should include .Hero .Container .Content divs for normalization.
The budget team MVP includes an interactive Sankey diagram (or similar), for visualizing time series data:
Featured Card: Delta sankey diagram (or similar visualization)
Function: Represent the City of Portland’s budget data over a period of 10 years (data permitting), so users can quickly understand basic facts about the budget (service areas, general spending, changes over time)
Components:
Visualization of budget data over time (e.g. a sankey diagram)
Ability to manipulate a slider through the diagram, so they can land on each year. A pop-up box (or similar) will appear when users stop the slider on a particular year. The pop-up box will show budget data for that year, specifically total dollar amount and percent of total budget for each service area.
Some contextualizing text about the diagram (to be written later)
A 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.