gimm260-data-visualization/oldStuff/testingStuff-barChart.html

91 lines
2.8 KiB
HTML
Raw Permalink Normal View History

2022-12-13 01:08:09 -07:00
<!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>