D3 Prototyping

[japacible]

Prototype some possible D3 visualizations relevant to our project. In particular, check out the geographic D3 for animations (before/after).

Please put all of your code and screenshots onto a separate GitHub repo so we can easily refer to them and experiment with your work.

[Bejoty]

I'll be populating this as I continue consolidating the tutorials into useful bits of code to mess with. https://github.com/Bejoty/d3demos Although the current way I'm doing this uses local files through JavaScript, so I haven't found a good way to view these web pages on GitHub. They work on local repos, but I might add a hosting link from my own site or one of those cool real-time scripting sites.

[japacible]

If you push this to the gh-pages branch, you can view everything at:

bejoty.github.io/d3demos/[files]

[Bejoty]

Awesome, that works. Thank you!

[japacible]

No problem! I'm looking forward to seeing what you come up with.

[japacible]

Update for this week: Visualize, using D3, what we'd like to show in the app: select regions, have pop ups on clicks, have toggles to show different data, etc. Use mock data as closely related to our data as possible.

[Bejoty]

Currently searching for geo data of Pakistan, which is proving to be a small challenge in itself. I'm aiming for the most general case first (just the current country border), but hoping to score district boundary data as well. Unfortunately this is a country with somewhat contentious international borders to the north, and districts that occasionally get redefined.

[Bejoty]

Busy day! Geographic data of Pakistan has been achieved, at a resolution of provincial administrative boundaries. I was messing around with the styling a bit, so check it out: http://bejoty.github.io/d3demos/pakistan.html

[japacible]

Per our conversation from yesterday, can you comment with what you did/did not do?

For example, I don't think this is up yet:

• Before/after animations
• Onclick pop ups
• Toggles to show different data
• Onclick select region

Onclick is different from mouseover, because we don't have that functionality on a tablet.

Keeping a check list of what we have as sample code to just copy-paste into our project would be nice. If we can get all of this finished sooner, we can move you onto other tasks. The next few weeks are pretty critical, and we probably all have other projects and midterms coming up.

I've also been working on D3 the past two weeks to get ramped up for whenever I officially focus more on visualizations rather than Android.

[Bejoty]

Yes, sorry! I was hoping to get home 6 hours ago.

Complete

• Pakistan map data acquired for administrative borders 0 and 1 (country and provinces)
• Node.js packages used to parse raw geo data (.shp, .sbx, .dbf, etc.) into a much friendlier format for D3 (TopoJSON) -- I can throw a simple tutorial for this on our wiki for reference
• D3 used to style specific regions (CSS 'hover' styling used as an example, noting that this is not tablet-friendly)

Up Next

1. Distinct click handlers attached to individual regions
2. General functionality and flow between (toggled) popups and/or sidebar details (I'd like the group's opinion on how we want this flow to work)
3. Mock data and further visual representation (also running blind on this until we know precisely what we want to show where)
4. Animation. I feel like there will be more important fires to put out before we get too frilly on things, but if it happens, it happens.

[Bejoty]

Declaring D3 prototyping phase over. Current tasks will go in their own issues.