I'm trying to create a d3.js heatmap month calendar. That only shows 1 month - and is toggled by chevrons left/right. I want to increase the temperature of the day if there is a "booking" for a medical professional.
So the data to overlay onto the month calendar may look something like this to showcase the schedule for that person.
How do I generate just the current month and style it, populate it as planned. The versions I've seen are very similar to github year calendars.
I've been able to get the current month and the number of days in the month. I've created an array for those number of days - but I have not worked out how to fix the x, y spread. I've tried return week(new Date(d+"-Jul-2023")) * cellSize; but its not taken affect.
Jsfiddle https://jsfiddle.net/c0mgvzrf/6/
<html>
<head>
<title>Heatmap d3</title>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<script>
var data = [
{"date":"2023-07-20","value":"19"},
{"date":"2023-07-21","value":"18"},
{"date":"2023-07-22","value":"25"},
{"date":"2023-07-23","value":"28"},
{"date":"2023-07-24","value":"18"},
{"date":"2023-07-25","value":"25"},
{"date":"2023-07-26","value":"28"}
]
var width = 900,
height = 405,
cellSize = 25; // cell size
week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var day = d3.timeFormat("%w"),
week = d3.timeFormat("%U"),
format = d3.timeFormat("%Y%m%d");
parseDate = d3.timeFormat("%Y%m%d").parse;
var color = d3.scaleLinear().range(["white", '#002b53'])
.domain([0, 1])
var svg = d3.select("body").append("svg")
.attr("height", height)
.attr("width", width)
.attr("class", "calendar")
.append("g")
.attr("transform", "translate(10, 10)");
var leg = svg.append("g")
.attr("class", "leg")
.attr("transform", "translate(10, 10)");
var chart = svg.append("g")
.attr("class", "chart")
.attr("transform", "translate(-500, 30)");
//
const d = new Date();
let name = month[d.getMonth()];
console.log("name", name);
let pickedYear = 2023;
let pickedMonth = 7;//July
const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
console.log("daysInMonth", daysInMonth(pickedYear, pickedMonth));
let dz = 1;
console.log("xx", d3.timeDays(new Date(pickedYear+"-"+pickedMonth+"-1"), new Date(pickedYear+"-"+pickedMonth+"-31")) )
console.log("ccccc", new Date(pickedYear+"-"+pickedMonth+"-"+daysInMonth) )
//
var rect = chart.selectAll(".day")
.data(function(d) { return d3.timeDays(new Date("2023-07-1"), new Date("2023-07-31")); })
.enter()
.append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })
.attr("fill",'red')
.attr("stroke",'black')
.datum(format);
var legend = leg.selectAll(".legend")
.data(week_days)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (((i+1) * 40)+8) + ",0)"; });
legend.append("text")
.attr("class", function(d,i){ return week_days[i] })
.style("text-anchor", "end")
.attr("dy", "-.25em")
.text(function(d,i){ return week_days[i] });
/*
d3.csv("data.csv", function(error, csv) {
csv.forEach(function(d) {
d.Comparison_Type = parseInt(d.Comparison_Type);
});
var Comparison_Type_Max = d3.max(csv, function(d) { return d.Comparison_Type; });
var data = d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return Math.sqrt(d[0].Comparison_Type / Comparison_Type_Max); })
.map(csv);
rect.filter(function(d) { return d in data; })
.attr("fill", function(d) { return color(data[d]); })
.attr("data-title", function(d) { return "value : "+Math.round(data[d]*100)});
$("rect").tooltip({container: 'body', html: true, placement:'top'});
});
*/
</script>
</body>
</html>from d3js Heatmap - month calendar
No comments:
Post a Comment