A JavaScript visualization library for HTML and SVG. D3.js - Data-Driven Documents

rotate x axis text in d3

I am new to d3 and svg coding and am looking for a way to rotate text on the xAxis of a chart. My problem is that typically the xAxis titles are longer than the bars in the bar chart are wide. So I'm looking to rotate the text to run vertically (rather than horizontally) beneath the xAxis.

I've tried adding the transform attribute: .attr("transform", "rotate(180)")

But when I do that, the text disappears altogether. I've tried increasing the height of the svg canvas, but still was unable to view the text.

Any thoughts on what I'm doing wrong would be great. Do I need to also adjust the x and y positions? And, if so, by how much (hard to troubleshoot when I can see it in Firebug).

Source: (StackOverflow)

Learning d3.js for data visualisation [closed]

I want to start learning to make data visualisations (as side project in my PhD) preferably with the D3.js package. I do not have java-experience but i do have a background in OOP as i mostly work in python. As such, I was wondering what's the best way to learn working with d3 and which environment one could recommend me.

Source: (StackOverflow)

Fix Node Position in D3 Force-Directed Layout

I want some of the nodes in my force-directed layout to ignore the force and stay in fixed positions based on the attribute of the node, while still being able to be dragged and exert repulsion on other nodes and maintain their link lines. I thought it would be as simple as this:

    force.on("tick", function() {
            .attr("transform", function(d) {
                return (d.someAttribute == true) ?
                    "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
                    "translate(" + d.x + "," + d.y + ")"

I have also tried to manually set the node's x and y attributes on-tick, but then the links continue to float out to where the node would be if it was affected by the force.

Obviously I have a basic misunderstanding of how this is supposed to work, so could somebody point me to an example where some nodes are fixed in their position (but still draggable) and the rest of the nodes are floating around force-directed-like, and all the links are still working?

Source: (StackOverflow)

Updating SVG Element Z-Index With D3

What is an effective way to bring an SVG element to the top of the z-order, using the D3 library?

My specific scenario is a pie chart which highlights (by adding a stroke to the path) when the mouse is over a given piece. The code block for generating my chart is below:

    .attr("d", arc)
    .attr("class", "arc")
    .attr("fill", function(d) { return color(d.name); })
    .attr("stroke", "#fff")
    .attr("stroke-width", 0)
    .on("mouseover", function(d) {
            .attr("stroke-width", 2)
            .classed("top", true);
            //.style("z-index", 1);
    .on("mouseout", function(d) {
            .attr("stroke-width", 0)
            .classed("top", false);
            //.style("z-index", -1);

I've tried a few options, but no luck so far. Using style("z-index") and calling classed both did not work.

The "top" class is defined as follows in my CSS:

.top {
    fill: red;
    z-index: 100;

The fill statement is there to make sure I knew it was turning on/off correctly. It is.

I've heard using sort is an option, but I'm unclear on how it would be implemented for bringing the "selected" element to the top.


I fixed my particular situation with the following code, which adds a new arc to the SVG on the mouseover event to show a highlight.

    .attr("d", arc)
    .attr("class", "arc")
    .style("fill", function(d) { return color(d.name); })
    .style("stroke", "#fff")
    .style("stroke-width", 0)
    .on("mouseover", function(d) {
          .attr("d", d3.select(this).attr("d"))
          .attr("id", "arcSelection")
          .style("fill", "none")
          .style("stroke", "#fff")
          .style("stroke-width", 2);
    .on("mouseout", function(d) {

Source: (StackOverflow)

D3.js force directed graph, reduce edge crossings by making edges repel each other

So i have a page already which draws a force directed graph, like the one shown here.

And that works fine. I'm using the JS from here, with a few tweaks to spread out the nodes slightly nicer.

These are more or less the only differences:

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .size([w, h])

Where reducing the link strength seems to make the links more like springs, so it becomes similar to the Fruchterman & Reingold technique often used. This works reasonably well, but only for fairly small graphs. With larger graphs the number of crossings just goes up - as one would expect, but the solution it lands on is normally far from optimal. I'm not looking for a method to get the optimal solution, I know that's very difficult. I would just like it to have some crude addition that tries to force the lines apart as well as the nodes.

Is there a way to add a repulsion between in links, as well as between the nodes? I'm not familiar with the way D3 force works, and i can't seem to find anything that says this is possible...

Source: (StackOverflow)

d3 js - loading json without a http get

I am learning d3. There are certain ways of loading the data in d3 js. But all of them seem to make a HTTP GET. In my scenario, I already have the json data in a string. How can I use this string instead of making another http request? I tried to look for documentation for this but found none.

This works:

d3.json("/path/flare.json", function(json) {
    //rendering logic here

Now, if I have:

//assume this json comes from a server (on SAME DOMAIN)
var myjson = '{"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]}'; 

How do I use already computed 'myjson' in d3 & avoid a async call to server? Thanks.

Source: (StackOverflow)

D3.js: what is 'g' in .append("g") D3.js code?

I am new to D3.js, started learning today only

I looked the the donut example and found this code

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

I searched for documentation, but did not understood what .append("g") is appending

Is it even D3 specific?

Looking for guidance here

Source: (StackOverflow)

Creating a table linked to a csv file

I am trying to create a table linked to a *.csv file using d3, but all I get is a blank webpage. Even with the example Crimea I get a blank page.
I would be grateful to be directed or shown a working example or a suggestion of what I am doing wrong.

Source: (StackOverflow)

D3 within an AngularJS app

I'm trying to create my first app with AngularJS. It looks neat, but there's a lot of abstraction, and I'm just curious if anyone has advice on the most idiomatic way to use the angular methodology to update visuals created with d3js.

Thanks, bp

Source: (StackOverflow)

Understanding how D3.js binds data to nodes

I'm reading through the D3.js documentation, and am finding it hard to understand the selection.data method from the documentation.

This is the example code given in the documentation:

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]

var tr = d3.select("body").append("table").selectAll("tr")

var td = tr.selectAll("td")
    .data(function(d) { return d; })
    .text(function(d) { return d; });

I understand most of this, but what is going on with the .data(function(d) { return d; }) section of the var td statement?

My best guess is as follows:

  • The var tr statement has bound a four-element array to each tr node
  • The var td statement then uses that four-element array as its data, somehow

But how does .data(function(d) { return d; }) actually get that data, and what does it return?

Source: (StackOverflow)

Resize svg when window is resized in d3.js

I'm drawing a scatterplot with d3.js. With the help of this question :
how to get web page size, browser window size, screen size in a cross-browser way?

I'm using this answer :

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

So I'm able to fit my plot to the user's window like this :

var svg = d3.select("body").append("svg")
        .attr("width", x)
        .attr("height", y)

Now I'd like that something takes care of resizing the plot when the user resize the window.

PS : I'm not using jQuery in my code.

Source: (StackOverflow)

Highlight selected node, its links, and its children in a D3 force directed graph

I am working on a force directed graph in D3. I want to highlight the mouseover'd node, its links, and its child nodes by setting all of the other nodes and links to a lower opacity.

In this example, http://jsfiddle.net/xReHA/, I am able to fade out all of the links and nodes then fade in the connected links, but, so far, I haven't been able to elegantly fade in the connected nodes that are children of the currently mouseover'd node.

This is the key function from the code:

function fade(opacity) {
    return function(d, i) {
        //fade all elements
        svg.selectAll("circle, line").style("opacity", opacity);

        var associated_links = svg.selectAll("line").filter(function(d) {
            return d.source.index == i || d.target.index == i;
        }).each(function(dLink, iLink) {
            //unfade links and nodes connected to the current node
            d3.select(this).style("opacity", 1);
            //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined
            d3.select(dLink.source).style("opacity", 1);
            d3.select(dLink.target).style("opacity", 1);

I am getting a Uncaught TypeError: Cannot call method 'setProperty' of undefined error when I try to set the opacity on an element I loaded from the source.target. I suspect this is not the right way to load that node as a d3 object, but I can't find another way to load it without iterating over all of the nodes again to find the ones that match the link's target or source. To keep the performance reasonable, I don't want to iterate over all the nodes more than necessary.

I took the example of fading the links from http://mbostock.github.com/d3/ex/chord.html:

enter image description here

However, that doesn't show how to alter the connected child nodes.

Any good suggestions on how to solve or improve this will be furiously upvoted :)

Source: (StackOverflow)

D3.js: "Uncaught SyntaxError: Unexpected token ILLEGAL"?

I've just downloaded D3.js from d3js.org (link to zip file), unzipped it, and referenced it in the following HTML page:

<title>D3 Sandbox</title>
<script src="/d3.v3.js"></script>

But when I load this page, my console (in Chrome) is giving me this error:

Uncaught SyntaxError: Unexpected token ILLEGAL: line 2

It doesn't like the pi and e symbols at the start of the file. Errrr... what can I do about this? I am serving the file with python's SimpleHTTPServer.

Update: yes I know I can just link to a CDN version, but I would prefer to serve the file locally.

Source: (StackOverflow)

What is the difference between D3 and jQuery?

Referring to this example:


it seems that the D3 and jQuery libraries are very similar in the sense that they both do DOM manipulation in an object-chaining way.

I'm curious as to know what functions D3 makes easier than jQuery and vice versa. There are plenty of graphing and visualization libraries that use jQuery as a basis (e.g., , , ).

Please give specific examples of how they are different.

Source: (StackOverflow)

x >= x pattern in JavaScript

When reading source of D3.js I saw x >= x pattern. If it is for detecting NaNs among numbers, why not just isNaN(x) or x == x?

Source, where I encountered it:

d3.min = function(array, f) {
  var i = -1, n = array.length, a, b;
  if (arguments.length === 1) {
    while (++i < n) if ((b = array[i]) != null && b >= b) {
      a = b;
    while (++i < n) if ((b = array[i]) != null && a > b) a = b;
  } else {
    while (++i < n) if ((b = f.call(array, array[i], i)) != null && b >= b) {
      a = b;
    while (++i < n) if ((b = f.call(array, array[i], i)) != null && a > b) a = b;
  return a;

Source: (StackOverflow)