base698/chord.html

## chord.html
<html>
  <script>
    // CSV file for link visits
    // if there are 3 links here , then the data for the matrix is 3x3 for the links.
    var uris = "link,visits,color\n" +
        "/discover,1000,#E41A1C\n" +
        "/tv,800,#FFFF33\n" +
        "/channels,150,#FF7F00\n";

    // Visitors from one page to another, eg this says 4 visitors went /discover -> /tv
    var matrix = [[0,4,1], // links for /discover
                  [1,0,3], // links for /tv
                  [3,2,0]];// links for /channels
  </script>


<style>
@import url(http://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);

html {
  min-width: 1040px;
}

.ocks-org body {
  background: #fcfcfa;
  color: #333;
  font-family: "PT Serif", serif;
  margin: 1em auto 4em auto;
  position: relative;
  width: 960px;
}

.ocks-org header,
.ocks-org footer,
.ocks-org aside,
.ocks-org h1,
.ocks-org h2,
.ocks-org h3,
.ocks-org h4 {
  font-family: "PT Sans", sans-serif;
}

.ocks-org h1,
.ocks-org h2,
.ocks-org h3,
.ocks-org h4 {
  color: #000;
}

.ocks-org header,
.ocks-org footer {
  color: #636363;
}

h1 {
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -2px;
  margin: .3em 0 .1em 0;
}

h2 {
  margin-top: 2em;
}

h1, h2 {
  text-rendering: optimizeLegibility;
}

h2 a[name],
h2 a[id] {
  color: #ccc;
  right: 100%;
  padding: 0 .3em;
  position: absolute;
}

header,
footer {
  font-size: small;
}

.ocks-org header aside,
.ocks-org footer aside {
  float: left;
  margin-right: .5em;
}

.ocks-org header aside:after,
.ocks-org footer aside:after {
  padding-left: .5em;
  content: "/";
}

footer {
  margin-top: 8em;
}

h1 ~ aside {
  font-size: small;
  right: 0;
  position: absolute;
  width: 180px;
}

.attribution {
  font-size: small;
  margin-bottom: 2em;
}

body > p, li > p {
  line-height: 1.5em;
}

body > p {
  width: 720px;
}

body > blockquote {
  width: 640px;
}

blockquote q {
  display: block;
  font-style: oblique;
}

ul {
  padding: 0;
}

li {
  width: 690px;
  margin-left: 30px;
}

a {
  color: steelblue;
}

a:not(:hover) {
  text-decoration: none;
}

pre, code, textarea {
  font-family: "Menlo", monospace;
}

code {
  line-height: 1em;
}

textarea {
  font-size: 100%;
}

body > pre {
  border-left: solid 2px #ccc;
  padding-left: 18px;
  margin: 2em 0 2em -20px;
}

.html .value,
.javascript .string,
.javascript .regexp {
  color: #756bb1;
}

.html .tag,
.css .tag,
.javascript .keyword {
  color: #3182bd;
}

.comment {
  color: #636363;
}

.html .doctype,
.javascript .number {
  color: #31a354;
}

.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
  color: #e6550d;
}

svg {
  font: 10px sans-serif;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

sup, sub {
  line-height: 0;
}

q:before {
  content: "“";
}

q:after {
  content: "”";
}

blockquote q {
  line-height: 1.5em;
  display: inline;
}

blockquote q:before,
blockquote q:after {
  content: "";
}

#circle circle {
fill: none;
pointer-events: all;
}

.group path {
fill-opacity: .5;
}

path.chord {
stroke: #000;
stroke-width: .25px;
}

#circle:hover path.fade {
display: none;
}


</style>

 <body></body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>

var width = 720,
    height = 720,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;

var formatPercent = d3.format(".1%");

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(innerRadius);

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

svg.append("circle")
    .attr("r", outerRadius);

ready(null, d3.csv.parse(uris), matrix);

