JSFiddle - React, Tailwind, and code Playground

by amfy10

HTML

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://mourner.github.com/simplify-js/simplify.js"></script>

CSS

svg {
  font: 10px sans-serif;
}

.crosshair circle {
  fill: none;
  stroke: steelblue;
}

.line {
  stroke: steelblue;
  fill:none;
  clip-path: url(#clip);
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

/*
    * Superimpose
    * Peak pick
    * Rotate g
*/
whichMax = function(arr){
    var max = arr[0].y;
    var maxIndex = 0;
    
    for (var i = 1; i < arr.length; i++) {
        if (arr[i].y > max) {
            maxIndex = i;
            max = arr[i].y;
        }
    }
    return maxIndex
}

scaleBrush = function(){
    var data, width, height, brush_style="full", xScale, yScale, brushCallbacks=[], brushElement, brush_orient="bottom";
    
    brush = function(context){
        function brushFun() {
            if(brushCallbacks.length > 0){
               for(var i=0;i<brushCallbacks.length; i++)
                   brushCallbacks[i](brushElement);
            }
            context.select(".brush").call(brushElement);
        }

        var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
        
        brushElement = d3.svg.brush()
            .x(xScale)
            .on("brushend", brushFun);        
        
        switch(brush_style){
            case "none": return;
            case "slim":{
                context.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .selectAll(".domain")
                        .style("stroke", "#ddd")
                        .style("stroke-width", "8px")
                        .style("stroke-linecap", "round");
                        
                context.append("g")
                    .attr("class", "x brush")
                    .call(brushElement)
                    .selectAll("rect")
                        .attr("y", -2)
                        .attr("height", height+5);         
                break;
            }
            case "full":{
                var path_mini = d3.svg.line()
                    .interpolate("cardinal")
                    .x(function(d) { return xScale(d.x); })
                    .y(function(d) { return yScale(d.y); });

               ...