Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering. Layout inspired by Martin Krzywinski's beautiful work on Circos.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.node { | |
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
.link { | |
stroke: steelblue; |
!function(){function n(n){return n&&(n.ownerDocument||n.document||n).documentElement}function t(n){return n&&(n.ownerDocument&&n.ownerDocument.defaultView||n.document&&n||n.defaultView)}function e(n,t){return t>n?-1:n>t?1:n>=t?0:0/0}function r(n){return null===n?0/0:+n}function u(n){return!isNaN(n)}function i(n){return{left:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)<0?r=i+1:u=i}return r},right:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)>0?u=i:r=i+1}return r}}}function o(n){return n.length}function a(n){for(var t=1;n*t%1;)t*=10;return t}function c(n,t){for(var e in t)Object.defineProperty(n.prototype,e,{value:t[e],enumerable:!1})}function l(){this._=Object.create(null)}function s(n){return(n+="")===pa||n[0]===va?va+n:n}function f(n){return(n+="")[0]===va?n.slice(1):n}function h(n){return s(n)in this._}function g(n){return(n=s(n))in this._&&delete this._[n]}function p(){var n=[] |
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.
#Super Formulas
####Old Implementation: Christophe Viau implemented a new shape type as a D3 plugin based on superformulas. One nice property of these shapes is that you can easily tween between two shapes by simply interpolating the control points. Click on the blue shapes to try it!
####New Additions: We edited the Super Formulas from above so that when you click the main shape, it would alternate between a circle and a square. This was done in hopes of being used in the Force Layout, as an animation for each node.
if(!d3.chart) d3.chart = {}; | |
d3.chart.brush = function() { | |
var g; | |
var data; | |
var width = 600; | |
var height = 30; | |
var dispatch = d3.dispatch(chart, "filter"); | |
function chart(container) { |
#ITS Network Visualization
####Force Layout
This visualization is based on the force layout by Mike Bostock, described as:
This example demonstrates how to create a force layout of a hierarchy whose internal nodes are collapsible. Leaf nodes are shown in orange, while internal nodes (packages) are shown in blue. Clicking on an internal node (without dragging) causes that node to expand or collapse, toggling the visibility of its descendant nodes.
We use the force layout as the basis of our visualization. Departments are shown by the larger, blue nodes, while individuals are shown as smaller orange nodes.