Assignment 3 - Part 2 with Horizontal Bars / ashjacs7

chosen_date = "2017-05-13"

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

chart = {

const years = d3.nest()

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

.entries(data)

.reverse();

var dataFiltered = years.filter(function (d) { return d.key === chosen_year.toString() })

// console.log(dataFiltered);

// console.log(chosen_year);

var selectedDate = null;

var selectReason = null;

var filteredDf;

function updateFilteredDf() {

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

if (selectedDate != null)

df2=df2.filter(row => row.get('date') == selectedDate);

if (selectReason != null)

df2=df2.filter(row => row.get('reason') == selectReason);

// console.log(df2.dim());

filteredDf = df2;

// console.log(filteredDf.dim());

}

updateFilteredDf();

// console.log();

function getReasonData() {

return filteredDf.groupBy('reason')

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

.rename('aggregation', 'value')

.sortBy('value', true)

.toCollection();

}

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

}

// var drawCalendarCallback;

// var drawBarCallaback;

var redrawAll;

var y;

function drawBars() {

svg.selectAll(".bar").remove()

var reasonDf = getReasonData();

console.log(reasonDf);

var x = d3.scaleLinear()

.domain([0, d3.max(reasonDf, d => d.value*1.1)])

.range([margin.left, width - margin.right])

var xAxis = g => g

.attr("transform", `translate(0,280)`)

.call(d3.axisTop(x).ticks(width / 80))

.call(g => g.select(".domain").remove())

if (selectReason == null)

y = d3.scaleBand()

.domain(reasonDf.map(d => d.reason))

.range([30, 490])

.padding(0.1)

var yAxis = g => g

.attr("transform", `translate(${margin.left},250)`)

.call(d3.axisLeft(y).tickSizeOuter(0))

// console.log(df.reason)

// console.log("aaa");

// console.log(selectedDate);

// console.log("aaa");

// console.log("aaa2");

// console.log(reasonDf);

svg.append("g")

.attr("fill", "steelblue")

.attr("class","bar")

.selectAll("rect")

.data(reasonDf)

.enter().append("rect")

.attr("x", x(0))

.attr("y", d => y(d.reason) + 250)

.attr("width", d => x(d.value) - x(0))

.attr("height", y.bandwidth())

.on('click', function(d) {

// console.log(d);

if (selectReason == d.reason) {

selectReason = null;

} else {

selectReason = d.reason;

selectedDate = null;

}

updateFilteredDf();

redrawAll();

// drawBarCallaback()

});

svg.append("g")

.attr("fill", "white")

.attr("class","bar")

.attr("text-anchor", "end")

.style("font", "12px sans-serif")

.selectAll("text")

.data(reasonDf)

.enter().append("text")

.attr("x", d => x(d.value) - 4)

.attr("y", d => y(d.reason) + 250 + y.bandwidth() / 2)

.attr("dy", "0.35em")

.text(d => d.value);

svg.append("g")

.attr("class","bar")

.call(xAxis);

svg.append("g")

.attr("class","bar")

.call(yAxis);

}

// const years = [2016];

// var chosen_date = "2017-05-13";

// var dataFiltered2 = nested.filter(function (d) { return d.key === chosen_date });

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

.style("font", "10px sans-serif")

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

.style("height", "auto");

// console.log("DF: ", dataFiltered);

// console.log(years);

// console.log("DF:: ", dataFiltered);

function drawCalendar() {

svg.selectAll(".bar").remove();

svg.selectAll(".calendar").remove();

var calCollection = getCalendarData();

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

console.log("C: ", calendarData);

var maxVal = d3.max(calCollection, d => d.value);

var color = d3.scaleSequential(d3.interpolatePiYG).domain([-1.3*maxVal, 1*maxVal])

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("text")

.attr("class","calendar")

.attr("x", -5)

.attr("y", -5)

.attr("font-weight", "bold")

.attr("text-anchor", "end")

.text(d => d.key);

year.append("g")

.attr("text-anchor", "end")

.attr("class","calendar")

.selectAll("text")

.data((weekday === "weekday" ? d3.range(2, 7) : 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);

// var chosen_date = "2017-03-01";

// var dataFiltered3 = nested.filter(function (d) { return d.key === chosen_date })[0].values;

// console.log("DF3: ", dataFiltered3);

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 => color(-1 * d.value))

.on('click', function(d) {

console.log("Chosen date: ", formatDate(d.date));

var b = formatDate(d.date);

var a = b.split("/")

if (parseInt(a[0]) < 10) { a[0] = "0" + a[0]; }

if (parseInt(a[1]) < 10) { a[1] = "0" + a[1]; }

var chosen_date = a[2] + "-" + a[0] + "-" + a[1]

console.log("chosen_date: ", chosen_date);

// dataFiltered3 = nested.filter(function (d) { return d.key === chosen_date });

// console.log(dataFiltered3);

// drawBars(dataFiltered3[0].values);

// selectedDate = chosen_date;

// selectReason = null;

if (selectedDate == chosen_date) {

selectedDate = null;

} else {

selectedDate = chosen_date;

selectReason = null;

}

updateFilteredDf();

// redrawAll();

drawBars();

// chosen_date = b;

})

.append("title")

.text(d => `${formatDate(d.date)}: ${d.value}`);

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.filter((d, i) => i).append("path")

.attr("class","calendar")

.attr("fill", "none")

.attr("stroke", "#fff")

.attr("stroke-width", 3)

.attr("d", pathMonth);

month.append("text")

.attr("class","calendar")

.attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2)

.attr("y", -5)

.text(formatMonth);

}

// drawCalendarCallback = drawCalendar;

// drawBarCallaback = drawBars;

redrawAll = function() {

drawCalendar();

drawBars();

}

redrawAll();

// var dataFiltered2 = nested.filter(function (d) { return d.key === "2017-02-02" })[0].values;

// console.log("DF33: ", dataFiltered3);

// drawBars()

return svg.node();

}

// height = cellSize * (weekday === "weekday" ? 7 : 9)

height = 500

formatDate = d3.timeFormat("%x")

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

// md` # Drill down attempt`

data2 =

d3.csv("https://gist.githubusercontent.com/ashjacs7/55b5820f397bb835548b0c85bd5facec/raw/4522b087abfa182fb453ff83f955aabe0152c543/data_all_years.csv").then(

function(data) {

data.forEach(function(d) {

d["value"] = +d["value"];

var date_t = new Date(d["date"]);

date_t.setDate(date_t.getDate() + 1)

d["date"] = date_t

});

return data;

}

)

nested = d3.nest()

.key(d => d.date.toISOString().slice(0,10))

.entries(data2)

.reverse()

reasonNested = d3.nest()

.key(d => d.reason)

.entries(data2)

.reverse()

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

y = d3.scaleBand()

.domain(data2.map(d => d.reason))

.range([30, 490])

.padding(0.1)

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

margin = ({top: 30, right: 0, bottom: 10, left: 200})

Purpose-built for displays of data