johnpoole/index.html

## readme.json
[{"name":"MANCHESTER INDUSTRIAL","size":1,"imports":["SOUTH CALGARY"]},{"name":"ALTADORE","size":1,"imports":["CLIFF BUNGALOW"]},{"name":"DOWNTOWN COMMERCIAL CORE","size":4,"imports":["MANCHESTER INDUSTRIAL","CRESCENT HEIGHTS","BELTLINE","LOWER MOUNT ROYAL"]},{"name":"HILLHURST","size":1,"imports":["SUNNYSIDE"]},{"name":"INGLEWOOD","size":1,"imports":["BRIDGELAND/RIVERSIDE"]},{"name":"WEST HILLHURST","size":1,"imports":["BRIDGELAND/RIVERSIDE"]},{"name":"SHAGANAPPI","size":1,"imports":["RICHMOND"]},{"name":"BELTLINE","size":11,"imports":["ALTADORE","DOWNTOWN COMMERCIAL CORE","HOUNSFIELD HEIGHTS/BRIAR HILL","GLAMORGAN","RENFREW","BELTLINE","ROXBORO","MISSION","UPPER MOUNT ROYAL"]},{"name":"BANKVIEW","size":1,"imports":["SUNNYSIDE"]},{"name":"UNIVERSITY HEIGHTS","size":2,"imports":["WEST HILLHURST","ROSEDALE"]},{"name":"LOWER MOUNT ROYAL","size":1,"imports":["DOWNTOWN COMMERCIAL CORE"]},{"name":"SUNNYSIDE","size":1,"imports":["ROXBORO"]},{"name":"UNIVERSITY OF CALGARY","size":1,"imports":["INGLEWOOD"]},{"name":"MISSION","size":2,"imports":["MANCHESTER","BANKVIEW"]},{"name":"UPPER MOUNT ROYAL","size":1,"imports":["BELTLINE"]},{"name":"SOUTH CALGARY","size":1,"imports":[]},{"name":"CLIFF BUNGALOW","size":1,"imports":[]},{"name":"CRESCENT HEIGHTS","size":1,"imports":[]},{"name":"BRIDGELAND/RIVERSIDE","size":1,"imports":[]},{"name":"RICHMOND","size":1,"imports":[]},{"name":"HOUNSFIELD HEIGHTS/BRIAR HILL","size":1,"imports":[]},{"name":"GLAMORGAN","size":1,"imports":[]},{"name":"RENFREW","size":1,"imports":[]},{"name":"ROXBORO","size":1,"imports":[]},{"name":"ROSEDALE","size":1,"imports":[]},{"name":"MANCHESTER","size":1,"imports":[]}]

## readme.md

      
    Raw
  

              readme.md
            
          
    A chord diagram of car3go trips in Calgary. A fork of the example from  D3.js,

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Chord Diagram</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.22.1"></script>
    <style type="text/css">

body {
  font: 10px sans-serif;
}

path.chord {
  fill-opacity: .67;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var r1 = 960 / 2,
    r0 = r1 - 120;

var fill = d3.scale.category20c();

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

var arc = d3.svg.arc()
    .innerRadius(r0)
    .outerRadius(r0 + 20);

var svg = d3.select("body").append("svg:svg")
    .attr("width", r1 * 2)
    .attr("height", r1 * 2)
  .append("svg:g")
    .attr("transform", "translate(" + r1 + "," + r1 + ")");

d3.json("http://johnpoole.ca:81/car2chord.json", function(imports) {
  var indexByName = {},
      nameByIndex = {},
      matrix = [],
      n = 0;


  // Compute a unique index for each name.
  imports.forEach(function(d) {
    d = d.name;
    if (!(d in indexByName)) {
      nameByIndex[n] = d;
      indexByName[d] = n++;
    }
  });

  // Construct a square matrix for the chord diagram
  imports.forEach(function(d) {
    var source = indexByName[d.name],
        row = matrix[source];
    if (!row) {
     row = matrix[source] = [];
     for (var i = -1; ++i < n;) row[i] = 0;
    }
    d.imports.forEach(function(d) { row[indexByName[d]]++; });
  });

  chord.matrix(matrix);

  var g = svg.selectAll("g.group")
      .data(chord.groups)
    .enter().append("svg:g")
      .attr("class", "group");

  g.append("svg:path")
      .style("fill", function(d) { return fill(d.index); })
      .style("stroke", function(d) { return fill(d.index); })
      .attr("d", arc);

  g.append("svg:text")
      .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
            + "translate(" + (r0 + 26) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .text(function(d) { return nameByIndex[d.index]; });

  svg.selectAll("path.chord")
      .data(chord.chords)
    .enter().append("svg:path")
      .attr("class", "chord")
      .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
      .style("fill", function(d) { return fill(d.source.index); })
      .attr("d", d3.svg.chord().radius(r0));

});

d3.select(self.frameElement).style("height", "960px");

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Chord Diagram</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.22.1"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;
	}

	path.chord {
	fill-opacity: .67;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var r1 = 960 / 2,
	r0 = r1 - 120;

	var fill = d3.scale.category20c();

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

	var arc = d3.svg.arc()
	.innerRadius(r0)
	.outerRadius(r0 + 20);

	var svg = d3.select("body").append("svg:svg")
	.attr("width", r1 * 2)
	.attr("height", r1 * 2)
	.append("svg:g")
	.attr("transform", "translate(" + r1 + "," + r1 + ")");

	d3.json("http://johnpoole.ca:81/car2chord.json", function(imports) {
	var indexByName = {},
	nameByIndex = {},
	matrix = [],
	n = 0;


	// Compute a unique index for each name.
	imports.forEach(function(d) {
	d = d.name;
	if (!(d in indexByName)) {
	nameByIndex[n] = d;
	indexByName[d] = n++;
	}
	});

	// Construct a square matrix for the chord diagram
	imports.forEach(function(d) {
	var source = indexByName[d.name],
	row = matrix[source];
	if (!row) {
	row = matrix[source] = [];
	for (var i = -1; ++i < n;) row[i] = 0;
	}
	d.imports.forEach(function(d) { row[indexByName[d]]++; });
	});

	chord.matrix(matrix);

	var g = svg.selectAll("g.group")
	.data(chord.groups)
	.enter().append("svg:g")
	.attr("class", "group");

	g.append("svg:path")
	.style("fill", function(d) { return fill(d.index); })
	.style("stroke", function(d) { return fill(d.index); })
	.attr("d", arc);

	g.append("svg:text")
	.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
	.attr("dy", ".35em")
	.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
	.attr("transform", function(d) {
	return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
	+ "translate(" + (r0 + 26) + ")"
	+ (d.angle > Math.PI ? "rotate(180)" : "");
	})
	.text(function(d) { return nameByIndex[d.index]; });

	svg.selectAll("path.chord")
	.data(chord.chords)
	.enter().append("svg:path")
	.attr("class", "chord")
	.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
	.style("fill", function(d) { return fill(d.source.index); })
	.attr("d", d3.svg.chord().radius(r0));

	});

	d3.select(self.frameElement).style("height", "960px");

	</script>
	</body>
	</html>