data = {
const data = [];
let d = moment("15-Mar-20");
for (let i = 0, v = 2; i < 60; ++i) {
v += Math.random() - 0.5;
v = Math.max(Math.min(v, 4), 0);
data.push({
date: d.toDate(),
value: v
});
//next date
d = d.add(1, 'day');
}
return data;
}
timeSeries(600, 200, data)
data1 = fetch("http://localhost:8080/api/reads/16527586").then((response) => response.json())
data2 = {
const data = [];
data1.map(d =>
data.push({
date: new Date(d.date * 1000),
value: d.value
}))
return data;
}
timeSeries(1000, 500, data2)
function timeSeries(width, height, data) {
const margin = { top: 20, right: 30, bottom: 30, left: 40 }
const viewportHeight = height;
const viewportWidth = width;
const xMapper = d3
.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, viewportWidth - margin.right]);
const yMapper = d3
.scaleLinear()
.domain([32000, 34000])
.range([viewportHeight - margin.bottom, margin.top]);
const line = d3
.line()
.x(d => xMapper(d.date))
.y(d => yMapper(d.value));
const xAxis = function(g) {
return g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(xMapper)
.ticks(10)
.tickSizeOuter(0)
);
};
const yAxis = function(g) {
return g.attr("transform", `translate(${margin.left},0)`).call(
d3
.axisLeft(yMapper)
.ticks(5)
.tickSizeOuter(0)
);
// to remove the axis line, add the following
// .call(g => g.select(".domain").remove());
};
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("style", "border:1px solid black");
svg
.append("path")
.datum(data)
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-miterlimit", 1)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
moment = require('moment')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
