D3 Examples - chord diagram to show party flows from 2008 to 2013

xxxxxxxxxx
 
<!DOCTYPE html>
​
<meta name="robots" content="noindex">
<html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
  <script src="elections_2013.js"></script>
  <script src="elections_2008.js"></script>
  <script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"></script>
  <meta charset="utf-8">
  <title>Party flows (2008 - 2013)</title>
  <style id="jsbin-css">
​
  .party_label {
    font-size: 10px;
    font-family: sans-serif;
  }
​
​
  </style>
</head>
<body>
​
​
<script id="jsbin-javascript">
  // processing 2008 elections data
  // var election_08 = elections_2008.map(function(d){
  //   return {
  //     seat : d.district,
  //     "Percentage of Votes Polled to Registered Voters" : +d['Percentage of Votes Polled to Registered Voters'].replace(' %', ''),
  //     "Registered Votes" : +d['Registered Votes'],
  //     "Votes Polled" : +d['Votes Polled'],
  //     "Valid Votes" : +d['Valid Votes'],
  //     "Rejected Votes" : +d['Rejected Votes'],
  //     "results" : d['results']
  //     .map(function(candidate){
  //       return {
  //         candidate: candidate['candidate'],
  //         party: candidate['party'],
  //         votes: +candidate['votes']
  //       }
  //     }).sort(function(a,b) {
  //       return b.votes - a.votes;
  //     })
  //   };
  // })
  //
  // console.log(JSON.stringify(election_08));
​
  d3.csv('one_one_mapping.csv', function(error, one_one_map){
​
    function getWinParty(seat, year){
      var data = year == 2013 ? elections_2013 : elections_2008;
      filtered_by_seat = data.filter(d => d.seat == seat)[0];
      return (filtered_by_seat !=null) ? filtered_by_seat.results[0].party : null;
    }
​
​
    one_one_map.map(function(d){
      d.party_2008 = getWinParty(d['2008'], 2008);
      d.party_2013 = getWinParty(d['2013'], 2013);
      d.party_2008_abb = abbreviate(getWinParty(d['2008'], 2008));
      d.party_2013_abb = abbreviate(getWinParty(d['2013'], 2013));
    })
​
    // console.log(one_one_map);
    // one_one_map = one_one_map.filter(d => d.party_2008 !=null && d.party_2013!=null);
    // console.log(one_one_map);
    // console.log(one_one_map.filter(function(d){ return d.party_2008_abb == 'Other'}));
    console.log(one_one_map);
​
    console.log(one_one_map.filter(function(d){ return d.party_2008_abb != 'Other' && d.party_2013_abb != 'Other'}));
​
    // removing Others/ nulls from data
    one_one_map = one_one_map.filter(function(d){ return d.party_2008_abb != 'Other' && d.party_2013_abb != 'Other'});
​
    var party_abbs_2013 = one_one_map.map(d => d.party_2013_abb).filter(unique);
    var party_abbs_2008 = one_one_map.map(d => d.party_2008_abb).filter(unique);
​
    function unique(entry, index, self){
      return self.indexOf(entry) == index;
    }
​
    var party_abbs = party_abbs_2008.concat(party_abbs_2013);
    party_abbs = party_abbs.filter(unique);
​
​
​
    // console.log(party_abbs_2013);
    // console.log(party_abbs_2008);
    // console.log(party_abbs);
​
    var party_matrix = []
    party_abbs.forEach(function(party2013){
      var matrix_array = []
      party_abbs.forEach(function(party2008){
        var eval = one_one_map.filter(d => (d.party_2013_abb == party2013 && d.party_2008_abb == party2008)).length
        //console.log(party2013, ", ",party2008, " ", eval);
        matrix_array.push(eval);
      });
      party_matrix.push(matrix_array);
    })
​
    //console.log(party_matrix);
​
    // now comes in the chord diagram code adpated from mike bostocks block
​
    var matrix = [
      [11975,  5871, 8916, 2868],
      [ 1951, 10048, 2060, 6171],
      [ 8010, 16145, 8090, 8045],
      [ 1013,   990,  940, 6907]
    ];
​
    var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 960),
        width = 860,
        height = 860,
        outerRadius = Math.min(width, height) * 0.5 - 150,
        innerRadius = outerRadius - 15;
​
    var formatValue = d3.formatPrefix(",.0", 1e3);
​
    var chord = d3.chord()
        .padAngle(0.025)
        .sortSubgroups(d3.ascending);
​
    var arc = d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius);
