91 lines
2.8 KiB
HTML
91 lines
2.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Testing</title>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
|
||
|
|
|
||
|
|
//const jsonData = d3.json("http://localhost:8888");
|
||
|
|
const jsonData = d3.json("gamedata.json");
|
||
|
|
jsonData.then(function (data){
|
||
|
|
//let dataset = data.reports;
|
||
|
|
processData(data);
|
||
|
|
});
|
||
|
|
|
||
|
|
function processData(data) {
|
||
|
|
let reportsPerMonth = [["2019-10",0]];
|
||
|
|
|
||
|
|
let index = 0;
|
||
|
|
let prevMonth = 10;
|
||
|
|
|
||
|
|
for(let i = 0; i < data.length; i++) {
|
||
|
|
let currentValue = new Date(data[i].timestamp * 1000);
|
||
|
|
let currentYear = currentValue.getFullYear();
|
||
|
|
let currentMonth = currentValue.getMonth() + 1;
|
||
|
|
|
||
|
|
if(currentMonth != prevMonth) {
|
||
|
|
prevMonth = currentMonth;
|
||
|
|
index++;
|
||
|
|
reportsPerMonth[index] = ["",0];
|
||
|
|
reportsPerMonth[index][0] = (currentYear.toString() + "-" + currentMonth.toString());
|
||
|
|
reportsPerMonth[index][1] = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
reportsPerMonth[index][1]++;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(reportsPerMonth);
|
||
|
|
|
||
|
|
var svg = d3.select("svg"),
|
||
|
|
margin = 200,
|
||
|
|
width = svg.attr("width") - margin,
|
||
|
|
height = svg.attr("height") - margin;
|
||
|
|
|
||
|
|
|
||
|
|
var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
|
||
|
|
yScale = d3.scaleLinear().range ([height, 0]);
|
||
|
|
|
||
|
|
var g = svg.append("g")
|
||
|
|
.attr("transform", "translate(" + 100 + "," + 100 + ")");
|
||
|
|
|
||
|
|
xScale.domain(reportsPerMonth.map(function (d) {return d[0];}));
|
||
|
|
yScale.domain([0, d3.max(reportsPerMonth, function (d) {return d[1];})]);
|
||
|
|
|
||
|
|
g.append("g")
|
||
|
|
.attr("transform", "translate(0," + height + ")")
|
||
|
|
.call(d3.axisBottom(xScale));
|
||
|
|
|
||
|
|
g.append("g")
|
||
|
|
.call(d3.axisLeft(yScale).tickFormat(function(d){
|
||
|
|
return d;
|
||
|
|
}).ticks(10))
|
||
|
|
.append("text")
|
||
|
|
.attr("y", 6)
|
||
|
|
.attr("dy", "0.71em")
|
||
|
|
.attr("text-anchor", "end")
|
||
|
|
.text("value");
|
||
|
|
|
||
|
|
g.selectAll(".bar")
|
||
|
|
.data(reportsPerMonth)
|
||
|
|
.enter().append("rect")
|
||
|
|
.attr("class", "bar")
|
||
|
|
.attr("x", function(d) { return xScale(d[0]); })
|
||
|
|
.attr("y", function(d) { return yScale(d[1]); })
|
||
|
|
.attr("width", xScale.bandwidth())
|
||
|
|
.attr("height", function(d) { return height - yScale(d[1]); });
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="dataViz">
|
||
|
|
<svg width="1000" height="500"></svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|