11

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!

art_and_facts
  • 113
  • 1
  • 5
  • 1
    Learn both then. Win. – user2864740 Jun 17 '14 at 21:56
  • Yes, eventually learn both ... the question is where to start. I'm documenting my process of transitioning from being a 2D artist working primarily with vectors. There are a good number of us that want to do the dynamic visualizations on our own, while also wanting to know how to work "better" with programmers. – art_and_facts Jun 17 '14 at 22:29
  • I can only vote for d3js as is the one I know ;) – Adrian Salazar Jun 17 '14 at 22:33
  • Start with them both (e.g. give each a few hours). Then continue with the one that is the most interesting/relevant/fun. – user2864740 Jun 17 '14 at 22:35
  • A more precise question... Which of the programs works best with imported SVG files? That's my starting point. – art_and_facts Jun 17 '14 at 22:53

2 Answers2

14

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.

Adrian Salazar
  • 5,279
  • 34
  • 51
  • Thank you Adrian! I agree, have to know the alphabet before writing words and sentences! I'm going to check out your links. – art_and_facts Jun 17 '14 at 23:24
  • I also found this site... https://www.dashingd3js.com/d3-training/introductory-data-visualization-and-d3-js-training – art_and_facts Jun 17 '14 at 23:26
  • 1
    I would suggest you also those two sites, which also have a very good book that extends the lessons: http://www.d3noob.org and http://alignedleft.com/tutorials/d3/ – tomtomtom Jun 18 '14 at 08:49
  • @tomtomtom, thank you for the link! I saw this site the other day. I didn't know there was a free e-book -- I just downloaded it (will likely buy the book also -- it's easier for me to learn from a physical book). – art_and_facts Jun 20 '14 at 20:55
  • There's also a d3.js intro for people who are still new to HTML and CSS: Part1: http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html Part2: http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html – Nav Jan 04 '15 at 14:29
  • Use following link for the best beginner friendly tutorial for D3 with a lot of examples that are explained very well. https://www.tutorialsteacher.com/d3js – Dushan Sep 19 '19 at 11:01
3

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!

Phuoc Do
  • 1,344
  • 10
  • 14
  • thank you. I know some javascript yet need to learn more. Yep, I'm going to take the codeacademy javascript, jscript and python classes. I'm really looking forward to moving things forward. – art_and_facts Jun 20 '14 at 21:00
  • This thread inspires me to write some Javascript tutorials for data designer, analyst. I'll update once I have the articles up. – Phuoc Do Jun 23 '14 at 22:41
  • I include links to my Javascript tutorials. – Phuoc Do Jun 24 '14 at 18:17