​
    var ribbon = d3.ribbon()
        .radius(innerRadius);
​
    var color = d3.scaleOrdinal(d3.schemeCategory20)
        // .domain(d3.range(4))
        // .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
​
    var g = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
        .datum(chord(party_matrix));
​
    var group = g.append("g")
        .attr("class", "groups")
      .selectAll("g")
      .data(function(chords) { return chords.groups; })
      .enter().append("g")
      .attr('class', function(d, i){
        return party_abbs[i];
      })
      .classed('party_holders', true);
​
​
​
    group.append('text')
        .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
        //.data(d => d)
        .text(function(d, i){
          return party_abbs[i];
        })
        .classed("party_label", true)
        .attr('transform', function(d, i){
          console.log(d.angle/ 2);
          return  'rotate(' + (radians_to_degrees(d.angle/ 2) - 90) + ')' +
          'rotate('+ (d.angle > Math.PI ? -find_text_rot('.party_label') : find_text_rot('.party_label')) +')' +
          'translate('+ (outerRadius + 10) +') ' +
          (d.angle > Math.PI ? "rotate(180)" : "");
        })
        .attr('text-anchor', d => (d.angle > Math.PI ? "end" : null));
​
​
    console.log(group.data());
​
    console.log(group.select('text').data());
​
​
    group.append("path")
        .style("fill", function(d) { return color(d.index); })
        .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
        .attr("d", arc);
​
    // var groupTick = group.selectAll(".group-tick")
    //   .data(function(d) { return groupTicks(d, 1e3); })
    //   .enter().append("g")
    //     .attr("class", "group-tick")
    //     .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
    //
    // groupTick.append("line")
    //     .attr("x2", 6);
    //
    // groupTick
    //   .filter(function(d) { return d.value % 5e3 === 0; })
    //   .append("text")
    //     .attr("x", 8)
    //     .attr("dy", ".35em")
    //     .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
    //     .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    //     .text(function(d) { return formatValue(d.value); });
​
    g.append("g")
        .attr("class", "ribbons")
      .selectAll("path")
      .data(function(chords) { return chords; })
      .enter().append("path")
        .attr("d", ribbon)
        .style("fill", function(d) { return color(d.source.index); })
        .style("stroke", function(d) { return d3.rgb(color(d.source.index)).darker(); })
        .style('opacity', 0.7);
​
    //console.log(d3.select('.ribbons').data());
​
    // // Returns an array of tick angles and values for a given group and step.
    // function groupTicks(d, step) {
    //   var k = (d.endAngle - d.startAngle) / d.value;
    //   return d3.range(0, d.value, step).map(function(value) {
    //     return {value: value, angle: value * k + d.startAngle};
    //   });
    // }
​
    // here ends the code for chord from mike bostocks block
    console.log(outerRadius * 2 * Math.PI);
    console.log((6/ (outerRadius * 2 * Math.PI))* 360)
​
    function find_text_rot(text_class){
      var font_size = d3.select(text_class).style('font-size').replace("px", "");
      console.log(font_size);
      return ((font_size/ 2)/ (outerRadius * 2 * Math.PI)) * 360;
    }
​
    console.log(find_text_rot('.party_label'));
​
    function fade_group(opacity, add_title) {
      return function(d, i) {
        // console.log(d3.select("g.ribbons").selectAll("path").data());
        // console.log(d3.select("g.ribbons").data());
        d3.select("g.ribbons").selectAll("path")
          .filter(function(rib) { return rib.source.index !== i && rib.target.index !== i; })
            .transition()
            .style("opacity", opacity);
          // remove transparency of little groups when mouse is hovered
​
        if (add_title){
          d3.select(this).append("title")
              .text(party_abbs[d.index] + ' - ' + d.value + ' seats');
        }
​
        else {
          d3.select(this).select("title").remove();
        }
      };
    }