function ready(error, uris, matrix) {
  if (error) throw error;

  // Compute the chord layout.
  layout.matrix(matrix);

  // Add a group per neighborhood.
  var group = svg.selectAll(".group")
      .data(layout.groups)
    .enter().append("g")
      .attr("class", "group")
      .on("mouseover", mouseover);

  // Add a mouseover title.
  group.append("title").text(function(d, i) {
    return uris[i].link + ": " + d.value + " visits";
  });

  // Add the group arc.
  var groupPath = group.append("path")
      .attr("id", function(d, i) { return "group" + i; })
      .attr("d", arc)
      .style("fill", function(d, i) { return uris[i].color; });

  // Add a text label.
  var groupText = group.append("text")
      .attr("x", 6)
      .attr("dy", 15);

  groupText.append("textPath")
      .attr("xlink:href", function(d, i) { return "#group" + i; })
      .text(function(d, i) { return uris[i].link; });

  // Remove the labels that don't fit. :(
  groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
      .remove();

  // Add the chords.
  var chord = svg.selectAll(".chord")
      .data(layout.chords)
    .enter().append("path")
      .attr("class", "chord")
      .style("fill", function(d) { return uris[d.source.index].color; })
      .attr("d", path);

  // Add an elaborate mouseover title for each chord.
  chord.append("title").text(function(d) {
    return uris[d.source.index].link
        + " → " + uris[d.target.index].link
        + ": " + d.source.value
        + "\n" + uris[d.target.index].link
        + " → " + uris[d.source.index].link
        + ": " + d.target.value;
  });

  function mouseover(d, i) {
    chord.classed("fade", function(p) {
      return p.source.index != i
          && p.target.index != i;
    });
  }
}

