JSFiddle - React, Tailwind, and code Playground
HTML
<div id="viz"></div>
CSS
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
JavaScript
var width = 640;
var height = 480;
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
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 data = [{
"at": "2014-11-18T07:29:03.859Z",
"value": 0.553292
}, {
"at": "2014-11-18T07:28:53.859Z",
"value": 0.563292
}, {
"at": "2014-11-18T07:28:43.859Z",
"value": 0.573292
}, {
"at": "2014-11-18T07:28:33.859Z",
"value": 0.583292
}, {
"at": "2014-11-18T07:28:13.859Z",
"value": 0.553292
}, {
"at": "2014-11-18T07:28:03.859Z",
"value": 0.563292
}];
var vis = d3.select("#viz")
.append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function (d) {
d.x_axis = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse(d.at);
d.y_axis = +d.value;
console.log(d);
});
x.domain(d3.extent(data, function (d) {
return d.x_axis;
}));
y.domain(d3.extent(data, function (d) {
return d.y_axis;
}));
var line = d3.svg.line()
.x(function (d) {
console.log(d.x_axis);
return x(d.x_axis);
})
.y(function (d) {
return y(d.y_axis);
})
.interpolate("linear");
vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
vis.append("g")
.attr("class", "y axis")
.call(yAxis);
vis.append("svg:path")
// .datum(data)
.attr("class", "line")
.attr("d", line(data));
var myArray = [
{x: 100, y:"A"},
{x: 200, y:"B"},
{x: 200, y:"A"}
];
myArray.forEach( function(d1) {
alert(d1.x + ',' + d1.y)
});