JSFiddle - React, Tailwind, and code Playground

by manjunath_siddappa

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://bl.ocks.org/mbostock/raw/4349187/d3.qq.min.js"></script>

CSS

body {
  font: 12px sans-serif;
  width: 960px;
  height: 310px;
}

.qq .box,
.qq .tick line,
.qq .quantile,
.qq .diagonal {
  stroke: #aaa;
  fill: none;
}

.qq .quantile {
  stroke: #000;
}

.qq .diagonal {
  stroke: red;
}

.qq g+g .y.tick {
  display: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.toolTip {
  font: 12px sans-serif;
  position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: #fff;
  color: #000;
  border: 1px solid red;
  padding: 14px;
  text-align: left;
}

JavaScript

var tooltip = d3.select("body").append("div").attr("class", "toolTip");

var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var width = 270,
  height = 270,
  margin = {
    top: 20,
    right: 10,
    bottom: 20,
    left: 35
  },
  n = 10000; // number of samples to generate

var chart = d3.qq()
  .width(width)
  .height(height)
  .domain([-.1, 1.1])
  .tickFormat(function(d) {
    return ~~(d * 100);
  });

var vis = d3.select("body").append("svg")
  .attr("width", (width + margin.right + margin.left) * 3)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

d3.json("https://api.myjson.com/bins/uti7i", function(error, turkers) {
  if (error) throw error;

  var tm = mean(turkers[0].percent.values),
    td = Math.sqrt(variance(turkers[0].percent.values)),
    dd = [
      [0.10306430789206111, 0.0036139086950272735, 0.30498647327844536],
      [0.5924252668569606, 0.0462763685758622, 0.4340870312025223],
      [0.9847627827855167, 2.352350767874714e-4, 0.2609264955190324]
    ];

  var Mean = turkers[0].Mean;
  var STDDeviation = turkers[0]["STD Deviation"];
  var NormalTestPValue = turkers[0]["Normal test p-value"];
  var minValue = turkers[0].percent.minValue;
  var maxValue = turkers[0].percent.maxValue;

  var g = vis.selectAll("g") 
    .data([{
      x: d3.range(n).map(Math.random),
      y: turkers[0].percent.values,
      label: "Uniform Distribution"
    }, {
      x: d3.range(n).map(normal1(tm, td)),
      y: turkers[0].percent.values,
      label: "Gaussian (Normal) Distribution"
    }, {
      x: d3.range(n).map(normal3(dd)),
      y: turkers[0].percent.values,
      label: "Mixture of 3 Gaussians"
    }])
    .enter().append("g")
    .attr("class", "qq")
    .attr("r", 5)
    .attr("transform", function(d, i) {
      return "translate(" + (width + margin.right + margin.left) * i + ")";
    })
    .on("mousemove", function(d,...