d3.js

d3.js – Available Books

Posted by

0

D3 is my favourite visualization platform, though the learning curve is steeper because it is about selections, data mapping and transformation close to the DOM. D3 does not come with pre-defined visualizations like bar and piecharts. The website comes with lots of samples and tutorials are available as well. If you take the time to walk through them and experiment by yourself you will learn most. Still I enjoy reading books about technical topics with an end to end walk-through.

Currently there are 2 books about D3 both from O’Reilly and both have a similar introductory focus.

Getting Started with D3

d3a June 2012, 12.99 U$ (ebook)

The books does what its title promises, getting you started, It jumps right into D3 with sample applications and code. What I really like is the fact the author connects the visualizations to real life data (New York’s MTA transportation data) which makes the whole book more entertaining and tangible. It also provides a chapter about transition and interaction, even about layouts which make more exciting visualizations, like those we all know from the D3 websites sample page. Though it does not go into advanced details. At this reasonable price I would recommend the title.

Interactive Data Visualization for the Web

d3b

November 2012, 23.99 US (ebook)

This book is a bit more comprehensive than the first one, it starts with some more basic underlying technologies and provides the reader with an introduction to HTML, DOM, CSS and Javascripts. The chapters covering D3 are written lengthier providing slightly more details. It runs along the sample around a bar-charts and scatter-plots which turns dull after a while.  The early release I have seems to be incomplete, so I dont want to give a final verdict.

With D3 obviously getting more popular we will certainly see more books, hopefully covering advanced features and more visualization centric. I was asked if I like to write one but my D3 knowledge is way not comprehensive enough, I wish Mike Bostock would write one.

Post number 300 ! Thanks to the up to 1000 visitors a day.

d3.js – From tree to cluster and radial projection

Posted by

7

Some visualizations seem to be more sophisticated (to implement) than they actual are, specifically the radial projections. Starting from a tree representation with nodes and links it is quite easy to get to the radial version.
Remark: Of course there are more challenging radial diagrams like the bundle, but lets get started with something simple first !

“Standard” Tree
(I added few more nodes to make the visual difference more obvious)

Tree Visualization

We change 1 line of our sourcecode (see previous tutorial for complete code):

var tree = d3.layout.tree().size([300,300]);
to
var tree = d3.layout.cluster().size([300,300]);

Continue reading →

d3.js – Most simple stack layout with bars

Posted by

2

In order to understand the physics of various visualizations I walk through the samples and gists I find, dissect them and strip them down to the bare minimum. From there I explore my own variations. I took Mike’s sample for a stacked bar chart and changed it to chart reading from a matrix instead of the csv file.

Stacked Bar Chart

The matrix object

            var matrix = [
                [ 1,  5871, 8916, 2868],
                [ 2, 10048, 2060, 6171],
                [ 3, 16145, 8090, 8045],
                [ 4,   990,  940, 6907],
                [ 5,   450,  430, 5000]
            ];

The stack layout expects an object with an array of objects, each member of the array represents the values of one value group (eg. “all dark blue values”), and each object contains x and y value. It will process theis array amnd a y0 value (the offset to the baseline).
You can see this if you run the below code with the console.log output.

Console

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Stack</title>
        <script type="text/javascript" src="libnew/d3.v2.min.js"></script>
        <style>
            svg {
                border: solid 1px #ccc;
                font: 10px sans-serif;
                shape-rendering: crispEdges;
            }
        </style>
    </head>
    <body>

        <div id="viz"></div>

        <script type="text/javascript">

            var w = 960,
            h = 500

            // create canvas
            var svg = d3.select("#viz").append("svg:svg")
            .attr("class", "chart")
            .attr("width", w)
            .attr("height", h )
            .append("svg:g")
            .attr("transform", "translate(10,470)");

            x = d3.scale.ordinal().rangeRoundBands([0, w-50])
            y = d3.scale.linear().range([0, h-50])
            z = d3.scale.ordinal().range(["darkblue", "blue", "lightblue"])

            console.log("RAW MATRIX---------------------------");
	    // 4 columns: ID,c1,c2,c3
            var matrix = [
                [ 1,  5871, 8916, 2868],
                [ 2, 10048, 2060, 6171],
                [ 3, 16145, 8090, 8045],
                [ 4,   990,  940, 6907],
                [ 5,   450,  430, 5000]
            ];
            console.log(matrix)

            console.log("REMAP---------------------------");
            var remapped =["c1","c2","c3"].map(function(dat,i){
                return matrix.map(function(d,ii){
                    return {x: ii, y: d[i+1] };
                })
            });
            console.log(remapped)

            console.log("LAYOUT---------------------------");
            var stacked = d3.layout.stack()(remapped)
            console.log(stacked)

            x.domain(stacked[0].map(function(d) { return d.x; }));
            y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);

            // show the domains of the scales
            console.log("x.domain(): " + x.domain())
            console.log("y.domain(): " + y.domain())
            console.log("------------------------------------------------------------------");

            // Add a group for each column.
            var valgroup = svg.selectAll("g.valgroup")
            .data(stacked)
            .enter().append("svg:g")
            .attr("class", "valgroup")
            .style("fill", function(d, i) { return z(i); })
            .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

            // Add a rect for each date.
            var rect = valgroup.selectAll("rect")
            .data(function(d){return d;})
            .enter().append("svg:rect")
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return -y(d.y0) - y(d.y); })
            .attr("height", function(d) { return y(d.y); })
            .attr("width", x.rangeBand());

        </script>
    </body>
