Public Bicycles by davo

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Vinculos recorridos entre estaciones</title>
<style>

@import url(//bost.ocks.org/mike/style.css?20120427);

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

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

path.chord {

}

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

</style>

<header>
  <aside>Visualizacion</aside>
</header>

<script src="//d3js.org/d3.v2.min.js?2.8.1"></script>
<script>

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

var formatPercent = d3.format("100");

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

var layout = d3.layout.chord()
    .padding(.05)
    .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);

d3.csv("estaciones.csv", function(cities) {
  d3.json("matrix.json", function(matrix) {

    // 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 cities[i].name + ": " + formatPercent(d.value) + " de nodos creados";
    });

    // 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 cities[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 cities[i].name; });

    // 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 cities[d.source.index].color; })
        .attr("d", path);

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

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

</script>
</html>

estaciones.csv

name,latitude,longitude,population,color
Aduana,-34.611365,-58.369077,0,#C4C4C4
Cmd,-34.654286,-58.380429,0,#BABABA
Congreso,-34.609829,-58.389289,0,#7F7F7F
Derecho,-34.583669,-58.391243,0,#DEDEDE
Independencia,-34.617908,-58.380470,0,#BEBEBE
Obelisco,-34.606297,-58.381051,0,#556270
Once,-34.609475,-58.407615,0,#DCDCDC
Pacifico,-34.577468,-58.426158,0,#454545
Parque Las Heras,-34.585030,-58.407637,0,#858585
Parque Lezama,-34.628170,-58.369853,0,#ABABAB
Pza. Almagro,-34.605926,-58.419482,0,#B8B8B8
Pza. De Mayo,-34.609917,-58.374721,0,#C0C0C0
Pza. Houssay,-34.599020,-58.398217,0,#EDEDED
Pza. Italia,-34.580224,-58.420751,0,#5E5E5E
Pza. Roma,-34.601599,-58.369421,0,#6CDFEA
Pza. San Martin,-34.594958,-58.378283,0,#D3D3D3
Pza. Vicente Lopez,-34.593367,-58.389698,0,#4A4A4A
Retiro,-34.592308,-58.375010,0,#C3FF68	
Tribunales,-34.601342,-58.385008,0,#CFCFCF
UCA Puerto Madero,-34.615974,-58.365666,0,#A1A1A1
Virrey Cevallos,-34.622755,-58.388947,0,#7A7A7A

matrix.json