</script>
	<html>
	<script>
	// CSV file for link visits
	// if there are 3 links here , then the data for the matrix is 3x3 for the links.
	var uris = "link,visits,color\n" +
	"/discover,1000,#E41A1C\n" +
	"/tv,800,#FFFF33\n" +
	"/channels,150,#FF7F00\n";

	// Visitors from one page to another, eg this says 4 visitors went /discover -> /tv
	var matrix = [[0,4,1], // links for /discover
	[1,0,3], // links for /tv
	[3,2,0]];// links for /channels
	</script>


	<style>
	@import url(http://fonts.googleapis.com/css?family=PT+Serif\|PT+Serif:b\|PT+Serif:i\|PT+Sans\|PT+Sans:b);

	html {
	min-width: 1040px;
	}

	.ocks-org body {
	background: #fcfcfa;
	color: #333;
	font-family: "PT Serif", serif;
	margin: 1em auto 4em auto;
	position: relative;
	width: 960px;
	}

	.ocks-org header,
	.ocks-org footer,
	.ocks-org aside,
	.ocks-org h1,
	.ocks-org h2,
	.ocks-org h3,
	.ocks-org h4 {
	font-family: "PT Sans", sans-serif;
	}

	.ocks-org h1,
	.ocks-org h2,
	.ocks-org h3,
	.ocks-org h4 {
	color: #000;
	}

	.ocks-org header,
	.ocks-org footer {
	color: #636363;
	}

	h1 {
	font-size: 64px;
	font-weight: 300;
	letter-spacing: -2px;
	margin: .3em 0 .1em 0;
	}

	h2 {
	margin-top: 2em;
	}

	h1, h2 {
	text-rendering: optimizeLegibility;
	}

	h2 a[name],
	h2 a[id] {
	color: #ccc;
	right: 100%;
	padding: 0 .3em;
	position: absolute;
	}

	header,
	footer {
	font-size: small;
	}

	.ocks-org header aside,
	.ocks-org footer aside {
	float: left;
	margin-right: .5em;
	}

	.ocks-org header aside:after,
	.ocks-org footer aside:after {
	padding-left: .5em;
	content: "/";
	}

	footer {
	margin-top: 8em;
	}

	h1 ~ aside {
	font-size: small;
	right: 0;
	position: absolute;
	width: 180px;
	}

	.attribution {
	font-size: small;
	margin-bottom: 2em;
	}

	body > p, li > p {
	line-height: 1.5em;
	}

	body > p {
	width: 720px;
	}

	body > blockquote {
	width: 640px;
	}

	blockquote q {
	display: block;
	font-style: oblique;
	}

	ul {
	padding: 0;
	}

	li {
	width: 690px;
	margin-left: 30px;
	}

	a {
	color: steelblue;
	}

	a:not(:hover) {
	text-decoration: none;
	}

	pre, code, textarea {
	font-family: "Menlo", monospace;
	}

	code {
	line-height: 1em;
	}

	textarea {
	font-size: 100%;
	}

	body > pre {
	border-left: solid 2px #ccc;
	padding-left: 18px;
	margin: 2em 0 2em -20px;
	}

	.html .value,
	.javascript .string,
	.javascript .regexp {
	color: #756bb1;
	}

	.html .tag,
	.css .tag,
	.javascript .keyword {
	color: #3182bd;
	}

	.comment {
	color: #636363;
	}

	.html .doctype,
	.javascript .number {
	color: #31a354;
	}

	.html .attribute,
	.css .attribute,
	.javascript .class,
	.javascript .special {
	color: #e6550d;
	}

	svg {
	font: 10px sans-serif;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	sup, sub {
	line-height: 0;
	}

	q:before {
	content: "“";
	}

	q:after {
	content: "”";
	}

	blockquote q {
	line-height: 1.5em;
	display: inline;
	}

	blockquote q:before,
	blockquote q:after {
	content: "";
	}

	#circle circle {
	fill: none;
	pointer-events: all;
	}

	.group path {
	fill-opacity: .5;
	}

	path.chord {
	stroke: #000;
	stroke-width: .25px;
	}

	#circle:hover path.fade {
	display: none;
	}


	</style>

	<body></body>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script>

	var width = 720,
	height = 720,
	outerRadius = Math.min(width, height) / 2 - 10,
	innerRadius = outerRadius - 24;

	var formatPercent = d3.format(".1%");

	var arc = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius);

	var layout = d3.layout.chord()
	.padding(.04)
	.sortSubgroups(d3.descending)
	.sortChords(d3.ascending);

	var path = d3.svg.chord()
	.radius(innerRadius);

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

	svg.append("circle")
	.attr("r", outerRadius);

	ready(null, d3.csv.parse(uris), matrix);

	function ready(error, uris, matrix) {
	if (error) throw error;

	// Compute the chord layout.
	layout.matrix(matrix);

	// Add a group per neighborhood.
	var group = svg.selectAll(".group")
	.data(layout.groups)
	.enter().append("g")
	.attr("class", "group")
	.on("mouseover", mouseover);

	// Add a mouseover title.
	group.append("title").text(function(d, i) {
	return uris[i].link + ": " + d.value + " visits";
	});

	// Add the group arc.
	var groupPath = group.append("path")
	.attr("id", function(d, i) { return "group" + i; })
	.attr("d", arc)
	.style("fill", function(d, i) { return uris[i].color; });

	// Add a text label.
	var groupText = group.append("text")
	.attr("x", 6)
	.attr("dy", 15);

	groupText.append("textPath")
	.attr("xlink:href", function(d, i) { return "#group" + i; })
	.text(function(d, i) { return uris[i].link; });

	// Remove the labels that don't fit. :(
	groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
	.remove();

	// Add the chords.
	var chord = svg.selectAll(".chord")
	.data(layout.chords)
	.enter().append("path")
	.attr("class", "chord")
	.style("fill", function(d) { return uris[d.source.index].color; })
	.attr("d", path);

	// Add an elaborate mouseover title for each chord.
	chord.append("title").text(function(d) {
	return uris[d.source.index].link
	+ " → " + uris[d.target.index].link
	+ ": " + d.source.value
	+ "\n" + uris[d.target.index].link
	+ " → " + uris[d.source.index].link
	+ ": " + d.target.value;
	});

	function mouseover(d, i) {
	chord.classed("fade", function(p) {
	return p.source.index != i
	&& p.target.index != i;
	});
	}
	}

	</script>