D3 Examples - New Political Compass

xxxxxxxxxx
 
<html>
  <head>
    <title>new political compas</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="ternary.js"></script>
    <style media="screen">
​
    sup{
      vertical-align: top;
      font-size: 0.8rem;
    }
​
    body{
      font-family:sans-serif;
    }
    .column{
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:800px;
    }
    img{
      width:100%;
      padding-top:1rem;
      padding-bottom:1rem;
    }
    .note img{
      display:block;
      width:30%;
    }
​
    h2{
      font-size:1.3rem;
    }
​
    blockquote{
      font-family:serif;
    }
    hr{
      border: 0;
      height: 0;
      border-top:1px solid #999;
    }
    .date{
      border-top:1px solid #999;
      color:#999;
      padding-bottom:10px;
      padding-top:10px;
    }
​
    .content{
      max-width:600px;
      line-height:1.5rem;
      font-size:1.1rem;
    }
​
    .note{
      max-width:600px;
      font-size:0.8rem;
      line-height:1.2rem;
    }
​
​
    .ternary-circle{
      stroke:#c00;
      fill:#fff;
    }
​
    .ternary-line{
      fill:none;
      stroke:#c00;
    }
​
    .ternary-tick{
      fill:none;
      stroke:#000;
    }
​
    .major-ticks{
        font-size:12;
    }
​
    .minor{
      stroke:#eee;
    }
​
    .axis-label{
      font-size:20;
      fill:#000;
      font-weight:bold;
      stroke:none;
    }
​
    .marker{
      cursor: move;
    }
​
    .marker-text{
      stroke:none;
      font-size:12;
    }
​
    .marker-text-outline{
      stroke-width:5;
      font-size:12;
      stroke:#FFF;
    }
​
    </style>
  </head>
  <body>
  <div class="content">
  <h1>New Political Compass</h1>
  <p>Hours poring over and analysing the manifestos and policy statements of 
  the major parties has led to the development of a new ternary political compass covering the full political landscape 
  and placing the choices available to today's voter in an understandable context.</p></div>
  <hr>
    <div id='viz'></div>
    <div class="date">May 2015</div>
  </body>
  <script type="text/javascript">
//  Health Goth, Norm Core, Soft Grunge
    var markerCircleRadius = 5;
    var markers = [
      {
        name:'SNP' ,value:[3,3,8]
      },
      {
        name:'Labour' ,value:[3,5,3]
      },
      {
        name:'Tory' ,value:[3,8,2]
      },
      {
        name:'UKIP' ,value:[2,8,2]
      },
      {
        name:'Plaid' ,value:[4,3,8]
      },
      {
        name:'Green' ,value:[7,3,5]
      },
      {
        name:'Lib Dem' ,value:[2,7,6]
      }
    ];
​
    var width = 600, height = 700;
    var margin = {top:30, left:30, bottom:100, right:30};
​
    var chart = d3.select('#viz').append('svg')
      .attr({
        width:width,
        height:height,
        viewBox:'0 0 '+width+' '+ height
      })
      .append('g')
        .attr('transform','translate('+margin.left+','+margin.top+')');
​
    var axes = chart.append('g').attr('id','axes');
    var plot = chart.append('g').attr('id','plot');
​
    var ternaryPlot = ternary.plot().range([0,width-(margin.left+margin.right)]);
    var ternaryAxes = ternary.axes(ternaryPlot);
​
    ternaryAxes
      .ticks()
      .minorTicks([d3.range(0,101,5)])
      .axisLabels(['Health Goth','Norm Core','Soft Grunge']);
​
    var drag = d3.behavior.drag()
      .origin(function(d) {
        var coord = ternaryPlot.point(d.value);
        return {
          x:coord[0],
          y:coord[1]
        };
      })
      .on('drag',function(){
        d3.select(this)
          .attr({
            'transform':'translate('+d3.event.x+','+d3.event.y+')'
          });
      });
​
    var markerGroupEnter = plot.selectAll('.marker').data(markers)
      .enter()
        .append('g')
          .attr({
            'class':'marker',
            'transform':function(d){
              var coord = ternaryPlot.point(d.value);
              return 'translate('+coord[0]+','+coord[1]+')';
            }
          }).call(drag)
​
    markerGroupEnter.append('circle')
      .attr({
        r:markerCircleRadius
      });
​
    markerGroupEnter.append('text')
      .attr({
        'class':'marker-text-outline'
      }).text(function(d){ return d.name; });
​
    markerGroupEnter.append('text')
      .attr({
        'class':'marker-text'
      }).text(function(d){ return d.name; });
​
    plot.selectAll('.marker text')
      .attr({
        'transform':function(){
          return 'translate('+ (markerCircleRadius + 5) +','+3+')'
        }
      })
​
    axes.call(ternaryAxes.draw);
​
  </script>
</html>
​
    