unhcr / dataviz-streamgraph-explorer Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://unhcr.github.io/dataviz-streamgraph-explorer/#types=1-2-3-4-5-6-7
License: BSD 3-Clause "New" or "Revised" License
Home Page: https://unhcr.github.io/dataviz-streamgraph-explorer/#types=1-2-3-4-5-6-7
License: BSD 3-Clause "New" or "Revised" License
The red areas here need to be added as SVG elements:
These SVG elements should change in size to respect the Semantic UI grid layout. I'm not sure exactly what kind of resize behavior we want. Perhaps for Desktop the SVG elements should reach exactly to the bottom of the display, and for mobile they should be a fixed aspect ratio and fill in the available width.
As mentioned by @vidonne , this is part of the recommendataions for print, but doesn't quite fit in with the Web version. Perhaps this part can be removed.
Currently, no selected src or dest leads to the field still being present in the URL, for example the default view http://localhost:8080/#dest&src&types=0-1-2-3-4-5-6
.
How do you best want to handle the mobile vs desktop logic in the code? In previous projects, I have used a function to detect mobile and then set a variable isMobile, which can be used as a conditional in other parts of the code, such as SVG resizing. Do you have another approach you would recommend?
This should get us the themed radio buttons and button style.
We can import it the same way this page does https://unhcr.github.io/dataviz-somalia-prmn/index.html
Called typeSelector
in this diagram:
This should be a "component", meaning the DOM structure can be created via JavaScript, and there should be JavaScript hooks for
This will provide the axes for the two StreamGraphs, and also will show the selected year and allow changing the selected year. For this we can use d3-boxes
Called timePanel
here:
After adding labels, the performance slowed way down. The algorithm for positioning labels is time consuming. One thing we can do is first draw the StreamGraph areas, then after a second or so of no updates, then we do the label placement.
Let's adopt ReactiveModel as a dependency, and refactor what we have now to leverage it.
Ideally we'd pull the data we need when we need it, so we don't need to download a 2MB file on page load.
It might be a nice interaction to add - hovering on the bars cause the corresponding stream to pop out, and vice versa.
The type selection should feed into the query that goes to the API simulation, so that the filter gets applied to the data when the selection changes.
Currently the colors is nondeterministic - each color will be assigned to a country based on its order with all filters applied when the page is loaded, then those colors will be used as filters changed.
The colors should be consistently mapped to countries, no matter what filter state is present on page load.
Currently, areas are shown for all source and destination countries no matter what, even if they have all zero values or are too thin to be visible.
We can improve performance by not rendering areas that are too thin to be seen.
There are two cases to be addressed:
Might it make sense to color the bars the same as the stream areas they correspond to?
It may improve readability.
Currently it's difficult to track down, this one https://unhcr.github.io/dataviz-streamgraph-explorer/
This should be front and center on the README.
when you click on a stream to drill-down, and then click to go back, it is a bit slow. could it be improved by keeping the default state in memory and avoiding re-calculations?
This issue is about setting up the infrastructure for JavaScript, and agreeing/deciding on code style.
I propose we use Webpack for bundling JavaScript from many source files into a single file that gets loaded on the page. There are many advantages of this over just using <script>
tags, such as:
<script>
tags.<script>
tag in our HTML, rather than many. This improves load time, and also makes it so we don't need to change the HTML each time we add a new JS file.Disadvantages of using WebPack:
Depends on #41
I propose we work with reactive-model so we can code in terms of data flow, and not need to worry about the logistics of when different parts of our code execute.
Given that we'll use the packed 2MB data for now, and we'll use an API later, we need to design the data flow graph such that we can cleanly swap out the data source, and everything will still function correctly.
This is approximately how it might look:
Then we can write the visualization code to solely depend on srcDataAggregated
and destDataAggregated
, and make sure they get the same values no matter which data backend is used.
Currently, hovering over areas does not update the selected year. This is a bit confusing, and perhaps a better interaction would be to have hovering over the areas set the selected year as well.
The concept of the details panel is to show details for a selected year. To select a year, we can add the following:
year
property to the data flow, representing the selected yeartimePanel
sets the selected yearStreamGraph
component sets the selected yearClicking on an area in the source StreamGraph should filter by that source, likewise for destination.
As seeing 0 in the list may be confusing for non-programmers
We need to get the data from data/data.json
into the browser and unpacked into a flat table structure (array of objects).
Get the full timeseries data from http://popstats.unhcr.org/en/time_series , and preprocess it such that the file is small enough to load in the browser.
This should contain
The full data is available at http://popstats.unhcr.org/en/time_series.csv
Some changes to get watching to work left us in an unfortunate state of having built files in dist/dist
rather than just dist
.
There are a number of TODOs sprinkled throughout the code. At some point these all should be addressed by a refactoring effort.
So we don't need to run npm run build
all the time.
We want to eventually pull aggregated data down from an API via queries, which will be much smaller than the 2.3MB file we have now. However, that API is not ready quite yet, so the best approach might be to simulate that API. That way, we can drop in the API easily later.
Approach idea:
In prototyping, the on-the-fly filtering and aggregation was quite expensive, causing the page to freeze briefly. Putting the computation inside a Web Worker will cause it to execute in a separate thread, so the UI will not freeze.
Currently the list of selected types is bloating the URL. We can try to think of a more concise representation, maybe a list of array indices for example.
The wide bars are a bit awkward. For example when there are only 3-4 rows, it should be just empty space below the bars, rather than expanding the bars to fill the space available.
The URL of the page should contain the current selections to support deep linking, where you can share a link to a specific state.
This should eventually contain:
types
The array of selected population typessrc
The selected origindest
The selected destinationzoom
The selected zoomed time intervalyear
The selected year, which feeds into the details viewHere's a first pass from Trello by @vidonne
Deploy WIP version to GitHub pages or other solution so that we can share development progress with end-users.
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.