d3.js getting started

I love visualization of data. It is fantastic what and how you can visualize data and make it accessible and understandable. Specifically I like tree, radial trees and graphs . While the tools some years back were rather restricted to thick clients and Flash applications, we can transport great visualizations with the means of a simple (recent) browser.I recommend this book ‘Beautiful Visualization’ by Julie Steele, Noah Iliinsky (link)

For a while I worked wth prefuse and flare (2 nice but more or less defunc projects), now I start to implement some real life applications with d3.js (link). The features are awesome but the documentation is still rather short, the API doc is complete, but not much hello world stuff to get started with, other than dissecting some of the sample in the download.

What do we need to get started ?

  • A browser and a web server (for Linux users: there is one build in your machine, just start python -m SimpleHTTPServer 8888 and the current path becomes ‘server’)
  • Download d3.js (comes with plenty of samples, some of them will NOT run when you open the html files as file, use the webserver instead!)
  • Text editor (Kate, vi,..)

What is the most simple visualization sourcecode ?

  • Create a html file and place the d3.js in the same or lib folder.
  • Lets draw a circle (I took this from one of the get-started blogs by Christophe Viau, link)
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello, data!</title>
        <script type="text/javascript" src="lib/d3.js"></script>
      </head>
      <body>
    
        <div id="viz"></div>
    
        <script type="text/javascript">
    
        var sampleSVG = d3.select("#viz")
            .append("svg:svg")
            .attr("width", 100)
            .attr("height", 100);
    
        sampleSVG.append("svg:circle")
            .style("stroke", "black")
            .style("fill", "white")
            .attr("r", 40)
            .attr("cx", 50)
            .attr("cy", 50)
    
        </script>
    
      </body>
    </html>
    
  • Open the browser

    Most simple d3.js sample

I hope I find the time to share more with you once I get the grip on this tool.

Advertisements

4 thoughts on “d3.js getting started

  1. Pingback: ZK and d3.js « The JavaDude Weblog

  2. Pingback: D3.js Data-Driven-Documents Revisited | The JavaDude Weblog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s