git-ashish

d3js Multiline chart with brushing and mouseover

git-ashish

This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.

git-ashish

#!/bin/bash

sudo apt-get remove phantomjs

sudo unlink /usr/local/bin/phantomjs
sudo unlink /usr/local/share/phantomjs
sudo unlink /usr/bin/phantomjs

cd /usr/local/share

git-ashish

//Practically all this code comes from https://github.com/alangrafu/radar-chart-d3
//I only made some additions and aesthetic adjustments to make the chart look better 
//(of course, that is only my point of view)
//Such as a better placement of the titles at each line end, 
//adding numbers that reflect what each circular level stands for
//Not placing the last level and slight differences in color
//
//For a bit of extra information check the blog about it:
//http://nbremer.blogspot.nl/2013/09/making-d3-radar-chart-look-bit-better.html

git-ashish

Cos I always forget it...

1. sudo gem install rubygems-update
2. sudo update_rubygems

git-ashish

{"links":[{"target":1,"source":0},{"target":2,"source":0},{"target":3,"source":0},{"target":4,"source":0},{"target":5,"source":0},{"target":6,"source":0},{"target":7,"source":0},{"target":8,"source":0},{"target":9,"source":0},{"target":10,"source":0},{"target":11,"source":0},{"target":12,"source":0},{"target":13,"source":0},{"target":14,"source":0},{"target":15,"source":0},{"target":16,"source":0},{"target":17,"value":22,"source":0},{"target":18,"value":24,"source":0},{"target":19,"value":28,"source":0},{"target":20,"value":19,"source":0},{"target":21,"value":19,"source":0},{"target":22,"value":26,"source":0},{"target":23,"value":28,"source":0},{"target":25,"source":24},{"target":26,"source":24},{"target":27,"source":24},{"target":28,"source":24},{"target":29,"source":24},{"target":30,"source":24},{"target":31,"source":24},{"target":32,"source":24},{"target":33,"source":24},{"target":34,"source":24},{"target":35,"value":1,"source":24},{"target":36,"value":12,"source":24},{"target":23,"value":1,"source":24},{"

git-ashish

Created by Christopher Manning

Summary

Nodes are linked to nodes in neighboring cells. The cell's color is a function of its area.

The white lines are the Delaunay triangulation and the purple cells are the Voronoi diagram.

Controls

git-ashish

{
  "nodes": [
    {"name": "d3"},
    {"name": "d3.svg"},
    {"name": "d3.svg.area"},
    {"name": "d3.svg.line"},
    {"name": "d3.scale"},
    {"name": "d3.scale.linear"},
    {"name": "d3.scale.ordinal"}
  ],

git-ashish

In response to a Stack Overflow question, Tree drawing orientation.

git-ashish

This example demonstrates how to animate a path and a textPath at the same time. I wouldn’t use this technique—the text is scrunched up at the beginning of the arc at the beginning of the animation. Instead, I would use the arc to clip the text, so that the text is revealed as the arc expands.

This example also demonstrates two unfortunate bugs in WebKit browsers:

• You can’t select textPath elements because of a bug in how WebKit handles case-sensitive element names. See bug 83438. WebKit shows no sign of fixing this bug, unfortunately.

• Updating a path element by itself does not trigger redraw on dependent elements that reference this path. So, even though we update the path, the referencing textPath element will not be redrawn. To workaround this update bug, we create a custom transition that repeatedly sets the textPath’s xlink:href attribute to “#path”.

See [related Stack Overflow question](http://stackoverflow.com/questi