Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Data Visualization beginner: Learn processing, d3.js or other first? [closed]

I'm a visual / info designer and data analyst. I am an expert in Illustrator. I want to transition into dynamic data visualization. Preferably I want to utilize my vector files and connect them to a database. Having said that I want to become versed in data visualization programming.

What Route? I have tested 'processing' via an introductory lesson -- it's similar to the logic in Illustrator. I am considering d3.js. It looks like the consensus is to do a combination of 'processing' and d3. What program should I start with (knowing that I want to utilize my vector files).

Thank you in advance!

like image 244
art_and_facts Avatar asked Jun 17 '14 21:06

art_and_facts


2 Answers

I give my vote for d3js and I'll share my learning tips. I was a beginner with d3.js when I suddenly I had to implement charts, widgets and "nice" (translation: complicated) visualization stuff.

Why d3? it runs in every browser of this era (IE9+) it requires no installation or plugins or special setup, just a couple of lines of code and you're good to go. And mobile phones can also run it with no extra effort.

The learning curve was horrible, but now that I know what I did wrong, I can share a better learning program to you.

  1. Go for the SVG tutorials. Forget about d3, and go for the basics... If you don't know the alphabet how can you write words and then sentences? The tutorial from Mozilla helped me a lot! https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
  2. Now you can go for some d3 action. Don't go to the documentation, go for the tutorials first. https://github.com/mbostock/d3/wiki/Tutorials
    The good stuff is in "Introduction", "Let’s Make a Bar Chart, Parts I, II & III" and the most important of all "General Update Pattern, Parts I, II & III".
  3. Now see and analyze the examples, they all have source code and some comments.

Anyways, it all depends on your proficiency level of JavaScript, DOM and SVG.

like image 105
Adrian Salazar Avatar answered Nov 04 '22 09:11

Adrian Salazar


I recommend d3.js. There are a lot of examples on the web to follow.

But you need to first learn the Basics of Javascript.

http://www.codecademy.com/tracks/javascript

http://www.w3schools.com/js/DEFAULT.asp

Once you have beginner level of Javascript, you can move to d3.js tutorials.

https://github.com/mbostock/d3/wiki/Tutorials

I made several interactive d3.js tutorials here:

https://www.youtube.com/playlist?list=PLRJOPJMJE3OTcg5TNV6ZdbIDbFITu2OXu

Update: I've written new tutorials for beginners to learn both Javascript and data visualization:

http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/ http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-functions/

Have fun!

like image 24
Phuoc Do Avatar answered Nov 04 '22 08:11

Phuoc Do