SVG Time-Dependent Graph Example

by colin_young

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="graph"></div>

<div>
    Color Scheme: <a href="http://colorschemedesigner.com/#3q61Uw0w0w0w0">http://colorschemedesigner.com/#3q61Uw0w0w0w0</a>
</div>

CSS

@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}
@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 700;
    src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

svg {
    border: 1px solid #999;
}

.axis text {
    font-family: Oxygen;
    font-size: 10px;
}
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.node {
  stroke-width: 1.5px;
}
.node.target {
    fill: #FFBC73;
    stroke: #FFA340;
}
.node.source {
    fill: #62B1D0;
    stroke: #0776A0;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

JavaScript

var lineColor = "#172CAF";
var circleOutlineColor = "#0776A0";
var circleFillColor = "#62B1D0";
var textColorSource = "#FFFFFF";

var circleOutlineColorTarget = "#FFA340";
var circleFillColorTarget = "#FFBC73";
var textColorTarget = "#A65600";

var margin = {
	top : 20,
	right : 10,
	bottom : 20,
	left : 10
},
padding = {
	top : 60,
	right : 60,
	bottom : 60,
	left : 60
},
outerWidth = 500,
outerHeight = 400,
innerWidth = outerWidth - margin.left - margin.right,
innerHeight = outerHeight - margin.top - margin.bottom,
width = innerWidth - padding.left - padding.right,
height = innerHeight - padding.top - padding.bottom,
axisBand = 15;

var x = d3.scale.linear()
	.domain([0, 10])
	.range([0, width]);

var y = d3.scale.linear()
	.domain([0, 100])
	.range([0, height]);

var target_axis_position = y(50);

mapNodes = function (nodes) {
	var nodesMap;
	nodesMap = d3.map();
	nodes.forEach(function (n) {
		return nodesMap.set(n.id, n);
	});
	return nodesMap;
};

var nodes = [{
		id : "T0",
		name : "Target 0",
		type : "t",
		time : 0,
		strength : 1
	}, {
		id : "T1",
		name : "Target 1",
		type : "t",
		time : 3,
		strength : 10
	}, {
		id : "T2",
		name : "Target 2",
		type : "t",
		time : 5,
		strength : 2
	}, {
		id : "T3",
		name : "Target 3",
		type : "t",
		time : 8,
		strength : 7
	}, {
		id : "T4",
		name : "Target 4",
		type : "t",
		time : 6,
		strength : 7
	}, {
		id : "S1",
		name : "Source 1",
		type : "s",
		time : 1,
		count : 2
	}, {
		id : "S2",
		name : "Source 2",
		type : "s",
		time : 2,
		count : 1
	}, {
		id : "S3",
		name : "Source 3",
		type : "s",
		time : 2,
		count : 4
	}, {
		id : "S4",
		name : "Source 4",
		type : "s",
		time : 4,
		count : 2
	}, {
		id : "S5",
		name : "Source 5",
		type : "s",
		time : 3,
		count : 2
	}
];
var links = [{
		source : "S1",
		target : "T1",
		strength : 0.05
	}, {
		source : "S2",
		target : "T1",
		strength : 0.1
	}, {
		source : "S3",
		target : "T1",
		strength : 0.3
	}, {
		source : "S3",
		target :...