The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983
It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.
This variation of a bivariate area chart uses clipping to alternate colors. When New York is warmer than San Francisco, the difference between the two is filled in green. When San Francisco is warmer, the difference is filled in red. A similar technique was used by William Playfair all the way back in 1786.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> | |
| <style type="text/css"> | |
| table { | |
| border-collapse: collapse; | |
| font: 300 10px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| width: 720px; | |
| } |
This simple force-directed graph shows a small network of 12 people as nodes. Edges are weigted.
Data created using NetworkX, and exported using node_link_data with default attrs.
Visualization based on Mike Bostock's Force-Directed Graph, with added labels and mouse-over resizing of nodes. Label-circle grouping idea by Pablo Navarro seen on Stack Overflow, and mouse-over resizing of nodes seen in a Fiddle by Aditya.
An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke: #000; | |
| fill-opacity: .8; | |
| } | |
| </style> |
d3js Multiline chart with brushing and mouseover
This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.
The equirectangular projection is available as d3.geo.equirectangular. See also the rotating version.
| <?xml version="1.0" encoding="UTF-8"?> | |
| <gexf xmlns="http://www.gexf.net/1.2draft" version="1.2" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd"> | |
| <meta lastmodifieddate="2014-03-04"> | |
| <creator>Gephi 0.8.1</creator> | |
| <description></description> | |
| </meta> | |
| <graph defaultedgetype="directed" mode="static"> | |
| <attributes class="node" mode="static"> | |
| <attribute id="startyr" title="startyr" type="integer"></attribute> | |
| <attribute id="title" title="title" type="string"></attribute> |