JSFiddle - React, Tailwind, and code Playground

by moosejaw

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>

CSS

#myplot .plot {
    fill: rgba(25, 25, 25, 0.6);
}
#myplot  .grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
#myplot .grid path {
    stroke-width: 0;
}
#myplot .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

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

/* for debug */
#myplot  {
    border:1px solid black;
}

JavaScript

var chromosomes = [
       {"length":197195432,"name":"1"},
       {"length":181748087,"name":"2"},
       {"length":159599783,"name":"3"},
      {"length":155630120,"name":"4"},
      {"length":152537259,"name":"5"},
      {"length":149517037,"name":"6"},
      {"length":152524553,"name":"7"},
      {"length":131738871,"name":"8"},
      {"length":124076172,"name":"9"},
      {"length":129993255,"name":"10"},
      {"length":121843856,"name":"11"},
      {"length":121257530,"name":"12"},
      {"length":120284312,"name":"13"},
      {"length":125194864,"name":"14"},
      {"length":103494974,"name":"15"},
      {"length":98319150,"name":"16"},
      {"length":95272651,"name":"17"},
      {"length":90772031,"name":"18"},
      {"length":61342430,"name":"19"},
      {"length":166650296,"name":"X"}
];
var totalLength = 0;
var tickValues = [];
tickValues.push(0);
$.each(chromosomes, function(index, element, array) {
    chromosomes[index].totalStart = totalLength;    
    totalLength += element.length;
    tickValues.push(totalLength);
});

var margin = {
    top: 20,
    right: 20,
    bottom: 40,
    left: 45
};


//console.log(tickValues);
//console.log(totalLength);


var width = 600 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;

var x = d3.scale.linear().rangeRound([0, width]).domain([0, totalLength]);
var y = d3.scale.linear().rangeRound([0, height]).domain([totalLength, 0]);


var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 5])
    .on("zoom", zoomed);

var svg = d3.select('body')
    .append("svg")
    .attr('id', 'myplot')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot");

var make_x_axis = function () {
    return d3.svg.axis()
      ...