Public
Edited
Jan 12, 2021
2 stars
cell = {
const calendar = d3.select('#calendar tbody');
const tr = calendar.selectAll('tr').data(yearlyData.entries()).enter().append('tr');
tr.append('td').attr('class', 'label').text(d => d.key);
const td = tr
.selectAll('.box')
.data(function(d) {
const MathData = Object.keys(month).map(i => {
const val = d.value.get(i);
const length = !val ? 0 : val.length;
return { label: month[i], val: val, length: length };
});
return MathData;
})
.enter()
.append('td')
.attr('class', 'box')
.attr('data-label', d => d.label);
const cell = td
.selectAll('.cell')
.data(d => !d.val ? [] : d.val )
.enter()
.append('a')
.attr('class', 'cell')
.attr('target', '_blank')
.attr('href', d => d.URL)
.text(d => d['タイプ'][0]) //頭文字だけ表示する
.style('background-color', d => color[d['タイプ']]);
return cell;
}
legend = {
const legend = d3.select('.legend');
const data = Object.keys(color).map(key => {
return { key: key, color: color[key] };
});
legend
.selectAll('li')
.data(data)
.enter()
.append('li')
.attr('class', d => d.key)
.text(d => d.key)
return legend
}
tooltip = {
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
cell
.on("mouseover", d => {
const inner = [[d["年"], d["月"], d["日"]].join("/"), d["タイトル"]].join(" ");
tooltip.text(inner);
return tooltip.style("visibility", "visible");
})
.on("mousemove", () =>{
let x = d3.event.pageX;
if(x > width*0.75) x = x-width/4;
return tooltip.style("top", (d3.event.pageY-40)+"px").style("left",(x)+"px");
})
.on("mouseout", () => tooltip.style("visibility", "hidden"));
return tooltip;
}
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.
