seattleflu / genomic-incidence-tracker Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://genomic-incidence-tracker.herokuapp.com
License: GNU Affero General Public License v3.0
Home Page: https://genomic-incidence-tracker.herokuapp.com
License: GNU Affero General Public License v3.0
The options discussed so far include using S3 signed URLs or having the heroku instance access the database.
Currently the viz uses 2 (committed) modelling CSVs from the simulated data repo. As such, it only works for H3N2 or H1N1 with geo resolution set to neighborhood. This must be replaced with a call to the actual server API.
Note that the API implemented between the client and the server is roughly along the lines of what was discussed in slack, but is overly simplified and incomplete.
Pie charts are to be used to implement categorical variables on the map, with area used to represent the number of cases in the deme. @trvrb do you want this to replace chloropleths, as currently implemented, as well?
@jameshadfield This is an idea I had (we don't really have to implement it), but when we have a lot of regions (e.g. CRAs, Census Tracts) then the bars and labels get very compressed and hard to read. Instead, we could implement a d3.scaleBand()
just like in the Observable sketch and set the content of the container div to scroll vertically.
If you run this branch you'll see the idea https://github.com/seattleflu/genomic-incidence-tracker/tree/expandable-container (I created this a couple of days ago so it's already behind the master branch)
Currently the data selectors provide transformed data directly to the chart components. When faceting this has the unfortunate side effect that each chart has a different scale, which is confusing. The easiest way out of this is hoisting the data selector calls (and modifying the selectors) and then passing the relevant data to each chart as props. This would allow a consistent scale to be provided, and facilitate potential UI improvements such as only displaying one scale / legend for multiple charts.
UPDATE:
Integrating the modeling results into the data flow makes the makeSelectDataForChart
selector even more complex and may want to be looked at during this issue.
There are a number of points which have been raised recently about how the modeling data should be presented. They include:
Currently we hardcode the chart dimensions and use an overly simple watcher for window resizes. I've not used react-ruler react-measure
but have heard good things about it and it seems appropriate here.
@jameshadfield I noticed you wanted to override some styles of the reactSelect. I went ahead and started that process, but how exactly do we want it to look?
I removed that divider between the placeholder and the arrow to make it look more like Auspice. However, to have a triangle instead of a caret we'd have to replace that svg element (which is totally doable, but I'm not sure if that's what we want).
Relevant code is in src/components/sidebar/select.js
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.