oDesk interactive visualization with backbone
542 views
Skip to first unread message
Zack Maril
Jul 2, 2012, 11:30:35 AM7/2/12
to d3...@googlegroups.com
A major project that I've been working on has just been released:
It's been open sourced and it contains a few interesting tricks. The coffeescript code isn't commented so I wanted to provide links to how things work:
* Distortion on geographic map:
This is used in all of the maps. To shift a single point, you project it out of the geo plan and onto the page (from lat/long to x/y). Then you call the fisheye on it to shift the point within the x/y plan away from the mouse cursor. After that, you invert the projection and bring it back to geo so that it can later be used. Also, be careful about the types of your features and how to map over the polygons.
* Dynamic tooltips (on the bubbles):
This uses the bootstrap tooltip plugin to put tooltips on each of the bubbles. (I've been writing a plugin for d3 to do this without jQuery; getting closer to being useful).
* Updating Rickshaw charts on mouse dragging:
* Adding new series of data to Rickshaw:
* And, finally, linkable state (via backbone)
This is a pretty standard implementation of using backbone's router. Each "page" has it's own link, both with and without arguments. If it has arguments, then the variables are reset before everything gets drawn and updated. Note that this allows for both linkable state and for the use of the back button to switch between graphics.
Overall, it doesn't fully take advantage of backbone's views. That should change with the next one though.
I'd be happy to answer any questions about it that anybody might have.
-Zack
subbu
Jul 2, 2012, 1:53:17 PM7/2/12
to d3...@googlegroups.com
This is brilliant!
Zack Maril
Jul 2, 2012, 2:03:49 PM7/2/12
to d3...@googlegroups.com
Also, bootstrap's tooltip plugin was customized to deal with the specific svg a bit better. It's not a drag and drop solution (yet), so people should be careful just copying it over.
-Zack
Ian Johnson
Jul 2, 2012, 2:12:28 PM7/2/12
to d3...@googlegroups.com
Nice job!
The fisheye on the map makes for nice selection. Who knew that Slovakian's made so many logos or that Latvian's made were into video production!?
very cool, thanks for open sourcing it too!
Graeme Ridler
Dec 17, 2013, 8:54:55 AM12/17/13
to d3...@googlegroups.com, thewi...@gmail.com
Hi Zack
Many thanks for open sourcing! I've been tasked a project to produce a comms dashboard and I am trying to use your site as a template to build this off. Specifically the "Compare" tab. what i would like to do is replace countries & hours worked with specific phone numbers and amount called.
As I understand it your site picks up the country information from "world_countries.json" and the remaining data is inputted in the .csv files, which 'combine.js' reads and writes into the relevant .json files. (which are then read by js scripts /index to populate the data on the web page.
Can you confirm I am on the right track here? So far I have tried to manually override country names with the relevant data I need & replace any references in the .json/.csv/.js/index files. however this hasn't worked!
I also can't find a reference to run the combine.js script to update the .json files, therefore I tried to run this script in the root folder but nothing happened/didn't run & .json files did not update.
Could you please give me some guidance on how I can edit the data to that it uses the same graphical representation/layout but not countries/hours worked.
Many thanks for your help
Regards
Graeme
Zack Maril
Dec 17, 2013, 9:57:47 AM12/17/13
to d3...@googlegroups.com, thewi...@gmail.com
I would recommend that you start from scratch. This project was not made with extension or modification in mind and it would be more work to try and bend it to the task at hand than for you to start from a blank file (particularly if you don't already know d3 an coffeescript). I'd be flattered if you read through the project and used parts for inspiration, but disappointed if 90% of the code stayed the same. While it might get the task you were assigned finished quickly, you will have extreme technical debt that will stop future development entirely within a few weeks.
-Zack
Graeme19
Dec 17, 2013, 12:29:57 PM12/17/13
to d3...@googlegroups.com, thewi...@gmail.com
Hi Zack
Thanks for the prompt response! I completely agree and have spoken with my supervisor regarding the benefits of your site to my project. Basically its very much an end goal solution and is beyond our initial requirements/milestones that I am looking at. That said I'm very fond of what you have done if I continue down the same route I would be happy to share my results with you for your opinion.
Many thanks
Graeme
Reply all
Reply to author
Forward
0 new messages