A GitHub Inspired Calendar / timelyportfolio

chart = {

const years = d3.nest()

.key(d => (new Date(d.date)).getFullYear())

.entries(data)

.reverse();

var chosen_year = 2013

// don't have to do this if only supplying one year

var filteredDf = df.filter(row => row.get('year') == chosen_year.toString());

function getCalendarData() {

return filteredDf.groupBy('date')

.aggregate(group => group.stat.sum('value'))

.rename('aggregation', 'value')

.map(function(row) {

var dt = new Date(row.get('date'));

dt.setUTCHours(12);

return row.set('date', dt);

})

.toCollection();

}

const svg = d3.select(DOM.svg(width, height))

.style("width", "100%")

.style("height", "auto")

var calCollection = getCalendarData();

var calendarData = [{key: chosen_year, values: calCollection}];

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 => colorScale(d.value))

.attr("stroke", 'white')

.attr("rx", 5)

.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);

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);

return svg.node();

}

parseTime = d3.timeFormat("%B %d");

tooltip = d3.select("body")

.append("div")

.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")

colorScale = d3.scaleOrdinal()

.domain(d3.extent(data, d => d.value))

.range(["#EBEDF0", "#9BE9A8", "#3FC463", "#2EA14E", "#1F6E39"]);

dfjs = require('https://bundle.run/dataframe-js@1.3.2')

Purpose-built for displays of data