Published
Edited
Sep 30, 2019
html`
<div id="legenda"></div>
<div id="calendar"></div>`
chart = {
//const svg = d3.select(DOM.svg(width, height))
const mes = d3.select("#calendar").selectAll("svg")
.data(months)
.enter().append("svg")
.attr("class", "month")
.attr("width", (cellSize * 7) + (cellMargin * 8) )
// .attr("height", function(d) {
// let rows = calendarRows(d);
// return (cellSize * rows) + (cellMargin * (rows + 1)) + 20; // the 20 is for the month labels
// })
.attr("height", 170) // tamanho fixo para alinhar calendários
.append("g")
mes.append("text")
.attr("class", "month-name")
.attr("x", ((cellSize * 7) + (cellMargin * 8)) / 2 )
.attr("y", 15)
.attr("text-anchor", "middle")
.text(function(d) { return monthName(d); })
mes.selectAll(".weekday-name").data(diaSemana)
.enter()
.append("text")
.attr("class", "weekday-name")
.attr("x", (d,i) => (i * cellSize) + (i * cellMargin) + cellMargin + (cellSize/2))
.attr("y", 30)
.attr("text-anchor", "middle")
.text(d => d)
const rect = mes.selectAll("rect.day")
.data(function(d, i) {
return d3.timeDays(d, new Date(d.getFullYear(), d.getMonth()+1, 1));
})
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("rx", 3).attr("ry", 3) // rounded corners
.attr("fill", '#e4e4e4') // default light grey fill
.attr("x", function(d) {
return (day(d) * cellSize) + (day(d) * cellMargin) + cellMargin;
})
.attr("y", function(d) {
return ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellSize) +
((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellMargin) +
cellMargin + 30;
})
.on("mouseover", function(d) {
d3.select(this).classed('hover', true);
})
.on("mouseout", function(d) {
d3.select(this).classed('hover', false);
})
.datum(format);
// rect.append("title")
// .text(function(d) { return titleFormat(new Date(d)); });
mes.selectAll(".diaLabel")
.data(function(d, i) {
return d3.timeDays(d, new Date(d.getFullYear(), d.getMonth()+1, 1));
})
.enter().append("text")
.text(d => diaMes(new Date(d)))
.attr("class", "diaLabel")
.attr("x", function(d) {
return (day(d) * cellSize) + (day(d) * cellMargin + (cellSize / 1.8));
})
.attr("y", function(d) {
return ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellSize) +
((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellMargin) +
cellMargin + 44;
})
rect.filter((d) => { return d in lookup; })
.style("fill", d => {
let i;
for (i = 0; i < data.length; i++) {
if (data[i].today == d){
return cor(data[i].categoria)}
}})
.classed("clickable", true)
.on("click", function(d){
if(d3.select(this).classed('focus')){
d3.select(this).classed('focus', false);
} else {
d3.select(this).classed('focus', true)
}
// funçãoAçãoEtc();
})
//return svg.node();
}
legenda = {
const legendas_g = d3.select("#legenda").selectAll("svg")
.data(categorias).enter()
.append("svg")
.attr("height", 26)
.attr("width", 110)
const legendas = legendas_g.append("rect")
.attr("width", 15).attr("height", 15)
.attr("rx", 3).attr("ry", 3) // rounded corners
.attr("fill", cor)
const labelLegendas = legendas_g.append("text")
.attr("transform", "translate(20,14)")
.text(d => d)
}
height = 400
cor = d3.scaleOrdinal()
.domain(d3.extent(lookup, d => d.values))
.range(["#b94975",
"#61bf7e",
"#5f4097",
"#b6b142",
"#6d85db",
"#aa8a41",
"#c16abb",
"#bd503f"])
corQuant = d3.scaleQuantize()
.domain(d3.extent(count, d => d.values))
.range([0.4,1])
diaSemana = ["D","S","T","Q","Q","S","S"]
categorias = d3.map(data, function(d){return capitalizeFirstLetter(d.categoria);}).keys()
function capitalizeFirstLetter(string) {
return string[0].toUpperCase() + string.slice(1).toLowerCase();
}
locale = d3.json("https://unpkg.com/d3-time-format@2/locale/pt-BR.json", function(error, locale) {
if (error) throw error;
return d3.timeFormatDefaultLocale(locale);
});
d3 = require("d3@^5")
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.
