D3 Tips and Tricks v4

Saturday, 8 December 2012

D3 Hello World

So... D3.js

I'm a fan.
I thought Protovis was cool. And it was.

Then like all good evolutionary processes D3 was born from the Protovis experience.

Mike Bostock is clearly a pretty clever guy and I don't know about you, but damn, he is prolific in producing content, answering questions and still manages to keep down a day job. Dude, you're making just about everyone look bad. Seriously though. Nice job.

So why a blog?
Hmm... Why indeed.

I've been collating the lessons I've been learning while playing with D3 and I'd like to give something back to the community. The main problem is that I don't know that what I have to give is worthwhile. I know that it's all about the contribution (it's the thought that counts right?) but frankly, I know some people who just shouldn't. There is a serious possibility that I'm one of those guys.

My skill level is low and as a result, I've needed to come to terms with a (fairly large) number of details on all manner of things Internet to get to do what I want to do which is play with graphics and data via D3.
In so doing, I make a lot of mistakes and have needed to learn some really embarrassingly simple things. And because I am a simple man I have needed to try and note down what I'm doing so that I don't forget.
The end result of this is that I have found myself in possession of some very noob ways of using D3 which may be useful to people in the same situation.

So I'd like to provide this back to the community.

As it turns out, this isn't as simple as it sounds, since if you want to publish some sort of weighty tome (that includes technical bits and pictures 'n stuff), you need to do so in a format that quite frankly makes me think the process is all too hard. I mean, what I want is a way to publish a document and have people who wish to  get updates to it be alerted when there is a new improved version to download. Sounds pretty reasonable. But no. There's too much emphasis on profit and margins and other unsavory topics. Don't get me wrong. Money's ok, and I've had advice that I should encourage payment so that it encourages me to put out a more professional product. So I'm considering a donation scheme in the longer term if I actually press forward with this in any meaningful way (and anyone cares :-)).

So I've had another thought...

What if I just write a blog and provide people with the opportunity to subscribe via email so that if they want to get an update when I update the document it will let them know?

Hmm.... A cunning plan...

Then people can simple download the document when and if they want to (completely freely of course).
So, the idea appeals... Will it work? I have no idea. But this is the first post on a blog that might be a solution to my dilemma.

Let's see how it goes....

Update: January 2013:
Well, after a fair bit of trial and error, I think I've come across a mechanism that will work for distributing the manual. You can get access to a couple of different copies at a download page here: Or directly from a fantastic provider of a publishing service, Leanpub, here.
There are also some code examples available from the downloads page.


  1. I am having trouble getting the wamp server going. I believe I have installed wamp server properly, but I can't figure out how it is supposed to work. Let me explain my issues, and maybe you can help others as dumb as myself.

    Wamp has a green icon in the tray (This took me a long time to find, I kept clicking 'start Wampserver' from the start menu expecting some type of software to launch). On page 8 of the PDF you show a folder structure....where is that? Is that c:/webserver? c:/wamp/www/webserver, etc? Does it matter?

    After that, how do I set an alias? If I go to the tray icon I can go Apache>Alias directories>Add an Alias, but from there nothing seems to work. Any ideas?

    1. Hi there. Good question. Let me first apologise as I am away from most of my computing resources and can only contend with a phone browser. However. From your description I'd sounds like you have your WAMP server installed (since the green icon is there). The directory structure I have was of my own choosing and in your case if you put it into c:\wamp\www you should then be able to see the files buy putting http://localhost into your browser's address bar (don't use internet explorer. Chrome or Firefox only as I.E is struggling to support the standards required to display svg correctly( although later versions may be OK)). Google may have to be your friend a bit if you can't get past this area. Although this post hopefully reiterates what I've tried to explain. http://myphpscriptz.com/2010/09/what-is-wamp-and-how-to-install-and-use-it/ Good luck.

    2. Sorry, I should have also mentioned that if you then have your alias set up correctly it will appear on that 'localhost' page when you browse there.

  2. Ugh, I was wrapping the file path in single quotes based on following the wamp example. That might be worth a quick mention, it wasted an hour of my life.

  3. Aww... darn. My apologies for being the cause of that!
    When I get back to civilisation I will amend so that I don't trip others up. Thanks for the feedback.

  4. True that. Mike Bostock is prolific. I don't know where he gets the energy. I keep saying to myself..., man, I wish he'd write a book. Then I say, man, I hope he doesn't write a book. Because writing a book would take a lot of his time and it would invariably put D3 evolution on hold. I'm glad that folks like you and @alignedleft are taking the time to share your knowledge with others. Learning the hard way is for the birds... I do too much of that as it is.

    1. I firmly believe that it's why D3 (and other similar projects) are successful. Smart people giving their time and energy to make the community as a whole better. And I'm firmly of the belief that everyone can add in their own piece of knowledge. even if it's just focusing on one aspect of the work or improving documentation. It all adds up.

  5. Hey!

    Well, now many posts later, I can tell you that your d3 tutorials seem like the most interesting resource I've found - aside from the D3 site... which links to everything - for learning d3, and your approach has certainly worked very well in my book!

    I've programmed in python, processing and javascript earlier, and have a bit confused by d3's logic.
    In that regard, I very much appreciate your going into the details, revealing how things can be controlled low-level.

    Many thanks for the site and your approach!


    1. Thank you for your kind words Miska and you're welcome. I'm glad it can be of help. I only wish I had more time to add more content at the moment :-). I am constantly amazed by people who 'just get it' with D3. Some of the code they produce is like art work! I feel as if I have to brute force it a lot, but I figure there must be others like me out there, so it's great that my ramblings are useful.