JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<div id="vis"></div>

CSS

rect {
  fill: ;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

// Taking 1 million simulations of the standard normal
var values = []

var state = 0
for (var i = 0; i < 1000000; i++) {
    state = MetropolisHastings(stdNormal, state, createNewStateFrom);
    values.push(state)
}

//Drawing the data
drawData(values)

function drawData(values){
    var width = 400,
        height = 400,
        padding = 30;

    var svg = d3.select("#vis")
        .append("svg")
        .attr("height", height)
        .attr("width", width);
        
    var tooltip = svg.append('text')
    		.attr('class', 'tooltip')
    		.attr('height', 10)
        .attr('width', 10)
   			.attr('background', 'orange')

    var data = d3.layout.histogram()(values);

    var x = d3.scale.linear()
        .domain([-4, 4])
        .range([padding, width-padding]);

    var y = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d.y; })])
        .range([height, 0]);

    var bar = svg.selectAll("rect")
        .data(data)
      .enter().append("rect")
        .classed("bar", true)
        .f
        .attr("x", function(d){
            return x(d.x)
        })
        .attr("y", function(d) {
            return y(d.y)
        })
        .attr("width", (x(data[0].dx) - x(0)) * .95 )
        .attr("height", function(d) {
            return height - y(d.y) - padding;
        })
        .on('mouseover', function(d) {
        		d3.select(this)
            .attr('fill', 'orange')
        })
        .on('mouseout', function(d) {
        		tooltip.attr('display', 'none')
        });
    
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
    
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);
}

//Utility functions
function MetropolisHastings(probability, state, generateAState) {
    var aPossibleState = generateAState(state);
    var transitionOdds = probability(aPossibleState) / probability(state);
    var newState
    if (Math.random() <=...