chart = {
var chosen_year = 2020
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
var calendarData = [{key: chosen_year, values: rdataarray}];
const year = svg.selectAll("g")
.data(calendarData)
.enter().append("g")
.attr("class","calendar")
.attr("transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})`);
year.append("g")
.attr("class","calendar")
.selectAll("rect")
.data(d => d.values)
.enter().append("rect")
.attr("width", cellSize - 1)
.attr("height", cellSize - 1)
.attr("x", d => timeWeek.count(d3.timeYear(d.date), d.date) * cellSize + 0.5)
.attr("y", d => countDay(d.date) * cellSize + 0.5)
.attr('fill', d => d.value === 0 ? "#EBEDF0" : colorScale(d.value))
.attr("stroke", 'white')
.attr("rx", 5)
.on('mouseover', function (event, d) {
tooltip.html(d.value + " on " + parseTime(d.date))
return tooltip.style("visibility", "visible")
})
.on('mouseout', function (event, d) {
return tooltip.style("visibility", "hidden")
})
.on("mousemove", function(event, d) {
return tooltip.style("top", (event.pageY -20)+"px")
.style("left",(event.pageX +20)+"px");
})
/* THIS WORKS WITH v5
.on('mouseover', function (d, i) {
tooltip.html(d.value + " on " + parseTime(d.date))
return tooltip.style("visibility", "visible")
})
.on('mouseout', function (d, i) {
return tooltip.style("visibility", "hidden")
})
.on("mousemove", function( ){
return tooltip.style("top", (d3.event.pageY-20)+"px")
.style("left",(d3.event.pageX+20)+"px");
})
*/
// I want this to print only Mon, Wed, Fri
year.append("g")
.attr("text-anchor", "end")
.attr("class","calendar")
.selectAll("text")
.data((d3.range(7)).map(i => new Date(chosen_year, 0, i)))
.enter().append("text")
.attr("x", -5)
.attr("y", d => (countDay(d) + 0.5) * cellSize)
.attr("dy", "0.31em")
.text(formatDay)
.attr("fill", d => (countDay(d) % 2 ? "black" : "white"))
const month = year.append("g")
.attr("class","calendar")
.selectAll("g")
.data(d => d3.timeMonths(d3.timeMonth(d.values[0].date), d.values[d.values.length - 1].date))
.enter().append("g")
month.append("text")
.attr("class","calendar")
.attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2)
.attr("y", -5)
.text(formatMonth)
var legendsize = 16
const legend = svg.append("g")
.selectAll("legend")
.data([1,2,3,4,5])
.enter()
.append("rect")
.attr("x", function(d,i){ return 750 + i*(legendsize+5)})
.attr("y", 160)
.attr("width", legendsize)
.attr("height", legendsize)
.style("fill", function(d){ return colorLegendScale(d)})
.attr("rx", 5)
svg.append("text")
.attr("x", 705)
.attr("y", 173)
.attr("fill", "black")
.html("Less")
svg.append("text")
.attr("x", 865)
.attr("y", 173)
.attr("fill", "black")
.html("More")
return svg.node();
}
colorLegendScale = d3.scaleOrdinal()
.domain([1,2,3,4,5])
.range(["#EBEDF0", "#9BE9A8", "#3FC463", "#2EA14E", "#1F6E39"]);
tooltip = d3.select("body")
.append("div")
.attr("class", "calendar")
.style("position", "absolute")
.style("z-index", "100")
.style("visibility", "hidden")
.style("color", "white")
.style("background-color", "black")
.style("opacity", 0.7)
.style("border-radius", "5px")
.style("padding", "10px")
parseTime = d3.timeFormat("%b %d")
colorScale = d3.scaleOrdinal()
.domain(d3.extent(rdataarray, d => d.value))
.range(["#9BE9A8", "#3FC463", "#2EA14E", "#1F6E39"]);
md `# Data
Each column in R is converted to a an array. Therefore we need to combine the two arrays and turn the string dates into datetime objects`
stringToDate = d3.timeParse("%Y-%m-%d");
rdataarray = rdates.map(function (x, i) { return {date: stringToDate(x), value: rvalues[i]} });
rdates = rdata.map(function (x) { return x.date })
rvalues = rdata.map(function (x) { return x.value })
rdata = [{"date":"2020-01-01","value":1},{"date":"2020-02-02","value":2},{"date":"2020-03-03","value":3},{"date":"2020-04-04","value":4},{"date":"2020-05-05","value":5},{"date":"2020-06-06","value":6},{"date":"2020-07-07","value":7},{"date":"2020-08-08","value":8},{"date":"2020-09-09","value":9},{"date":"2020-10-10","value":10},{"date":"2020-11-11","value":11},{"date":"2020-12-12","value":12},{"date":"2020-01-02","value":0},{"date":"2020-01-03","value":0},{"date":"2020-01-04","value":0},{"date":"2020-01-05","value":0},{"date":"2020-01-06","value":0},{"date":"2020-01-07","value":0},{"date":"2020-01-08","value":0},{"date":"2020-01-09","value":0},{"date":"2020-01-10","value":0},{"date":"2020-01-11","value":0},{"date":"2020-01-12","value":0},{"date":"2020-01-13","value":0},{"date":"2020-01-14","value":0},{"date":"2020-01-15","value":0},{"date":"2020-01-16","value":0},{"date":"2020-01-17","value":0},{"date":"2020-01-18","value":0},{"date":"2020-01-19","value":0},{"date":"2020-01-20","value":0},{"date":"2020-01-21","value":0},{"date":"2020-01-22","value":0},{"date":"2020-01-23","value":0},{"date":"2020-01-24","value":0},{"date":"2020-01-25","value":0},{"date":"2020-01-26","value":0},{"date":"2020-01-27","value":0},{"date":"2020-01-28","value":0},{"date":"2020-01-29","value":0},{"date":"2020-01-30","value":0},{"date":"2020-01-31","value":0},{"date":"2020-02-01","value":0},{"date":"2020-02-03","value":0},{"date":"2020-02-04","value":0},{"date":"2020-02-05","value":0},{"date":"2020-02-06","value":0},{"date":"2020-02-07","value":0},{"date":"2020-02-08","value":0},{"date":"2020-02-09","value":0},{"date":"2020-02-10","value":0},{"date":"2020-02-11","value":0},{"date":"2020-02-12","value":0},{"date":"2020-02-13","value":0},{"date":"2020-02-14","value":0},{"date":"2020-02-15","value":0},{"date":"2020-02-16","value":0},{"date":"2020-02-17","value":0},{"date":"2020-02-18","value":0},{"date":"2020-02-19","value":0},{"date":"2020-02-20","value":0},{"date":"2020-02-21","value":0},{"date":"2020-02-22","value":0},{"date":"2020-02-23","value":0},{"date":"2020-02-24","value":0},{"date":"2020-02-25","value":0},{"date":"2020-02-26","value":0},{"date":"2020-02-27","value":0},{"date":"2020-02-28","value":0},{"date":"2020-02-29","value":0},{"date":"2020-03-01","value":0},{"date":"2020-03-02","value":0},{"date":"2020-03-04","value":0},{"date":"2020-03-05","value":0},{"date":"2020-03-06","value":0},{"date":"2020-03-07","value":0},{"date":"2020-03-08","value":0},{"date":"2020-03-09","value":0},{"date":"2020-03-10","value":0},{"date":"2020-03-11","value":0},{"date":"2020-03-12","value":0},{"date":"2020-03-13","value":0},{"date":"2020-03-14","value":0},{"date":"2020-03-15","value":0},{"date":"2020-03-16","value":0},{"date":"2020-03-17","value":0},{"date":"2020-03-18","value":0},{"date":"2020-03-19","value":0},{"date":"2020-03-20","value":0},{"date":"2020-03-21","value":0},{"date":"2020-03-22","value":0},{"date":"2020-03-23","value":0},{"date":"2020-03-24","value":0},{"date":"2020-03-25","value":0},{"date":"2020-03-26","value":0},{"date":"2020-03-27","value":0},{"date":"2020-03-28","value":0},{"date":"2020-03-29","value":0},{"date":"2020-03-30","value":0},{"date":"2020-03-31","value":0},{"date":"2020-04-01","value":0},{"date":"2020-04-02","value":0},{"date":"2020-04-03","value":0},{"date":"2020-04-05","value":0},{"date":"2020-04-06","value":0},{"date":"2020-04-07","value":0},{"date":"2020-04-08","value":0},{"date":"2020-04-09","value":0},{"date":"2020-04-10","value":0},{"date":"2020-04-11","value":0},{"date":"2020-04-12","value":0},{"date":"2020-04-13","value":0},{"date":"2020-04-14","value":0},{"date":"2020-04-15","value":0},{"date":"2020-04-16","value":0},{"date":"2020-04-17","value":0},{"date":"2020-04-18","value":0},{"date":"2020-04-19","value":0},{"date":"2020-04-20","value":0},{"date":"2020-04-21","value":0},{"date":"2020-04-22","value":0},{"date":"2020-04-23","value":0},{"date":"2020-04-24","value":0},{"date":"2020-04-25","value":0},{"date":"2020-04-26","value":0},{"date":"2020-04-27","value":0},{"date":"2020-04-28","value":0},{"date":"2020-04-29","value":0},{"date":"2020-04-30","value":0},{"date":"2020-05-01","value":0},{"date":"2020-05-02","value":0},{"date":"2020-05-03","value":0},{"date":"2020-05-04","value":0},{"date":"2020-05-06","value":0},{"date":"2020-05-07","value":0},{"date":"2020-05-08","value":0},{"date":"2020-05-09","value":0},{"date":"2020-05-10","value":0},{"date":"2020-05-11","value":0},{"date":"2020-05-12","value":0},{"date":"2020-05-13","value":0},{"date":"2020-05-14","value":0},{"date":"2020-05-15","value":0},{"date":"2020-05-16","value":0},{"date":"2020-05-17","value":0},{"date":"2020-05-18","value":0},{"date":"2020-05-19","value":0},{"date":"2020-05-20","value":0},{"date":"2020-05-21","value":0},{"date":"2020-05-22","value":0},{"date":"2020-05-23","value":0},{"date":"2020-05-24","value":0},{"date":"2020-05-25","value":0},{"date":"2020-05-26","value":0},{"date":"2020-05-27","value":0},{"date":"2020-05-28","value":0},{"date":"2020-05-29","value":0},{"date":"2020-05-30","value":0},{"date":"2020-05-31","value":0},{"date":"2020-06-01","value":0},{"date":"2020-06-02","value":0},{"date":"2020-06-03","value":0},{"date":"2020-06-04","value":0},{"date":"2020-06-05","value":0},{"date":"2020-06-07","value":0},{"date":"2020-06-08","value":0},{"date":"2020-06-09","value":0},{"date":"2020-06-10","value":0},{"date":"2020-06-11","value":0},{"date":"2020-06-12","value":0},{"date":"2020-06-13","value":0},{"date":"2020-06-14","value":0},{"date":"2020-06-15","value":0},{"date":"2020-06-16","value":0},{"date":"2020-06-17","value":0},{"date":"2020-06-18","value":0},{"date":"2020-06-19","value":0},{"date":"2020-06-20","value":0},{"date":"2020-06-21","value":0},{"date":"2020-06-22","value":0},{"date":"2020-06-23","value":0},{"date":"2020-06-24","value":0},{"date":"2020-06-25","value":0},{"date":"2020-06-26","value":0},{"date":"2020-06-27","value":0},{"date":"2020-06-28","value":0},{"date":"2020-06-29","value":0},{"date":"2020-06-30","value":0},{"date":"2020-07-01","value":0},{"date":"2020-07-02","value":0},{"date":"2020-07-03","value":0},{"date":"2020-07-04","value":0},{"date":"2020-07-05","value":0},{"date":"2020-07-06","value":0},{"date":"2020-07-08","value":0},{"date":"2020-07-09","value":0},{"date":"2020-07-10","value":0},{"date":"2020-07-11","value":0},{"date":"2020-07-12","value":0},{"date":"2020-07-13","value":0},{"date":"2020-07-14","value":0},{"date":"2020-07-15","value":0},{"date":"2020-07-16","value":0},{"date":"2020-07-17","value":0},{"date":"2020-07-18","value":0},{"date":"2020-07-19","value":0},{"date":"2020-07-20","value":0},{"date":"2020-07-21","value":0},{"date":"2020-07-22","value":0},{"date":"2020-07-23","value":0},{"date":"2020-07-24","value":0},{"date":"2020-07-25","value":0},{"date":"2020-07-26","value":0},{"date":"2020-07-27","value":0},{"date":"2020-07-28","value":0},{"date":"2020-07-29","value":0},{"date":"2020-07-30","value":0},{"date":"2020-07-31","value":0},{"date":"2020-08-01","value":0},{"date":"2020-08-02","value":0},{"date":"2020-08-03","value":0},{"date":"2020-08-04","value":0},{"date":"2020-08-05","value":0},{"date":"2020-08-06","value":0},{"date":"2020-08-07","value":0},{"date":"2020-08-09","value":0},{"date":"2020-08-10","value":0},{"date":"2020-08-11","value":0},{"date":"2020-08-12","value":0},{"date":"2020-08-13","value":0},{"date":"2020-08-14","value":0},{"date":"2020-08-15","value":0},{"date":"2020-08-16","value":0},{"date":"2020-08-17","value":0},{"date":"2020-08-18","value":0},{"date":"2020-08-19","value":0},{"date":"2020-08-20","value":0},{"date":"2020-08-21","value":0},{"date":"2020-08-22","value":0},{"date":"2020-08-23","value":0},{"date":"2020-08-24","value":0},{"date":"2020-08-25","value":0},{"date":"2020-08-26","value":0},{"date":"2020-08-27","value":0},{"date":"2020-08-28","value":0},{"date":"2020-08-29","value":0},{"date":"2020-08-30","value":0},{"date":"2020-08-31","value":0},{"date":"2020-09-01","value":0},{"date":"2020-09-02","value":0},{"date":"2020-09-03","value":0},{"date":"2020-09-04","value":0},{"date":"2020-09-05","value":0},{"date":"2020-09-06","value":0},{"date":"2020-09-07","value":0},{"date":"2020-09-08","value":0},{"date":"2020-09-10","value":0},{"date":"2020-09-11","value":0},{"date":"2020-09-12","value":0},{"date":"2020-09-13","value":0},{"date":"2020-09-14","value":0},{"date":"2020-09-15","value":0},{"date":"2020-09-16","value":0},{"date":"2020-09-17","value":0},{"date":"2020-09-18","value":0},{"date":"2020-09-19","value":0},{"date":"2020-09-20","value":0},{"date":"2020-09-21","value":0},{"date":"2020-09-22","value":0},{"date":"2020-09-23","value":0},{"date":"2020-09-24","value":0},{"date":"2020-09-25","value":0},{"date":"2020-09-26","value":0},{"date":"2020-09-27","value":0},{"date":"2020-09-28","value":0},{"date":"2020-09-29","value":0},{"date":"2020-09-30","value":0},{"date":"2020-10-01","value":0},{"date":"2020-10-02","value":0},{"date":"2020-10-03","value":0},{"date":"2020-10-04","value":0},{"date":"2020-10-05","value":0},{"date":"2020-10-06","value":0},{"date":"2020-10-07","value":0},{"date":"2020-10-08","value":0},{"date":"2020-10-09","value":0},{"date":"2020-10-11","value":0},{"date":"2020-10-12","value":0},{"date":"2020-10-13","value":0},{"date":"2020-10-14","value":0},{"date":"2020-10-15","value":0},{"date":"2020-10-16","value":0},{"date":"2020-10-17","value":0},{"date":"2020-10-18","value":0},{"date":"2020-10-19","value":0},{"date":"2020-10-20","value":0},{"date":"2020-10-21","value":0},{"date":"2020-10-22","value":0},{"date":"2020-10-23","value":0},{"date":"2020-10-24","value":0},{"date":"2020-10-25","value":0},{"date":"2020-10-26","value":0},{"date":"2020-10-27","value":0},{"date":"2020-10-28","value":0},{"date":"2020-10-29","value":0},{"date":"2020-10-30","value":0},{"date":"2020-10-31","value":0},{"date":"2020-11-01","value":0},{"date":"2020-11-02","value":0},{"date":"2020-11-03","value":0},{"date":"2020-11-04","value":0},{"date":"2020-11-05","value":0},{"date":"2020-11-06","value":0},{"date":"2020-11-07","value":0},{"date":"2020-11-08","value":0},{"date":"2020-11-09","value":0},{"date":"2020-11-10","value":0},{"date":"2020-11-12","value":0},{"date":"2020-11-13","value":0},{"date":"2020-11-14","value":0},{"date":"2020-11-15","value":0},{"date":"2020-11-16","value":0},{"date":"2020-11-17","value":0},{"date":"2020-11-18","value":0},{"date":"2020-11-19","value":0},{"date":"2020-11-20","value":0},{"date":"2020-11-21","value":0},{"date":"2020-11-22","value":0},{"date":"2020-11-23","value":0},{"date":"2020-11-24","value":0},{"date":"2020-11-25","value":0},{"date":"2020-11-26","value":0},{"date":"2020-11-27","value":0},{"date":"2020-11-28","value":0},{"date":"2020-11-29","value":0},{"date":"2020-11-30","value":0},{"date":"2020-12-01","value":0},{"date":"2020-12-02","value":0},{"date":"2020-12-03","value":0},{"date":"2020-12-04","value":0},{"date":"2020-12-05","value":0},{"date":"2020-12-06","value":0},{"date":"2020-12-07","value":0},{"date":"2020-12-08","value":0},{"date":"2020-12-09","value":0},{"date":"2020-12-10","value":0},{"date":"2020-12-11","value":0},{"date":"2020-12-13","value":0},{"date":"2020-12-14","value":0},{"date":"2020-12-15","value":0},{"date":"2020-12-16","value":0},{"date":"2020-12-17","value":0},{"date":"2020-12-18","value":0},{"date":"2020-12-19","value":0},{"date":"2020-12-20","value":0},{"date":"2020-12-21","value":0},{"date":"2020-12-22","value":0},{"date":"2020-12-23","value":0},{"date":"2020-12-24","value":0},{"date":"2020-12-25","value":0},{"date":"2020-12-26","value":0},{"date":"2020-12-27","value":0},{"date":"2020-12-28","value":0},{"date":"2020-12-29","value":0},{"date":"2020-12-30","value":0},{"date":"2020-12-31","value":0}]
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.
