IMR-12 Compliance Change

data.json

[{"paragraphId":152,"change":0},{"paragraphId":14,"change":0},{"paragraphId":16,"change":0},{"paragraphId":17,"change":0},{"paragraphId":18,"change":0},{"paragraphId":19,"change":0},{"paragraphId":20,"change":0},{"paragraphId":21,"change":0},{"paragraphId":22,"change":0},{"paragraphId":23,"change":0},{"paragraphId":24,"change":0},{"paragraphId":25,"change":0},{"paragraphId":26,"change":0},{"paragraphId":27,"change":0},{"paragraphId":28,"change":0},{"paragraphId":29,"change":0},{"paragraphId":30,"change":0},{"paragraphId":31,"change":0},{"paragraphId":32,"change":0},{"paragraphId":33,"change":0},{"paragraphId":34,"change":0},{"paragraphId":35,"change":0},{"paragraphId":36,"change":0},{"paragraphId":37,"change":0},{"paragraphId":38,"change":0},{"paragraphId":39,"change":0},{"paragraphId":40,"change":0},{"paragraphId":41,"change":0},{"paragraphId":42,"change":0},{"paragraphId":43,"change":0},{"paragraphId":44,"change":0},{"paragraphId":45,"change":1},{"paragraphId":46,"change":0},{"paragraphId":47,"change":0},{"paragraphId":48,"change":0},{"paragraphId":49,"change":0},{"paragraphId":50,"change":0},{"paragraphId":51,"change":0},{"paragraphId":52,"change":0},{"paragraphId":53,"change":-1},{"paragraphId":54,"change":0},{"paragraphId":55,"change":0},{"paragraphId":56,"change":0},{"paragraphId":57,"change":0},{"paragraphId":58,"change":0},{"paragraphId":59,"change":0},{"paragraphId":60,"change":0},{"paragraphId":61,"change":0},{"paragraphId":62,"change":0},{"paragraphId":63,"change":0},{"paragraphId":64,"change":0},{"paragraphId":65,"change":0},{"paragraphId":66,"change":0},{"paragraphId":67,"change":0},{"paragraphId":68,"change":0},{"paragraphId":69,"change":0},{"paragraphId":70,"change":0},{"paragraphId":71,"change":0},{"paragraphId":72,"change":0},{"paragraphId":73,"change":0},{"paragraphId":74,"change":0},{"paragraphId":75,"change":0},{"paragraphId":76,"change":0},{"paragraphId":77,"change":-1},{"paragraphId":78,"change":0},{"paragraphId":79,"change":0},{"paragraphId":80,"change":0},{"paragraphId":81,"change":0},{"paragraphId":82,"change":0},{"paragraphId":83,"change":0},{"paragraphId":84,"change":0},{"paragraphId":85,"change":0},{"paragraphId":86,"change":0},{"paragraphId":87,"change":0},{"paragraphId":88,"change":0},{"paragraphId":89,"change":0},{"paragraphId":90,"change":0},{"paragraphId":91,"change":0},{"paragraphId":92,"change":0},{"paragraphId":93,"change":0},{"paragraphId":94,"change":0},{"paragraphId":95,"change":0},{"paragraphId":96,"change":0},{"paragraphId":97,"change":0},{"paragraphId":98,"change":0},{"paragraphId":99,"change":-1},{"paragraphId":100,"change":0},{"paragraphId":101,"change":0},{"paragraphId":102,"change":0},{"paragraphId":103,"change":0},{"paragraphId":104,"change":0},{"paragraphId":105,"change":0},{"paragraphId":106,"change":0},{"paragraphId":107,"change":0},{"paragraphId":108,"change":0},{"paragraphId":109,"change":0},{"paragraphId":110,"change":1},{"paragraphId":111,"change":0},{"paragraphId":112,"change":0},{"paragraphId":113,"change":0},{"paragraphId":114,"change":0},{"paragraphId":115,"change":0},{"paragraphId":116,"change":0},{"paragraphId":117,"change":0},{"paragraphId":119,"change":-2},{"paragraphId":120,"change":0},{"paragraphId":121,"change":0},{"paragraphId":122,"change":-2},{"paragraphId":123,"change":0},{"paragraphId":124,"change":0},{"paragraphId":125,"change":0},{"paragraphId":126,"change":0},{"paragraphId":127,"change":0},{"paragraphId":128,"change":-1},{"paragraphId":129,"change":0},{"paragraphId":130,"change":0},{"paragraphId":131,"change":1},{"paragraphId":132,"change":0},{"paragraphId":133,"change":0},{"paragraphId":134,"change":0},{"paragraphId":135,"change":0},{"paragraphId":136,"change":0},{"paragraphId":137,"change":0},{"paragraphId":139,"change":0},{"paragraphId":140,"change":0},{"paragraphId":141,"change":0},{"paragraphId":142,"change":0},{"paragraphId":143,"change":0},{"paragraphId":144,"change":0},{"paragraphId":145,"change":0},{"paragraphId":146,"change":2},{"paragraphId":147,"change":0},{"paragraphId":148,"change":0},{"paragraphId":150,"change":0},{"paragraphId":151,"change":0},{"paragraphId":15,"change":0},{"paragraphId":153,"change":0},{"paragraphId":154,"change":0},{"paragraphId":155,"change":0},{"paragraphId":156,"change":0},{"paragraphId":157,"change":0},{"paragraphId":158,"change":0},{"paragraphId":159,"change":0},{"paragraphId":160,"change":0},{"paragraphId":161,"change":1},{"paragraphId":163,"change":0},{"paragraphId":164,"change":0},{"paragraphId":165,"change":0},{"paragraphId":166,"change":0},{"paragraphId":167,"change":0},{"paragraphId":168,"change":0},{"paragraphId":169,"change":0},{"paragraphId":170,"change":0},{"paragraphId":171,"change":0},{"paragraphId":172,"change":0},{"paragraphId":173,"change":0},{"paragraphId":174,"change":0},{"paragraphId":175,"change":0},{"paragraphId":176,"change":0},{"paragraphId":177,"change":0},{"paragraphId":178,"change":0},{"paragraphId":179,"change":0},{"paragraphId":180,"change":0},{"paragraphId":181,"change":0},{"paragraphId":182,"change":1},{"paragraphId":184,"change":0},{"paragraphId":185,"change":0},{"paragraphId":186,"change":0},{"paragraphId":187,"change":0},{"paragraphId":188,"change":0},{"paragraphId":189,"change":0},{"paragraphId":190,"change":0},{"paragraphId":191,"change":0},{"paragraphId":192,"change":0},{"paragraphId":193,"change":0},{"paragraphId":194,"change":0},{"paragraphId":195,"change":0},{"paragraphId":196,"change":0},{"paragraphId":197,"change":0},{"paragraphId":198,"change":0},{"paragraphId":199,"change":0},{"paragraphId":200,"change":0},{"paragraphId":201,"change":0},{"paragraphId":202,"change":0},{"paragraphId":203,"change":0},{"paragraphId":204,"change":0},{"paragraphId":205,"change":-1},{"paragraphId":206,"change":-1},{"paragraphId":207,"change":0},{"paragraphId":208,"change":-1},{"paragraphId":209,"change":-1},{"paragraphId":210,"change":-1},{"paragraphId":211,"change":0},{"paragraphId":212,"change":0},{"paragraphId":213,"change":0},{"paragraphId":214,"change":0},{"paragraphId":215,"change":0},{"paragraphId":216,"change":0},{"paragraphId":217,"change":0},{"paragraphId":218,"change":0},{"paragraphId":219,"change":0},{"paragraphId":220,"change":0},{"paragraphId":221,"change":0},{"paragraphId":222,"change":0},{"paragraphId":223,"change":0},{"paragraphId":224,"change":0},{"paragraphId":225,"change":0},{"paragraphId":226,"change":0},{"paragraphId":227,"change":0},{"paragraphId":228,"change":0},{"paragraphId":229,"change":0},{"paragraphId":230,"change":0},{"paragraphId":231,"change":0},{"paragraphId":232,"change":0},{"paragraphId":233,"change":0},{"paragraphId":234,"change":0},{"paragraphId":235,"change":0},{"paragraphId":236,"change":0},{"paragraphId":237,"change":0},{"paragraphId":238,"change":0},{"paragraphId":239,"change":0},{"paragraphId":240,"change":0},{"paragraphId":241,"change":0},{"paragraphId":242,"change":0},{"paragraphId":243,"change":0},{"paragraphId":244,"change":0},{"paragraphId":245,"change":0},{"paragraphId":246,"change":0},{"paragraphId":247,"change":0},{"paragraphId":248,"change":0},{"paragraphId":249,"change":0},{"paragraphId":250,"change":0},{"paragraphId":251,"change":0},{"paragraphId":252,"change":0},{"paragraphId":253,"change":0},{"paragraphId":255,"change":0},{"paragraphId":256,"change":0},{"paragraphId":257,"change":0},{"paragraphId":258,"change":0},{"paragraphId":259,"change":0},{"paragraphId":261,"change":-1},{"paragraphId":262,"change":0},{"paragraphId":263,"change":0},{"paragraphId":265,"change":0},{"paragraphId":266,"change":0},{"paragraphId":267,"change":0},{"paragraphId":268,"change":1},{"paragraphId":269,"change":0},{"paragraphId":270,"change":1},{"paragraphId":272,"change":0},{"paragraphId":273,"change":0},{"paragraphId":274,"change":0},{"paragraphId":275,"change":0},{"paragraphId":276,"change":0},{"paragraphId":277,"change":0},{"paragraphId":278,"change":0},{"paragraphId":279,"change":0},{"paragraphId":280,"change":1},{"paragraphId":281,"change":0},{"paragraphId":282,"change":0},{"paragraphId":283,"change":0},{"paragraphId":284,"change":0},{"paragraphId":285,"change":0},{"paragraphId":286,"change":0},{"paragraphId":287,"change":0},{"paragraphId":288,"change":0},{"paragraphId":289,"change":0},{"paragraphId":290,"change":0},{"paragraphId":291,"change":0},{"paragraphId":292,"change":0}]

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <title>CASA Compliance Change Analysis</title>
    <style>

    body {
      margin:0;
      padding:0;
      display: flex;
          align-items: center;
          justify-content: center ;
          text-align:center
    }
        * {
          font-family: 'Roboto', sans-serif;
        }
        .bar--positive {
          fill: green;
        }
        
        .bar--negative {
          fill: red;
        }
        
        .axis text {
          font: 10px sans-serif;
        }
        
        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

        .legend {
          max-width: 350px;
        }
        </style>
        </head>
        <body>
          <div class="container">
              <h2>Which paragraphs changed compliance in IMR-12?</h2>
              <p>bars in <b style="color:red;">red</b> decreased in compliance, bars in <b style="color:green">green</b> increased in compliance</p>

              <svg></svg>

          </div>

        <script src="//d3js.org/d3.v3.min.js"></script>
        <script>
        
        var margin = {top: 20, right: 30, bottom: 40, left: 30},
            width = 400 - margin.left - margin.right,
            height = 800 - margin.top - margin.bottom;
        
        var x = d3.scale.linear().rangeRound([0, width]);
        
        var y = d3.scale.ordinal()
            .rangeRoundBands([0, height], 0.1);
        
        var xAxis = d3.svg.axis()
            .scale(x)
            .tickValues([-3,-2,-1,0,1,2,3]).tickFormat(d3.format("d"))
            .orient("bottom");
        
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickSize(0)
            .tickPadding(6);
        
        var svg = d3.select("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
        d3.json('./data.json', function(err,d) {
            console.log(d)
        })

        d3.json("./data.json", function(error, d) {
          d = d.map(type)
          let data = d.filter(paragraph => paragraph.change != 0);
          x.domain([-3,3])
          //x.domain(d3.extent(data, function(d) { return d.change; })).nice();
          y.domain(data.map(function(d) { return d.paragraphId; }));
        
          svg.selectAll(".bar")
              .data(data)
            .enter().append("rect")
              .attr("class", function(d) { return "bar bar--" + (d.change < 0 ? "negative" : "positive"); })
              .attr("x", function(d) { return x(Math.min(0, d.change)); })
              .attr("y", function(d) { return y(d.paragraphId); })
              .attr("width", function(d) { return Math.abs(x(d.change) - x(0)); })
              .attr("height", y.rangeBand());
        
          svg.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
              .call(xAxis);
        
          svg.append("g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + x(0) + ",0)")
              .call(yAxis);
        });
        
        function type(d) {
          d.change = +d.change;
          return d;
        }
        
        </script>
</body>
</html>