​
    // Fade function when hovering over chord
    function fadeOnChord(opac1, opac2, add_title) {
      return function(d){
        var chosen = d;
        d3.select("g.ribbons").selectAll("path")
            .transition()
            .style("opacity", function(d) {
                return d.source.index === chosen.source.index && d.target.index === chosen.target.index ? opac1 : opac2;
            });
​
        selected_ribbon = d3.select(this).data()[0]
​
        var gained = selected_ribbon.source.value;
        var lost = selected_ribbon.target.value;
​
        if (add_title){
​
          if (selected_ribbon.source.index == selected_ribbon.target.index){
            d3.select(this).append("title")
              .text(function(d){
                return party_abbs[d.source.index] + " retained " + gained + (gained > 1 ? " seats" : " seat");
              })
          }
          else {
            d3.select(this).append("title").append('tspan')
              .text(function(d){
                return party_abbs[d.source.index] + " gained from " + party_abbs[d.target.index] + " - " + gained + (gained > 1 ? " seats | " : " seat | " )
              })
​
            d3.select(this).select("title").append('tspan')
              .text(function(d){
                return party_abbs[d.source.index] + " lost from " + party_abbs[d.target.index] + " - " + lost + (lost > 1 ? " seats" : " seat");
              })
          }
        }
​
        else {
          d3.select(this).select("title").remove()
        }
      }
​
    }
​
    d3.selectAll('.party_holders')
      .on("mouseover", fade_group(0.05, 1))
      .on("mouseout", fade_group(0.70, 0));
​
    d3.select("g.ribbons").selectAll("path")
      .on("mouseover", fadeOnChord(0.70, 0, 1))
      .on("mouseout", fadeOnChord(0.70, 0.70, 0));
​
  })
​
​
​
​
​
  function abbreviate(party) {
    switch(party) {
        case "Pakistan Tehreek-e-Insaf":
            return 'PTI';
            break;
        case "Jamiat Ulama-e-Islam (F)":
            return 'JUI-F';
            break;
        case "Qaumi Watan Party (Sherpao)":
            return 'QWP-S';
            break;
        case "Awami National Party":
            return 'ANP';
            break;
        case "Awami Jamhuri Ittehad Pakistan":
            return 'AJIP';
            break;
        case "Pakistan Muslim League (N)":
            return 'PML-N';
            break;
        case "Independent":
            return 'Ind.';
            break;
        case "Jamaat-e-Islami Pakistan":
            return 'JI';
            break;
        case "All Pakistan Muslim League":
            return 'APML';
            break;
        case "Awami Muslim League Pakistan":
            return 'AMLP';
            break;
        case "Pakistan Muslim League":
            return 'PML';
            break;
        case "Pakistan Muslim League(Z)":
            return 'PML-Z';
            break;
        case "Pakistan Peoples Party Parliamentarians":
            return 'PPPP';
            break;
        case "National Peoples Party":
            return 'NPP';
            break;
        case "Pakistan Muslim League (F)":
            return 'PML-F';
            break;
        case "Muttahida Qaumi Movement Pakistan":
            return 'MQM';
            break;
        case "Pashtoonkhwa Milli Awami Party":
            return 'PMAP';
            break;
        case "National Party":
            return 'NP';
            break;
        case "Balochistan National Party":
            return 'BNP';
            break;
        case "Sindh United Party":
            return 'SUP';
            break;
        case "MUTAHIDA DEENI MAHAZ":
            return 'MDM';
            break;
        case "Pakistan Peoples Party (Shaheed Bhutto)":
            return 'PPP-SB';
            break;
        case "Jamiat Ulama-e-Pakistan (Noorani)":
            return 'JUP-N';
            break;
        case "Tehreek-e-Suba Hazara":
            return 'TSH';
            break;
        case "Pakistan Sunni Tehreek":
            return 'PST';
            break;
        case "Bahawalpur National Awami Party":
            return 'BNA';
            break;
        case "Jumiat Ulma-e-Islam(Nazryati)":
            return 'JUI-N';
            break;
        case "Qomi Awami Tehreek":
            return 'QAT';
            break;
        case "Majlis-e-Wahdat-e-Muslimeen Pakistan":
            return 'MWM';
            break;
        case "Pakistan National Muslim League":
            return 'PNML';
            break;
        case "Pakistan Muslim League (J)":
            return 'PNML';
            break;
        case "Sunni Ittehad Council":
            return 'SIC';
            break;
        case "Sindh Taraqi Passand Party (STP)":
            return 'STP';
            break;
        case "Balochistan National Party (Awami)":
            return 'BNP-A';
            break;
        case "MUTTHIDA MAJLIS-E-AMAL PAKISTAN":
            return 'MMA';
            break;
        default:
            return 'Other';
  }
}
​
function radians_to_degrees(rad){
  return rad * (360/ Math.PI);
}
​
</script>
</body>
</html>
​
    