Non-negative Distributions

Visualization of non-negative distribution plots in d3.

Powered using d3.js, jStat, and d3-legend.

Built with blockbuilder.org.

forked from SpaceActuary's block: Distributions

forked from SpaceActuary's block: Non-negative Distributions

forked from anonymous's block: Non-negative Distributions

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.6.0/d3-legend.js"></script>
  <script src="distributions.js"></script>
  <style>
    body { 
      margin: 0;
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0; 
      font-family: Arial, Helvetica, sans-serif
    }
    svg { 
      width: 100%; 
      height: 100%; 
    }
    
    path {
stroke-width: 1;
fill: none;
    }
    .axis { 
      /*stroke: lightgrey;*/
      shape-rendering: crispEdges; 
    }
    
    .x.axis line { stroke: lightgrey; }

.x.axis .minor { stroke-opacity: .5; }

.x.axis path { stroke: lightgrey; }

.y.axis line, .y.axis path {
      fill: none;
      stroke: lightgrey;
    }
    
    .handle path {
      fill: silver;
      stroke: #000;
    }
  </style>
</head>

<body>
  <script>
    var margin = {top: 60, right: 20, bottom: 60, left: 50, inner: 60};
    var width = 960 - margin.left - margin.inner - margin.right;
    var height = 500 - margin.top - margin.bottom;
     
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    
    var svg1 = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
    var svg2 = svg.append("g")
      .attr("transform", "translate(" + (width/2 + margin.left + margin.inner) 
            + "," + margin.top + ")");

var xAxis = d3.svg.axis().scale(x).orient("bottom");
    
    svg1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    
    svg2.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
       .call(xAxis);
    
    var y1Axis = d3.svg.axis().scale(y1).orient("left");
    var y2Axis = d3.svg.axis().scale(y2).orient("left");
    
    svg1.append("g")
        .attr("class", "y y1 axis")
        .attr("transform", "translate(0,0)")
        .call(y1Axis);
    svg2.append("g")
        .attr("class", "y y2 axis")
        .attr("transform", "translate(0,0)")
        .call(y2Axis);
    
    var brush = d3.svg.brush()
      .x(x)
      .extent([0, 0])
      .on("brush", brushed)
      .on("brushend", brushended);

var legendOrdinal = d3.legend.color()
        .shape("circle")
        .shapeRadius(7)
        .shapePadding(10)
        .scale(color)
        .labels(dists.map(function(dist){ return dist.label; }));

svg.select(".legendOrdinal")
      .call(legendOrdinal);

var slider = svg1.append("g")
      .attr("class", "slider")
      .call(brush);

slider.selectAll(".extent,.resize")
      .remove();

slider.select(".background")
      .attr("height", height);

var handle = slider.append("g")
      .attr("class", "handle")

handle.append("path")
      .attr("d", d3.svg.symbol().type("triangle-up").size(200))
      .attr("transform", "translate(0," + (height + margin.bottom * 0.6) + ")")
  
  slider
      .call(brush.extent([5, 5]))
      .call(brush.event);

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.6.0/d3-legend.js