</html>

My gist: bl.ocks.org/2940908

d3.js Playing with Selections II (flat vs. hierarchy)

Posted by

0

Based on the previews experiments you will get a flat array with all selected elements.

d3.selectAll("tbody td");

Selection

Using a chained (nested) selection

d3.selectAll("tbody tr").selectAll("td");

we get matrix of cells

Nested Selection

Now we are in full control and can manipulate eg. the color of specific cells and rows

var td = d3.selectAll("tbody tr").selectAll("td");
td.style("color", function(d, i, j) { return (j<2 && i<2) ? null : "red"; });

Nested Selection

d3.js Playing with Selections

Posted by

0

One should have a good understanding of selections, it is worth playing with a sandbox and explore the various options you have. I adopted the tutorial from Mike here.

Lets assume we have a simple HTML table:

<!DOCTYPE html>
<html>
    <head>
        <title>Selections</title>
        <script type="text/javascript" src="lib/d3.v2.min.js"></script>
    </head>
    <body>
        <table>
            <thead>
                <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
            </thead>
            <tbody>
                <tr><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
                <tr><td>  4</td><td>  5</td><td>  6</td><td>  7</td></tr>
                <tr><td>  8</td><td>  9</td><td> 10</td><td> 11</td></tr>
                <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
            </tbody>
        </table>
        <script type="text/javascript">
           //nothing yet
        </script>
    </body>
</html>

HTML table

Continue reading →

d3.js with Dynamic Data II

Posted by

0

A slightly adopted version using SVG. A form to control radius of randomly drawn circles.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, data!</title>
        <script type="text/javascript" src="lib/d3.js"></script>
    </head>
    <body>

        <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="Radius" />
            <input type="text" id="myRadius"/>
        </form>

        <div id="viz"></div>

        <script type="text/javascript">

            var mySVG = d3.select("#viz")
            .append("svg:svg")
            .attr("width", 600)
            .attr("height", 400);

            function handleClick(event){
                console.log(document.getElementById("myRadius").value)
                draw(document.getElementById("myRadius").value)
                return false;
            }

            function draw(rad){
                mySVG.append("svg:circle")
                .style("stroke", "black")
                .style("fill", "grey")
                .attr("r", rad)
                .attr("cx", Math.round(Math.random()*600))
                .attr("cy", Math.round(Math.random()*400))
            }

        </script>
    </body>
</html>

SVG circles

d3.js with Dynamic Data

Posted by

0

On the journey to learn d3.js it is most important to understand the basic principles first, but once you got your hands dirty, thanks to lots of samples, you want make data ‘speak’. The available samples refer to static data sitting in variables or coming from a json or csv files, sooner or later you want to feed data dynamic into your visualization. In this very simple sample we want values from a form sitting on the same html page to be added to a list, as simple as no svg involved.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, data!</title>
        <script type="text/javascript" src="lib/d3.js"></script>
    </head>
    <body>
        <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="Add Value" />
            <input type="text" id="myVal"/>
        </form>

        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>

        <script type="text/javascript">

            var dataset = [];
            for(i=0; i<5; i++){
                dataset.push(Math.round(Math.random()*50));
            }

            var p = d3.select("body").selectAll("p")
            .data(dataset)
            .text(function(d,i){return i + " : " + d;});

            function handleClick(event){
                console.log(document.getElementById("myVal").value)
                draw(document.getElementById("myVal").value)
                return false;
            }

            function draw(val){
                d3.select("body").append("p");
                dataset.push(val);
                var p = d3.select("body").selectAll("p")
                .data(dataset)
                .text(function(d,i){return i + " : " + d;})
            }

        </script>

    </body>
</html>

Dynamic Data

In the next step we will play with some svg, from there I will explore ZK feeding a visualization from a DB or any other feed.

d3.js Tree: most simple sample

Posted by

3

Learning d3.js might not be as easy as some other tools because there are no step-by-step instructions to get started on a hello-world level. The samples on the d3.js site are bit too complex for a noob. But browsing through the example folder of the d3.js download helps, and usually you learn most dissecting by re-assembling sample code from other people. Another great source is gist.github.com, a code snippet repository. Look for d3.js ! With bl.ocks.org you can even “run” the snippets.

The treeview is a classic visualization but one of my favorites, specifically if you spice it up with interaction and allow the user to dive into a subtree of his choice. But what is the most simple tree layout ? I want to understand the physics behind it. So let me share my compiled (of different samples) most simple version without any fancy features or interaction.

Simlpe Tree Layout

Here my bl.ocks.org version with code or here to copy and paste:

Continue reading →

ZK and d3.js

Posted by

1

One of the important questions to me: Can I embed d3.js in my ZK zul pages and talk to the visualization ? Embedding is fairly simple, using the html tag you can embed any native html content and scripts. There is certainly a limitation to scripts, as the final rendered html page will contain both the zk javascript and our script, hoping there is no interference. As sample it is not possible to mix ZK with ExtJS, but JQuery is not a problem.

Task 1: Most simple zk application (Draw circle)

d3.js getting started

Posted by

4

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.