Prototype visualising Draw My Life data using the HXL Proxy API

[krissy]

Related to: #147

What

We want to create a simple prototype client that consumes the JSON endpoint from the HXL Proxy API and displays data views in a graph.

NB: Though we eventually want to query the confirmed HXL Proxy API URL using the data in #147, we are not blocked on working on this ticket. We have a test HXL Proxy dataset setup which currently reads from our sample Google Spreadsheet.

You can access our test dataset by going to https://proxy.hxlstandard.org/data/Bkq0o4, and copying the JSON link there - at time of writing this is https://proxy.hxlstandard.org/data/Bkq0o4/download/drawmylife_data_test_v1.json. This response is an array of arrays, something like the following:

[
["Emotional State (Leuven scale - wellbeing)", "Stage of journey", "Country drawn in", "Total children affected", "Children who identify as female", "Children who identify as male", "Children who don't identify as male or female", "Children between the ages of 5-12", "Children between the ages of 13-18"],
["#impact+indicator+code", "#affected+children", "#country+code", "#affected+children+total", "#affected+children+f", "#affected+children+m", "#affected+children+i", "#affected+children+age_5_12", "#affected+children+age_13_18"],
["5", "idps", "RS", "12", "4", "7", "1", "6", "6"],
["5", "in_shelter", "RS", "12", "4", "7", "1", "6", "6"],
["5", "awaiting_transit", "RS", "12", "4", "7", "1", "6", "6"],
["5", "in_transit", "RS", "12", "4", "7", "1", "6", "6"],
["5", "relocated", "RS", "12", "4", "7", "1", "6", "6"],
["4", "idps", "RS", "35", "12", "15", "2", "14", "17"],
["4", "in_shelter", "RS", "35", "12", "15", "2", "14", "17"],
["4", "awaiting_transit", "RS", "35", "12", "15", "2", "14", "17"],
["4", "in_transit", "RS", "35", "12", "15", "2", "14", "17"],
["4", "relocated", "RS", "35", "12", "15", "2", "14", "17"],
["3", "idps", "RS", "5", "3", "2", "3", "5", "0"],
["3", "in_shelter", "RS", "5", "3", "2", "3", "5", "0"],
["3", "awaiting_transit", "RS", "5", "3", "2", "3", "5", "0"],
["3", "in_transit", "RS", "5", "3", "2", "3", "5", "0"],
["3", "relocated", "RS", "5", "3", "2", "3", "5", "0"],
["2", "idps", "RS", "5", "3", "2", "3", "5", "0"],
["2", "in_shelter", "RS", "5", "3", "2", "3", "5", "0"],
["2", "awaiting_transit", "RS", "5", "3", "2", "3", "5", "0"],
["2", "in_transit", "RS", "5", "3", "2", "3", "5", "0"],
["2", "relocated", "RS", "5", "3", "2", "3", "5", "0"],
["1", "idps", "RS", "5", "3", "2", "3", "5", "0"],
["1", "in_shelter", "RS", "5", "3", "2", "3", "5", "0"],
["1", "awaiting_transit", "RS", "5", "3", "2", "3", "5", "0"],
["1", "in_transit", "RS", "5", "3", "2", "3", "5", "0"],
["1", "relocated", "RS", "5", "3", "2", "3", "5", "0"]
]

How

• [ ] We have a new repository with frontend stack all set up at https://github.com/empowerhack/DU-data-viz-demo, check this out and get it up and running locally. Feel free to contact the team, specifically our awesome repo creator @tanyapowell to discuss setup or implementation here.
• [ ] Query the test HXL Proxy JSON URL above to obtain the DML dataset we want to output
• [ ] Using d3.js or your graphing tool of choice, parse the array of arrays returned from the JSON endpoint and map an example view of the DML dataset, e.g. "Number of females with negative mood ratings by Stage of Journey". Note this is only a spike to test what it's like to consume data from the HXL proxy and plot it on a graph. We have a separate task to finalize UX of data viz going forward.
• [ ] Experiment with multiple views of this data (Another E.g. "Number of children in camps with positive mood ratings") and implement a simple filter to toggle between different views

References

• You can see an open source example of how HXL Proxy API data has been used for visualisation here: https://github.com/NepalAssessments/NepalAssessments.github.io

[1coolmatt8083]

so i have lightspeed, could i use this to bypass it.