JSFiddle - React, Tailwind, and code Playground

by armensg

CSS

path.line {


    fill: none;


    stroke: #CCC;


    stroke-width: 1.5px;


}


.axis {


    shape-rendering: crispEdges;


}


.x.axis line, .x.axis path {


    fill: none;


    stroke: #ccc;


}


.y.axis line, .y.axis path {


    fill: none;


    stroke: #ccc;


}


.x.axis text, .y.axis text {


    fill: #ccc;


}

JavaScript

var print = function (armen) {
    console.log("PRINTING: ");
    console.log(armen);
}

var mydata = [{
    "timestamp": 1399325270,
        "value": -0.0029460209892230222598710528
}, {
    "timestamp": 1399325271,
        "value": -0.0029460209892230222598710528
}, {
    "timestamp": 1399325279,
        "value": -0.0029460209892230222598710528
}]

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
},
width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%X");

var x = d3.time.scale()
    .range([0, width]);

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");

var line = d3.svg.line()
    .x(function (d) {
    return x(d.timestamp);
})
    .y(function (d) {
    return y(d.value);
});

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

//var series = [];
var data = mydata
data.forEach(function (d) {
    d.timestamp = new Date(d.timestamp * 1000);
    d.value = d.value * 100;
    //series.push([d.timestamp, d.value]);
});

x.domain(d3.extent(data, function (d) {
    return d.timestamp;
}));
y.domain(d3.extent(data, function (d) {
    return d.value;
}));

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Price ($)");

svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);