JSFiddle - React, Tailwind, and code Playground

by gorkem

HTML

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>bar</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
  </head>
<body>
  <div id="chart"></div>

CSS

#chart{
    height:200px;
    width:500px;
}
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
svg {
  font: 10px sans-serif;
}

path {
  fill: steelblue;
}

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

JavaScript

data = [{date:"2011-11-07", num: 5},{date:"2011-11-08", num: 5},{date:"2011-11-09", num: 6},{date:"2011-11-10", num: 12},{date:"2011-11-11", num: 15},{date:"2011-11-12", num: 5},{date:"2011-11-13", num: 8},{date:"2011-11-14", num: 5}];

brushgraph(data,chart);

function brushgraph(data,location){
    var margin = {top: 20, right: 10, bottom: 100, left: 40},
        margin2 = {top: 150, right: 10, bottom: 20, left: 40},
        width = $(location).width() - margin.left - margin.right,
        height = $(location).height() - margin.top - margin.bottom,
        height2 = $(location).height() - margin2.top - margin2.bottom;
    
    function milisecs(date){
        // inputs any date in the format YYYY-MM-DD and returns date in milisecons
        var any_date = date.split("-");
        var date_milisecs = new Date(any_date[0],any_date[1]-1,any_date[2]).getTime();
        return date_milisecs;
    }
    
    brush_data = data;


    var x = d3.time.scale().range([0, width]),
        x2 = d3.time.scale().range([0, width]),
        y = d3.scale.linear().range([height, 0]),
        y2 = d3.scale.linear().range([height2, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom"),
        xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
        yAxis = d3.svg.axis().scale(y).orient("left");

    var brush = d3.svg.brush()
        .x(x2)
        .on("brush", brush);

    var area = d3.svg.area()
        .interpolate("monotone")
        .x(function(d) { return x(d.date); })
        .y0(height)
        .y1(function(d) { return y(d.num); });

    var area2 = d3.svg.area()
        .interpolate("monotone")
        .x(function(d) { return x2(d.date); })
        .y0(height2)
        .y1(function(d) { return y2(d.num); });

    var svg = d3.select(location).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

    svg.append("defs").append("clipPath")
        .attr("id", "clip")
     ...