New Political Compass

<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 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js