JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div></div>
<button id="changeLog">Log/Linear</button>

CSS

svg{
    border: 1px solid;
}
.panel1, .panel2{
    border: 1px solid;
}
.line{
    fill: none;
    stroke: blue;
}
.line2{
    fill: none;
    stroke: green;
}
.tick{
    
}
.tick line{
    stroke: lightgray;
}

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


var formatDate = d3.time.format("%b %Y"),
    chart = timeSeriesChart(
        d3.scale.linear())
      .x(function(d) { return d.date; })
      .y(function(d) { return +d.price; })
.y2(function(d){ return +d.price2; });

  d3.selectAll("div")
    .call(chart);

d3.select('#changeLog').on('click', function (){
    chart.changeType();
});

function timeSeriesChart(xScale) {
  var margin = {top: 20, right: 100, bottom: 20, left: 20},
      width = 760,
      height = 350,
      xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(-height, 0, 0),
      xValue = function(d) { return d[0]; },
      yValue = function(d) { return d[1]; },
      yValue2 = function(d) { return d[2]; },
      yScale = d3.scale.linear(),
      //yScale2 = d3.scale.linear(),
      yScale2 = d3.scale.linear(),
      yAxis = d3.svg.axis().scale(yScale).orient("right"),
      yAxis2 = d3.svg.axis().scale(yScale2).orient("right"),
      line = d3.svg.line().x(X).y(Y),
      line2 = d3.svg.line().x(X).y(Y2),
      zoom,
      zoom2,
      svg,
      data,
      isLog = false;
    
    var make_x_axis = function (){
        return d3.svg.axis()
          .scale(xScale)
          .orient("bottom")
          .tickSize(-height, 0, 0);
    }
    
    var make_y_axis = function (){
         return d3.svg.axis()
          .scale(yScale)
          .orient("right")
          .tickSize(-width, 0, 0);
    }
    
var make_y2_axis = function (){
         return d3.svg.axis()
          .scale(yScale2)
          .orient("right")
          .tickSize(-width, 0, 0);
    }    
    

  function chart(selection) {
    
  selection.each(function() {
        
   data = [];
    
    for(var i = 0; i < 500; i++){
        data.push({
            date: i * 55,
            price: getRandomInt(10, 50),
            price2: getRandomInt(195, 220)
        });
    }

      
      // Convert data to standard representation...