JSFiddle - React, Tailwind, and code Playground

by paulocoelho

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<div id="pr" ></div>

CSS

#pr{
    width:500px;
    height:200px;
}

svg {
  font: 10px sans-serif;
}
svg .area {
  stroke-width: 2;
  stroke:#249bd5;
  stroke-opacity: 0.7;
  fill: #249bd5;
  fill-opacity: 0.2;
}

svg .area.red{
  stroke-width: 2;
  stroke:#ff4c61;
  stroke-opacity: 0.7;
  fill: #ff4c61;
  fill-opacity: 0.2;
}

svg .line {
  fill: none;
  stroke: #999;
  stroke-width: 1px;
}

svg .line.dashed {
  stroke-dasharray: 7 7;
}
svg .text {
  font-size: 1em;
  font-weight: bold;
  fill:#999;
}

svg .text.red{
  fill:#ff7e81;
}

svg .line.red {
  stroke:#ff7e81;
}

JavaScript

var data = [
    {
        "t": "5",
        "v": 100.00
    },
    {
        "t": "4",
        "v": 222.00
    },
    {
        "t": "3",
        "v": 100.00
    },
    {
        "t": "2",
        "v": 200.00
    },
    {
        "t": "1",
        "v": 5.00
    }
];

var config = {
    container: "#pr",
    threshold:100,
    max:120,
    unit:"mph"
};

var th = new thresholdGraph(config,data);
th.draw();


function thresholdGraph(config, data){
    var thisClass = this;
    
    this.update = function(data){
        var svg = thisClass.svg;
        console.log("This function is not yet implemented");
    }

    this.draw = function(){
        var width = $(config.container).width(), height = $(config.container).height();
        var parseDate = d3.time.format("%d-%b-%y").parse;
        var x = d3.time.scale().range([-1, width+1]);
        var y = d3.scale.linear().range([height, 0]);
        var xAxis = d3.svg.axis().scale(x).orient("bottom");
        var yAxis = d3.svg.axis().scale(y).orient("left");

        // console.log(config);
        // console.log(width);
        // console.log(height);

        var area = d3.svg.area()
            .x(function(d) { return x(d.t); })
            .y0(height)
            .y1(function(d) { return y(d.v); });
        
        var svg = d3.select(config.container[0]).append("svg")
            .attr("width", width)
            .attr("height", height)
          .append("g");
        
        data.forEach(function(d) {
            //d.t = parseDate(d.t);
            d.v = +d.v;
        });
        
        x.domain(d3.extent(data, function(d) { return d.t; }));
        y.domain([0, config.max]);
        
        // setup both threshold clipping masks
        svg.append("defs").append("clipPath")
            .attr("id", "clip-top")
            .append("rect")
                .attr("x", 0).attr("y", y(config.threshold))
                .attr("width", width).attr("height", y(0));
        svg.append("defs").append("clipPath")
     ...