diff --git a/Gemfile b/Gemfile
index ca9cbca..00cd64d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -3,6 +3,8 @@ source 'https://rubygems.org'
gem 'nanoc'
+gem 'uglifier', '>= 4.0.0'
+
# General filtering
gem 'coffee-script'
gem 'icalendar' # ical files
@@ -33,7 +35,8 @@ end
group :production do
# Autoprefixing for class
gem 'autoprefixer-rails'
- gem 'html_press'
+ gem 'htmlcompressor'
+ gem 'babel-transpiler'
end
group :nanoc do
diff --git a/Gemfile.lock b/Gemfile.lock
index 6fb51d5..b867f39 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -3,10 +3,14 @@ GEM
specs:
addressable (2.5.2)
public_suffix (>= 2.0.2, < 4.0)
- adsf (1.4.0)
+ adsf (1.4.1)
rack (>= 1.0.0, < 3.0.0)
- autoprefixer-rails (7.2.5)
+ autoprefixer-rails (8.5.0)
execjs
+ babel-source (5.8.35)
+ babel-transpiler (0.7.0)
+ babel-source (>= 4.0, < 6)
+ execjs (~> 2.0)
builder (3.2.3)
coderay (1.1.2)
coffee-script (2.4.1)
@@ -17,17 +21,13 @@ GEM
concurrent-ruby (1.0.5)
cri (2.10.1)
colored (~> 1.2)
- css_press (0.3.2)
- csspool-st (= 3.1.2)
- json
- csspool-st (3.1.2)
ddmemoize (1.0.0)
ddmetrics (~> 1.0)
ref (~> 2.0)
ddmetrics (1.0.0)
ddplugin (1.0.2)
execjs (2.7.0)
- ffi (1.9.18)
+ ffi (1.9.23)
formatador (0.2.5)
guard (2.14.2)
formatador (>= 0.2.4)
@@ -46,11 +46,7 @@ GEM
hamster (3.0.0)
concurrent-ruby (~> 1.0)
highline (1.7.10)
- html_press (0.8.2)
- htmlentities
- multi_css (>= 0.1.0)
- multi_js (>= 0.1.0)
- htmlentities (4.3.4)
+ htmlcompressor (0.4.0)
icalendar (2.4.1)
json (2.1.0)
kramdown (1.16.2)
@@ -59,13 +55,9 @@ GEM
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
ruby_dep (~> 1.2)
- lumberjack (1.0.12)
+ lumberjack (1.0.13)
method_source (0.9.0)
mini_portile2 (2.3.0)
- multi_css (0.1.0)
- css_press
- multi_js (0.1.0)
- uglifier (~> 2)
nanoc (4.9.2)
addressable (~> 2.5)
cri (~> 2.8)
@@ -78,7 +70,7 @@ GEM
slow_enumerator_tools (~> 1.0)
tomlrb (~> 1.2)
nenv (0.3.0)
- nokogiri (1.8.1)
+ nokogiri (1.8.2)
mini_portile2 (~> 2.3.0)
notiffany (0.1.1)
nenv (~> 0.1)
@@ -89,14 +81,14 @@ GEM
coderay (~> 1.1.0)
method_source (~> 0.9.0)
public_suffix (3.0.2)
- rack (2.0.3)
- rb-fsevent (0.10.2)
+ rack (2.0.5)
+ rb-fsevent (0.10.3)
rb-inotify (0.9.10)
ffi (>= 0.5.0, < 2)
ref (2.0.0)
ruby_dep (1.5.0)
rubypants (0.7.0)
- sass (3.5.5)
+ sass (3.5.6)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
@@ -112,9 +104,8 @@ GEM
tomlrb (1.2.6)
typogruby (1.0.18)
rubypants
- uglifier (2.7.2)
- execjs (>= 0.3.0)
- json (>= 1.8.0)
+ uglifier (4.1.10)
+ execjs (>= 0.3.0, < 3)
w3c_validators (1.3.3)
json (>= 1.8)
nokogiri (~> 1.6)
@@ -126,11 +117,12 @@ PLATFORMS
DEPENDENCIES
adsf
autoprefixer-rails
+ babel-transpiler
builder
coffee-script
guard-nanoc
highline
- html_press
+ htmlcompressor
icalendar
kramdown
nanoc
@@ -140,6 +132,7 @@ DEPENDENCIES
terminal-notifier-guard
therubyracer
typogruby
+ uglifier (>= 4.0.0)
w3c_validators
words_counted
diff --git a/Rules b/Rules
index 5631b88..0b7b3f9 100644
--- a/Rules
+++ b/Rules
@@ -170,7 +170,7 @@ compile '/assets/scripts/**/*.coffee' do
end
compile '/assets/scripts/**/*.js' do
- filter :uglify_js
+ filter :uglify_js, harmony: true
end
ignore '/assets/stylesheets/includes/**/*'
diff --git a/content/assets/scripts/datavis/blog.js b/content/assets/scripts/datavis/blog.js
new file mode 100644
index 0000000..868d612
--- /dev/null
+++ b/content/assets/scripts/datavis/blog.js
@@ -0,0 +1,237 @@
+// BUBBLEMAP
+(function () {
+ let dayFilter = new Set();
+
+ function applyFilter(data) {
+ if (dayFilter.size > 0) {
+ return _.filter(data, e => dayFilter.has(moment(e.starttime).day()))
+ }
+
+ return data;
+ }
+
+ function filterData(data, beginTime, endTime) {
+ data = applyFilter(data);
+ return _(data).filter(e => beginTime <= moment(e.starttime) && moment(e.starttime) <= endTime).value();
+ }
+
+ d3.csv(`/csvdata/punchcard.csv`).then(data => {
+ // Sort the data chronologically
+ data = _.sortBy(data, e => Date.parse(e.starttime));
+
+ const chart = bubbleMap();
+ const selection = d3.select('#leafletmap')
+ .datum(data)
+ .call(chart);
+
+ const times = _(data).map(e => moment(e.starttime));
+
+ const slider = timeSlider()
+ .domain([times.min().toDate(), times.max().toDate()])
+ .data(times.value())
+ .on('slide.hm', domain => {
+ const beginTime = domain[0];
+ const endTime = domain[1];
+
+ const d = filterData(data, beginTime, endTime);
+ selection.datum(d).call(chart)
+ });
+ const sel2 = d3.select('#slider1').call(slider);
+
+ d3.selectAll("#dayButtons .button")
+ .on("click", function () {
+ const btn = d3.select(this);
+ const num = +btn.attr('data-day-idx');
+ const selected = btn.classed('is-outlined');
+
+ if (num >= 0) {
+ selected ? dayFilter.add(num) : dayFilter.delete(num) ;
+ btn.classed('is-outlined', !selected)
+ } else {
+ dayFilter = new Set();
+ d3.selectAll("#dayButtons .button").classed('is-outlined', true);
+ }
+
+ const filtered = applyFilter(data);
+
+ const sliderData = _(filtered).map(e => moment(e.starttime).toDate()).value();
+ selection.datum(filtered).call(chart);
+ slider.data(sliderData);
+ });
+
+ var playing = false;
+ var interval;
+
+ d3.select('#playButton')
+ .on('click', function () {
+ if(playing) {
+ clearInterval(interval);
+ playing = false;
+ d3.select(this).text('Play');
+ return;
+ }
+
+ playing = true;
+ d3.select(this).text('Pause');
+
+ let beginTime = moment(slider.slider()[0]);
+ let endTime = moment(slider.slider()[1]);
+
+ interval = setInterval(() => {
+ const bt = beginTime.toDate();
+ const et = endTime.toDate();
+
+ if (endTime < times.max()) {
+ const filtData = filterData(data, bt, et);
+
+ selection.datum(filtData).call(chart);
+ slider.slider([bt, et]);
+
+ beginTime.add(1, 'd');
+ endTime.add(1, 'd');
+ } else {
+ clearInterval(interval);
+ }
+ }, 20);
+
+ d3.select(this).text('Pause');
+ });
+ });
+})();
+
+// PUNCHCARD
+(function () {
+ d3.csv(`/csvdata/punchcard.csv`, e => { return { ...e, starttime: d3.isoParse(e.starttime) } }).then(data => {
+ function prepareData(data) {
+ let grouped = _(data).groupBy(e => e.name).mapValues(e => _(e).groupBy(e => e.starttime.getHours()).mapValues(e => e.length).value()).value();
+ grouped = _(grouped).toPairs().sortBy(e => -_(e[1]).values().sum()).fromPairs().value();
+
+ return grouped;
+ }
+
+ const grouped = prepareData(data);
+
+ const pChart = punchCard().data(grouped);
+ const svg = d3.select('svg#punchcard').call(pChart);
+
+ const times = _(data).map(e => e.starttime);
+
+ function filterData(data, beginTime, endTime) {
+ return _(data).filter(e => beginTime <= e.starttime && e.starttime <= endTime).value();
+ }
+
+ const slider = timeSlider()
+ .domain([times.min(), times.max()])
+ .data(times.value())
+ .on('slide.punchcard', domain => {
+ const beginTime = domain[0];
+ const endTime = domain[1];
+
+ const d = filterData(data, beginTime, endTime);
+ pChart.data(prepareData(d));
+ });
+ const sel2 = d3.select('#slider2').call(slider);
+
+ var playing = false;
+ var interval;
+
+ d3.select('#playButton2')
+ .on('click', function () {
+ if(playing) {
+ clearInterval(interval);
+ playing = false;
+ d3.select(this).text('Play');
+ return;
+ }
+
+ playing = true;
+ d3.select(this).text('Pause');
+
+ let beginTime = moment(slider.slider()[0]);
+ let endTime = moment(slider.slider()[1]);
+
+ interval = setInterval(() => {
+ const bt = beginTime.toDate();
+ const et = endTime.toDate();
+
+ if (endTime < times.max()) {
+ const filtData = prepareData(filterData(data, bt, et));
+
+ pChart.data(filtData);
+ slider.slider([bt, et]);
+
+ beginTime.add(1, 'd');
+ endTime.add(1, 'd');
+ } else {
+ clearInterval(interval);
+ }
+ }, 20);
+ });
+ });
+})();
+
+// INSTANCE CHART
+(function () {
+ d3.csv(`/csvdata/punchcard.csv`, e => {
+ return { ...e, starttime: d3.isoParse(e.starttime) }
+ }).then(data => {
+ function prepareData(data, interval) {
+ data = _(data).sortBy(e => e.starttime).groupBy('name').value();
+ return data
+ }
+
+ const prepped = prepareData(data, d3.timeDay);
+
+ let chart = instanceChart().data(prepped);
+
+ d3.select('svg#instance').call(chart);
+ });
+})();
+
+// RANKING CHART
+(function () {
+ function prepareData(data, interval) {
+ let l = data.length;
+
+ data = _(data).sortBy(e => e.starttime).value();
+
+ let slices = [];
+ let slice = []
+ let itv = interval(data[0].starttime);
+
+ for (const d of data) {
+ slice.push(d);
+ let nItv = interval(d.starttime);
+
+ if (itv.getTime() !== nItv.getTime()) {
+ slices.push({
+ slice: slice.slice(),
+ time: itv
+ });
+ itv = nItv;
+ }
+ }
+
+ let res = slices.map(e => {
+ let r = _(e.slice).countBy('name').toPairs().orderBy('1', 'desc').value();
+
+ return { slice: r, time: e.time };
+ });
+
+ res = res.map((l, _) => l.slice.map((e, i) => { return { time: l.time, name: e[0], count: e[1], idx: i }; }));
+ res = _(res).flatten();
+
+ return res.groupBy('name').value();
+ }
+
+ d3.csv(`/csvdata/punchcard.csv`, e => {
+ return { ...e, starttime: d3.isoParse(e.starttime) }
+ }).then(data => {
+ const prepped = prepareData(data, d3.timeDay.every(1));
+
+ let chart = rankingChart()
+ .data(prepped);
+
+ d3.select('svg#rankings').call(chart);
+ });
+})();
diff --git a/content/assets/scripts/datavis/bubbleMap.js b/content/assets/scripts/datavis/bubbleMap.js
new file mode 100644
index 0000000..c6089b7
--- /dev/null
+++ b/content/assets/scripts/datavis/bubbleMap.js
@@ -0,0 +1,116 @@
+(function () {
+ function bubbleMap() {
+ // Empty map variable, will init once
+ var map;
+
+ function init(mapId) {
+ if (map == null) {
+ map = new L.Map(mapId, { center: [51.023115, 3.710299], zoom: 12 })
+ .addLayer(new L.TileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'));
+
+ map._initPathRoot();
+
+ d3.select(`#${mapId}`)
+ .select('svg')
+ .append('g')
+ .attr("class", "leaflet-zoom-hide")
+ }
+ }
+
+ function my(sel) {
+ init(sel.attr('id'));
+
+ const g = sel.select('g');
+ const dt = g.datum();
+
+ var div = d3.select(".tooltip").style('opacity', 0);
+
+ function vrUpdate() {
+ let g = d3.select('g');
+
+ const selection = g.selectAll('.location');
+ const data = selection.data();
+ const lines = g.selectAll('line');
+ const latlngs = data.map(e => map.latLngToLayerPoint(new L.LatLng(e.lat, e.lon)));
+
+ selection
+ .attr('cx', (e, i) => latlngs[i].x)
+ .attr('cy', (e, i) => latlngs[i].y)
+ ;
+ }
+
+ const t = d3.transition()
+ .ease(d3.easeLinear)
+ .duration(100);
+
+ const sizes = _.countBy(dt, 'location_id');
+ const data = _.uniqBy(dt, 'location_id')
+
+ let radius = d3.scaleSqrt()
+ .range([0, 50])
+ .domain([0, 177])
+ ;
+
+ // JOIN DATA
+ const selection = g.selectAll('.location').data(data, d => d.location_id);
+ const lines = g.selectAll('line').data(data, d => d.location_id);
+
+ // EXIT
+ selection.exit()
+ .transition(t)
+ .attr('r', 0)
+ .remove();
+
+ // ENTER
+ selection.enter()
+ .append('circle')
+ .style("stroke", "white")
+ .style("opacity", .4)
+ .style("fill", "blue")
+ .attr("r", 0)
+ .attr('class', 'location')
+ .each(d => {
+ const coord = map.latLngToLayerPoint(new L.LatLng(d.lat, d.lon));
+ g.append('circle')
+ .attr('r', radius(sizes[d.location_id]))
+ .attr('fill-opacity', 0)
+ .style('stroke', 'black')
+ .attr('transform', e => `translate(${coord.x}, ${coord.y})`)
+ .attr('opacity', 1)
+ .transition()
+ .duration(1000)
+ .ease(d3.easeLinear)
+ .attr('r', 75)
+ .attr('opacity', 0)
+ .remove();
+ })
+ .on("mouseout", _ => {
+ div.style("opacity", 0);
+ })
+ .merge(selection)
+ // We do the mouseover after the merge so the values update when changing time
+ .on("mouseover", function (d) {
+ div.text(`${d.name} (${sizes[d.location_id]})`);
+
+ let rect = d3.select(this).node().getBoundingClientRect();
+ let t_rect = div.node().getBoundingClientRect();
+ div
+ .style("opacity", .9)
+ .style("left", (rect.left + rect.width/2 - t_rect.width/2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px")
+ ;
+ })
+ .transition(t)
+ .attr("r", d => radius(sizes[d.location_id]))
+ ;
+
+ vrUpdate();
+
+ map.on("viewreset", vrUpdate);
+ }
+
+ return my;
+ }
+
+ window['bubbleMap'] = bubbleMap;
+})();
diff --git a/content/assets/scripts/datavis/instanceChart.js b/content/assets/scripts/datavis/instanceChart.js
new file mode 100644
index 0000000..151380f
--- /dev/null
+++ b/content/assets/scripts/datavis/instanceChart.js
@@ -0,0 +1,171 @@
+(function() {
+ const EMOJI_TYPES = {
+ chinese: '🥡',
+ pasta: '🍝',
+ fries: '🍟',
+ pizza: '🍕',
+ pitta: '🥙',
+ burgers: '🍔',
+ sandwich: '🥪'
+ }
+ function instanceChart() {
+ var margin = { top: 40, right: 60, bottom: 20, left: 20 };
+ var data;
+ var updateData;
+
+ function chart(svg) {
+ let width = svg.attr('width');
+ let height = svg.attr('height');
+
+ width -= margin.left + margin.right;
+ height -= margin.top + margin.bottom;
+
+ const g = svg.append('g')
+ .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+ updateData = function () {
+ times = _(data).toPairs().map(1).flatten().map('starttime').value();
+
+ const leftPad = 170;
+
+ const x = d3.scaleTime()
+ .domain(d3.extent(times))
+ .range([0, width - leftPad])
+ // .nice()
+ ;
+
+ const y = d3.scaleBand()
+ .domain(d3.keys(data))
+ .range([0, height])
+ ;
+
+ const yLegend = d3.scaleBand()
+ .domain(d3.keys(EMOJI_TYPES))
+ .range([0, 170])
+ .paddingInner(0.4)
+ ;
+
+ // const c = d3.scaleOrdinal(d3.schemeCategory10);
+ const c = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.keys(EMOJI_TYPES));
+
+ let axis = d3.axisTop(x);
+
+ const selection = g.selectAll('g.instance').data(d3.entries(data));
+
+ let instance = selection.enter().append('g')
+ .classed('instance', true)
+ .attr('transform', d => `translate(0, ${y(d.key)})`)
+ ;
+
+ instance.append('text')
+ .attr('y', y.bandwidth() / 2)
+ // .style('fill', d => `${c(d.value[0].type)}`)
+ .text(d => `${EMOJI_TYPES[d.value[0].type]} ${d.key} (${d.value.length})`)
+ .style('font-size', '12pt')
+ ;
+
+ const iHeightMod = 0.8;
+
+ // GRAY BACKGROUND
+ instance.append('rect')
+ .attr('x', leftPad)
+ .attr('width', width - leftPad)
+ .attr('height', y.bandwidth() * iHeightMod)
+ .attr('fill-opacity', 0.03)
+ ;
+
+ instance.append('g')
+ .classed('innerInstance', true)
+ .selectAll('rect.tick').data(d => d.value).enter().append('rect')
+ .classed('tick', true)
+ .attr('x', d => leftPad + x(d.starttime))
+ .attr('width', 2)
+ .attr('height', y.bandwidth() * iHeightMod)
+ .attr('fill', d => c(d.type))
+ .attr('fill-opacity', 0.8)
+ ;
+
+ g.append('g')
+ .attr('transform', `translate(${leftPad}, -5)`)
+ .call(axis)
+ ;
+
+ const text = d3.select('body').append('div')
+ .style('position', 'fixed')
+ .style('opacity', 0)
+ .style('background-color', 'white')
+ .style('border-radius', '20px')
+ .style('padding', '5px')
+ ;
+
+ const line = g.append('rect')
+ .attr('y', 0)
+ .attr('height', height - (y.bandwidth() * (1 - iHeightMod)))
+ .attr('width', 1)
+ .attr('opacity', 0)
+ ;
+
+ const legendEntry = g.selectAll('g.legendEntry').data(d3.keys(EMOJI_TYPES)).enter().append('g')
+ .classed('legendEntry', true)
+ .attr('transform', d => `translate(${20 + leftPad + x.range()[1]}, ${yLegend(d)})`)
+ ;
+
+ legendEntry
+ .append('rect')
+ .attr('width', yLegend.bandwidth())
+ .attr('height', yLegend.bandwidth())
+ .attr('fill', c)
+ .attr('fill-opacity', 0.8)
+ ;
+
+ legendEntry
+ .append('text')
+ .attr('x', yLegend.bandwidth() + 5)
+ .attr('y', 17)
+ .text(d => EMOJI_TYPES[d])
+ ;
+
+ g.append('rect')
+ .attr('width', x.range()[1])
+ .attr('height', y.range()[1])
+ .attr('fill-opacity', 0)
+ .attr('x', leftPad)
+ .on('mouseover', () => {
+ text.style('opacity', 1);
+ line.attr('opacity', 1);
+ })
+ .on('mousemove', function () {
+ let mouse = d3.mouse(this);
+ let date = x.invert(mouse[0] - leftPad);
+
+ text
+ .style('left', `${d3.event.x + 15}px`)
+ // .style('left', `${mouse[0] + 120}px`)
+ .style('top', `${d3.event.y - 20}px`)
+ ;
+
+ let fmt = d3.timeFormat('%d/%m/%y');
+ text.text(fmt(date));
+ line.attr('x', mouse[0])
+ })
+ .on('mouseout', () => {
+ text.style('opacity', 0);
+ line.attr('opacity', 0);
+ })
+ ;
+ }
+ updateData();
+ }
+
+ chart.data = function (value) {
+ if (!arguments.length) return data;
+ data = value;
+ if (typeof updateData === 'function') updateData();
+ return chart;
+ }
+
+ return chart;
+ }
+
+window['instanceChart'] = instanceChart;
+})();
diff --git a/content/assets/scripts/datavis/punchcard.js b/content/assets/scripts/datavis/punchcard.js
new file mode 100644
index 0000000..7a72196
--- /dev/null
+++ b/content/assets/scripts/datavis/punchcard.js
@@ -0,0 +1,119 @@
+(function () {
+ function punchCard() {
+ var margin = { top: 20, right: 20, bottom: 30, left: 150 };
+ var data;
+ var updateData;
+
+ const tooltip = d3.select('body').append('div')
+ .classed('tooltip', true)
+ .attr('id', 'pCardTooltip')
+ .style("opacity", 0);
+ ;
+
+ function chart(svg) {
+ let width = svg.attr('width');
+ let height = svg.attr('height');
+
+ width -= margin.left + margin.right;
+ height -= margin.top + margin.bottom;
+
+ const g = svg.append('g')
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+ const gAxis = g.append('g')
+ .classed('axis', true);
+
+
+ updateData = function () {
+ const maxValue = _(data).values().map(e => _(e).values().value()).map(e => _(e).max()).max();
+ const x = d3.scaleLinear()
+ .domain([0, 23])
+ .range([0, width])
+ ;
+
+ const y = d3.scaleLinear()
+ .domain([0, d3.keys(data).length])
+ .range([0, height])
+ ;
+
+ const r = d3.scaleSqrt()
+ .domain([1, maxValue])
+ .range([3, 11])
+ ;
+
+ let rows = g.selectAll('g.row').data(d3.entries(data), d => d.key);
+
+ let erows = rows.enter().append('g')
+ .classed('row', true)
+ .attr('opacity', 1)
+
+ erows
+ .append('text')
+ .attr('x', -10)
+ .attr('y', 3)
+ .attr('text-anchor', 'end')
+ .text(d => d.key);
+
+ rows.exit().remove();
+
+ rows = erows.merge(rows);
+
+ rows.transition().duration(25).attr('transform', (d, i) => `translate(0, ${y(i)})`);
+
+ const circles = rows.selectAll('circle.punch').data(d => d3.entries(d.value), d => d.key);
+ circles.enter().append('circle')
+ .classed('punch', true)
+ .attr('cx', d => x(+d.key))
+ .attr('fill', 'orange')
+ .attr('r', 0)
+ .on("mouseover", function (d) {
+ tooltip.transition()
+ .duration(200)
+ .style("opacity", .9);
+ tooltip.html(d.value);
+
+ // We calculate the bounding rects after setting the html
+ let rect = d3.select(this).node().getBoundingClientRect();
+ let t_rect = tooltip.node().getBoundingClientRect();
+ tooltip
+ .style("left", (rect.left + rect.width/2 - t_rect.width/2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px");
+ })
+ .on("mouseout", _ => {
+ tooltip.transition()
+ .duration(500)
+ .style("opacity", 0);
+ })
+ .merge(circles)
+ .transition()
+ .duration(25)
+ .attr('r', d => r(d.value))
+ ;
+
+ circles.exit().transition()
+ .attr('r', 0)
+ .remove();
+
+ rows.selectAll('circle.punch').attr('r', d => r(d.value));
+
+ const axis = d3.axisBottom(x).ticks(24);
+
+ gAxis
+ .attr('transform', `translate(0, ${y.range()[1]})`)
+ .call(axis);
+ }
+ updateData();
+ }
+
+ chart.data = function (value) {
+ if (!arguments.length) return data;
+ data = value;
+ if (typeof updateData === 'function') updateData();
+ return chart;
+ }
+
+ return chart;
+ }
+
+ window['punchCard'] = punchCard;
+})();
diff --git a/content/assets/scripts/datavis/rankingChart.js b/content/assets/scripts/datavis/rankingChart.js
new file mode 100644
index 0000000..0cf2314
--- /dev/null
+++ b/content/assets/scripts/datavis/rankingChart.js
@@ -0,0 +1,116 @@
+(function() {
+ function rankingChart() {
+ var margin = { top: 50, right: 120, bottom: 20, left: 120 };
+ var data;
+ var updateData;
+
+ function chart(svg) {
+ let width = $(svg.node()).width();
+ let height = svg.attr('height');
+
+ width -= margin.left + margin.right;
+ height -= margin.top + margin.bottom;
+
+ const g = svg.append('g')
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+ updateData = function () {
+ let allDates = _(d3.entries(data).map(e => e.value)).flatten().value().map(e => e.time);
+ let allIdx = _(d3.entries(data).map(e => e.value)).flatten().value().map(e => e.idx);
+
+ const x = d3.scaleTime()
+ .domain(d3.extent(allDates))
+ .range([0, width])
+ .nice()
+ ;
+
+ let axis = d3.axisTop(x);
+
+ g.append('g')
+ .attr('transform', `translate(0, -20)`)
+ .call(axis);
+
+ const y = d3.scaleLinear()
+ .domain([0, d3.max(allIdx)])
+ .range([0, height])
+ ;
+
+ const c = d3.scaleOrdinal(d3.schemeCategory10);
+
+ const line = d3.line()
+ .x(d => x(d.time))
+ .y(d => y(d.idx))
+ .curve(d3.curveMonotoneX)
+ ;
+
+ const minTimes = d3.entries(data).map(e => _(e.value).minBy('time'));
+ const maxTimes = d3.entries(data).map(e => _(e.value).maxBy('time'));
+
+ function mouseover(ident) {
+ return function inner(d, i, sel) {
+ const path = g.selectAll('path.rankPath').filter(e => d[ident] === e.key);
+ const others = g.selectAll('path.rankPath').filter(e => d[ident] !== e.key);
+ path.attr('stroke-width', 6);
+ others.attr('stroke', 'gray');
+ }
+ }
+
+ function mouseout(ident) {
+ return function inner(d, i, sel) {
+ const path = g.selectAll('path.rankPath').filter(e => d[ident] === e.key);
+ const others = g.selectAll('path.rankPath');
+ path.attr('stroke-width', 3);
+ others.attr('stroke', (_, i) => c(i));
+ }
+ }
+
+ g.selectAll('path.rankPath').data(d3.entries(data)).enter().append('path')
+ .classed('rankPath', true)
+ .attr('fill-opacity', 0)
+ .attr('stroke', (_, i) => c(i))
+ .attr('stroke-width', 3)
+ .attr('d', d => {
+ const lastVal = d.value[d.value.length - 1];
+ const nVal = {...lastVal, time: x.domain()[1]}
+ return line(d.value.concat([nVal]));
+ })
+ .on('mouseover', mouseover('key'))
+ .on('mouseout', mouseout('key'))
+ ;
+
+ g.selectAll('text.begin').data(minTimes).enter().append('text')
+ .classed('begin', true)
+ .attr('x', d => x(d.time) - 5)
+ .attr('y', d => y(d.idx) + 4)
+ .attr('text-anchor', 'end')
+ .text(d => d.name)
+ .on('mouseover', mouseover('name'))
+ .on('mouseout', mouseout('name'))
+ ;
+
+ g.selectAll('text.end').data(maxTimes).enter().append('text')
+ .classed('end', true)
+ .attr('x', d => x.range()[1] + 5)
+ .attr('y', d => y(d.idx) + 4)
+ .attr('text-anchor', 'begin')
+ .text(d => d.name)
+ .on('mouseover', mouseover('name'))
+ .on('mouseout', mouseout('name'))
+ ;
+ }
+ updateData();
+ }
+
+ chart.data = function (value) {
+ if (!arguments.length) return data;
+ data = value;
+ if (typeof updateData === 'function') updateData();
+ return chart;
+ }
+
+ return chart;
+ }
+
+window['rankingChart'] = rankingChart;
+
+})();
diff --git a/content/assets/scripts/datavis/script2.js b/content/assets/scripts/datavis/script2.js
new file mode 100644
index 0000000..c88a969
--- /dev/null
+++ b/content/assets/scripts/datavis/script2.js
@@ -0,0 +1,457 @@
+(function () {
+ const width = 1000;
+ const height = 800;
+ const middle = height / 2;
+ const barPadding = 1;
+ const padding = { top: 50, left: 50, right: 40, bottom: 50 };
+ const formatTime = d3.timeFormat('%b %e %Y');
+
+ let prevUpper, prevLower;
+ let xScale, yScale1, yScale2, xAxis, yAxis1, yAxis2;
+ let prevUpperButton, prevLowerButton;
+ var chart, chart2, slider, selection;
+ var userdata, pricedata, eventdata, tapordersdata, tapusersdata;
+
+ d3.csv('/csvdata/haldis-price-time.csv', d => {
+ return {
+ date: d3.timeParse('%Y-%m-%d')(d.starttime).setHours(0, 0, 0, 0),
+ value: parseInt(d.total_price) / 100
+ };
+ }).then(function (data) {
+ pricedata = data;
+
+ return d3.csv('/csvdata/haldis-num-users-time.csv', d => {
+ return {
+ date: d3.timeParse("%Y-%m-%d")(d.starttime).setHours(0, 0, 0, 0),
+ value: parseInt(d.num_users)
+ };
+ });
+ }).then(function (data) {
+ userdata = data;
+
+ return d3.csv('/csvdata/eventdata.csv', d => {
+ return {
+ date: d3.utcParse("%Y-%m-%dT%H:%M:%S%Z")(d.date).setHours(0, 0, 0, 0),
+ title: d.title
+ };
+ });
+ }).then(function (data) {
+ eventdata = data;
+
+ return d3.csv('/csvdata/tap-orders-day.csv', d => {
+ return {
+ date: d3.timeParse('%Y-%m-%d')(d.created_at).setHours(0, 0, 0, 0),
+ value: parseInt(d.count)
+ };
+ });
+ }).then(function (data) {
+ tapordersdata = data;
+
+ return d3.csv('/csvdata/tap-orders-users-day.csv', d => {
+ return {
+ date: d3.timeParse('%Y-%m-%d')(d.created_at).setHours(0, 0, 0, 0),
+ value: parseInt(d.count)
+ };
+ });
+ }).then(function (data) {
+ tapusersdata = data;
+
+ xScale = d3.scaleTime().range([padding.left, width - padding.right]);
+ yScale1 = d3.scaleLinear().range([middle, padding.top]);
+ yScale2 = d3.scaleLinear().range([padding.bottom, middle]);
+ xAxis = d3.axisBottom().scale(xScale).ticks().tickFormat('').tickSize(0);
+ yAxis1 = d3.axisLeft().scale(yScale1).ticks();
+ yAxis2 = d3.axisLeft().scale(yScale2).ticks();
+
+
+ chart = timeBarChart();
+ chart2 = timeBarChart2();
+ chart.eventdata = eventdata;
+ chart2.eventdata = eventdata;
+
+ selection = d3.select('#barchart').append('g');
+
+ selection.append('g')
+ .attr('class', 'x axis')
+ .attr('transform', `translate(0, ${middle})`);
+
+ selection.append('g')
+ .attr('class', 'y axis')
+ .attr('transform', `translate(${padding.left}, 0)`);
+
+ selection.append('g')
+ .attr('class', 'y axis2')
+ .attr('transform', `translate(${padding.left}, ${middle - padding.top})`);
+
+ slider = timeSlider();
+
+ prevUpper = userdata;
+ prevLower = tapordersdata;
+ updateData(userdata, true);
+ updateData(tapordersdata, false);
+
+ prevUpperButton = d3.select("#user-button");
+ prevLowerButton = d3.select("#tap-order-button");
+ setActiveButton('#haldis-user-button', true);
+ setActiveButton('#tap-order-button', false);
+
+ slider.on('slide', domain => {
+ chart.domain.start = domain[0];
+ chart.domain.end = domain[1];
+ chart2.domain.start = domain[0];
+ chart2.domain.end = domain[1];
+
+ const d1 = filterData(prevUpper, chart.domain.start, chart.domain.end);
+ const d2 = filterData(prevLower, chart2.domain.start, chart2.domain.end);
+
+ selection.datum(d1).call(chart);
+ selection.datum(d2).call(chart2);
+ });
+ d3.select('#slider').call(slider);
+ });
+
+ function setActiveButton(name, upper) {
+ curButton = d3.select(name);
+ if (upper) {
+ prevUpperButton.classed("is-focused", false);
+ prevUpperButton = curButton;
+ } else {
+ prevLowerButton.classed("is-focused", false);
+ prevLowerButton = curButton;
+ }
+ curButton.classed("is-focused", true);
+ }
+
+ function filterData(data, beginTime, endTime) {
+ return _(data).filter(e => beginTime <= e.date && e.date <= endTime).value();
+ }
+
+ function timeBarChart() {
+ function my(svg) {
+ let eventdata = my.eventdata;
+ var dt = svg.datum();
+
+ const t = d3.transition()
+ .ease(d3.easeLinear)
+ .duration(100);
+
+ xScale.domain([my.domain.start, my.domain.end]);
+ yScale1.domain(d3.extent(dt, d => d.value));
+
+ svg.select('.x.axis')
+ .transition(t)
+ .call(xAxis);
+
+ svg.select('.y.axis')
+ .transition(t)
+ .call(yAxis1);
+
+ function update() {
+ let g = d3.select('svg#barchart > g');
+
+ const selection = g.selectAll('.datacircle');
+ const sellines = g.selectAll('.line');
+ const eventlines = g.selectAll('.eventline');
+
+ sellines
+ .attr('x1', d => xScale(d.date))
+ .attr('y1', middle)
+ .attr('x2', d => xScale(d.date))
+ .transition()
+ .attr('y2', d => yScale1(d.value));
+
+ eventlines
+ .attr('x1', d => xScale(d.date))
+ .attr('y1', middle)
+ .attr('x2', d => xScale(d.date))
+ .transition()
+ .attr('y2', (d) => {
+ let yValue = 0;
+ selection.data().forEach(function (el) {
+ if (el.date === d.date) {
+ yValue = el.value;
+ }
+ })
+ return yScale1(yValue);
+ });
+
+ selection
+ .transition()
+ .attr('cx', d => xScale(d.date))
+ .attr('cy', d => yScale1(d.value));
+
+ }
+
+ const fed = filterData(eventdata, my.domain.start, my.domain.end);
+
+ const selection = svg.selectAll('.datacircle').data(dt, d => d.date);
+ const sellines = svg.selectAll('.line').data(dt, d => d.date);
+ const eventlines = svg.selectAll('.eventline').data(fed, d => d.date);
+
+ const fmtStr = 'DD/MM/YY';
+
+ sellines.exit().remove();
+
+ sellines.enter()
+ .append('line')
+ .attr('stroke', '#ddd')
+ .attr('stroke-width', 2)
+ .attr('class', 'line')
+ .merge(sellines)
+ .transition(t);
+
+ eventlines.exit().remove();
+
+ eventlines.enter()
+ .append('line')
+ .attr('stroke', '#f4a442')
+ .attr('stroke-width', 2)
+ .attr('class', 'eventline')
+ .on("mouseover", function (d) {
+ const tooltip = d3.select('.tooltip');
+
+ tooltip
+ .style("opacity", .9)
+ .html(moment(d.date).format(fmtStr) + ' - ' + d.title);
+
+ // We calculate the bounding rects after setting the html
+ let rect = d3.select(this).node().getBoundingClientRect();
+ let t_rect = tooltip.node().getBoundingClientRect();
+
+ tooltip
+ .style("left", (rect.left + rect.width / 2 - t_rect.width / 2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px");
+ })
+ .on("mouseout", _ => {
+ div.style("opacity", 0);
+ })
+ .merge(eventlines)
+ .transition(t);
+
+ selection.exit().remove();
+
+ selection.enter()
+ .append('circle')
+ .attr('fill', 'lightblue')
+ .attr('class', 'datacircle')
+ .on("mouseover", function (d) {
+ const tooltip = d3.select('.tooltip');
+
+ tooltip
+ .style("opacity", .9)
+ .html(moment(d.date).format(fmtStr) + ' - ' + d.value);
+
+ // We calculate the bounding rects after setting the html
+ let rect = d3.select(this).node().getBoundingClientRect();
+ let t_rect = tooltip.node().getBoundingClientRect();
+
+ tooltip
+ .style("left", (rect.left + rect.width / 2 - t_rect.width / 2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px");
+ })
+ .on("mouseout", _ => {
+ div.style("opacity", 0);
+ })
+ .merge(selection)
+ .attr('r', 3)
+ .transition(t)
+ ;
+
+ update();
+ }
+
+ return my;
+ }
+
+ function timeBarChart2() {
+ function my(svg) {
+ let eventdata = my.eventdata;
+ var dt = svg.datum();
+
+ var div = d3.select(".tooltip").style('opacity', 0);
+
+ const t = d3.transition()
+ .ease(d3.easeLinear)
+ .duration(100);
+
+ xScale.domain([my.domain.start, my.domain.end]);
+ yScale2.domain(d3.extent(dt, d => d.value));
+
+ svg.select('.x.axis')
+ .transition(t)
+ .call(xAxis);
+
+ svg.select('.y.axis2')
+ .transition(t)
+ .call(yAxis2);
+
+ svg.append("text")
+ .style("text-anchor", "middle")
+ .text("Date");
+
+ function update() {
+ let g = d3.select('svg#barchart > g');
+
+ const selection = g.selectAll('.datacircle2');
+ const sellines = g.selectAll('.line2');
+ const eventlines = g.selectAll('.eventline2');
+
+ sellines
+ .transition()
+ .attr('x1', d => xScale(d.date))
+ .attr('y1', padding.top)
+ .attr('x2', d => xScale(d.date))
+ .attr('y2', d => yScale2(d.value));
+
+ eventlines
+ .attr('x1', d => xScale(d.date))
+ .attr('y1', padding.top)
+ .attr('x2', d => xScale(d.date))
+ .transition()
+ .attr('y2', (d) => {
+ let yValue = 0;
+ selection.data().forEach(function (el) {
+ if (el.date === d.date) {
+ yValue = el.value;
+ }
+ })
+ return yScale2(yValue);
+ });
+
+ selection
+ .transition()
+ .attr('cx', d => xScale(d.date))
+ .attr('cy', d => yScale2(d.value));
+
+ }
+
+ const fed = filterData(eventdata, my.domain.start, my.domain.end);
+
+ const selection = svg.selectAll('.datacircle2').data(dt, d => d.date);
+ const sellines = svg.selectAll('.line2').data(dt, d => d.date);
+ const eventlines = svg.selectAll('.eventline2').data(fed, d => d.date);
+
+ const fmtStr = 'DD/MM/YY';
+
+ sellines.exit().remove();
+
+ sellines.enter()
+ .append('line')
+ .attr('stroke', '#ddd')
+ .attr('stroke-width', 2)
+ .attr('class', 'line2')
+ .attr('transform', `translate(0, ${middle - padding.bottom})`)
+ .merge(sellines)
+ .transition(t);
+
+ eventlines.exit().remove();
+
+ eventlines.enter()
+ .append('line')
+ .attr('stroke', '#f4a442')
+ .attr('stroke-width', 2)
+ .attr('class', 'eventline2')
+ .attr('transform', `translate(0, ${middle - padding.bottom})`)
+ .on("mouseover", function (d) {
+ const tooltip = d3.select('.tooltip');
+
+ tooltip
+ .style("opacity", .9)
+ .html(moment(d.date).format(fmtStr) + ' - ' + d.title);
+
+ // We calculate the bounding rects after setting the html
+ let rect = d3.select(this).node().getBoundingClientRect();
+ let t_rect = tooltip.node().getBoundingClientRect();
+
+ tooltip
+ .style("left", (rect.left + rect.width / 2 - t_rect.width / 2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px");
+ })
+ .on("mouseout", _ => {
+ div.style("opacity", 0);
+ })
+ .merge(eventlines)
+ .transition(t);
+
+
+ selection.exit().remove();
+
+ selection.enter()
+ .append('circle')
+ .attr('fill', 'lightblue')
+ .attr('class', 'datacircle2')
+ .attr('transform', `translate(0, ${middle - padding.bottom})`)
+ .on("mouseover", function (d) {
+ const tooltip = d3.select('.tooltip');
+
+ tooltip
+ .style("opacity", .9)
+ .html(moment(d.date).format(fmtStr) + ' - ' + d.value);
+
+ // We calculate the bounding rects after setting the html
+ let rect = d3.select(this).node().getBoundingClientRect();
+ let t_rect = tooltip.node().getBoundingClientRect();
+
+ tooltip
+ .style("left", (rect.left + rect.width / 2 - t_rect.width / 2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px");
+ })
+ .on("mouseout", _ => {
+ div.style("opacity", 0);
+ })
+ .merge(selection)
+ .attr('r', 3)
+ .transition(t);
+
+ update();
+ }
+
+ return my;
+ }
+
+ function updateData(data, upper) {
+ domain = d3.extent(data, d => d.date);
+ chart.domain = {
+ 'start': domain[0],
+ 'end': domain[1]
+ };
+ chart2.domain = {
+ 'start': domain[0],
+ 'end': domain[1]
+ };
+
+ const times = _(data).map(e => moment(e.date));
+
+ if (upper) {
+ prevUpper = data;
+ const fd = filterData(prevLower, chart.domain.start, chart.domain.end);
+ selection.datum(data).call(chart);
+ selection.datum(fd).call(chart2);
+ slider.domain([times.min(), times.max()]).data(times.value(), true);
+ } else {
+ prevLower = data;
+ const fd = filterData(prevUpper, chart.domain.start, chart.domain.end);
+ selection.datum(data).call(chart2);
+ selection.datum(fd).call(chart);
+ slider.domain([times.min(), times.max()]).data(times.value(), true);
+ }
+
+ }
+
+ d3.select('#haldis-user-button').on('click', () => {
+ updateData(userdata, true);
+ setActiveButton('#haldis-user-button', true);
+ });
+ d3.select('#haldis-price-button').on('click', () => {
+ updateData(pricedata, true);
+ setActiveButton('#haldis-price-button', true);
+ });
+ d3.select('#tap-order-button').on('click', () => {
+ updateData(tapordersdata, false);
+ setActiveButton('#tap-order-button', false);
+ });
+ d3.select('#tap-user-button').on('click', () => {
+ updateData(tapusersdata, false);
+ setActiveButton('#tap-user-button', false);
+ });
+})();
diff --git a/content/assets/scripts/datavis/scriptlo.js b/content/assets/scripts/datavis/scriptlo.js
new file mode 100644
index 0000000..b1c70a9
--- /dev/null
+++ b/content/assets/scripts/datavis/scriptlo.js
@@ -0,0 +1,244 @@
+var margin = {top: 20, right: 10, bottom: 30, left: 10};
+var width = 700 - margin.left - margin.right,
+ height = 500 - margin.top - margin.bottom;
+
+const mat = [];
+
+const interpol = d3.interpolateViridis;
+const colorScaleRel = d3.scaleSequential(interpol).domain([0, 100]);
+const colorScaleAbs = d3.scaleSequential(interpol).domain([0, 306]); //oeps harcoded
+
+const svg = d3.select('#gridlo')
+ .append('svg')
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .append("g")
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+const products = [];
+const locations = [];
+d3.csv("/csvdata/elodata.csv", d => {
+ d.product_id = +d.product_id;
+ d.location_id = +d.location_id;
+
+ if (!mat[d.product_id]) {
+ products[d.product_id] = d.name_x;
+ mat[d.product_id] = Array(...Array(110)).map(Number.prototype.valueOf, 0);
+ }
+ // at this point tha array is made d.location_id
+ if (!mat[d.product_id][d.location_id]) {
+ locations[d.location_id] = d.name_y;
+ mat[d.product_id][d.location_id] = 1;
+ } else {
+ mat[d.product_id][d.location_id] += 1;
+ }
+ return d;
+}).then((data) => {
+ const mat2 = [];
+ let prod2 = [];
+ mat.forEach((a, i) => {
+ prod2.push(products[i]);
+ mat2.push(a);
+ });
+ let mat3 = [];
+ let loc2 = [];
+ for (var i = 0; i < prod2.length; i++) {
+ mat3[i] = [];
+ }
+ var i = 0;
+ let mat_scaled = [];
+ locations.forEach((l, k) => {
+ loc2.push(l);
+ for (let j = 0; j < prod2.length; j++) {
+ mat3[j][i] = mat2[j][k];
+ }
+ i++;
+ });
+
+ //rectangles
+ let comb = _.sortBy(_.zip(prod2, mat3), e => -_.sum(e[1]));
+ prod2 = _.unzip(comb)[0];
+ mat3 = _.unzip(comb)[1];
+
+ comb = _.sortBy(_.zip(loc2, _.unzip(mat3)), e => -_.sum(e[1]));
+ loc2 = _.unzip(comb)[0];
+ mat3 = _.unzip(_.unzip(comb)[1]);
+
+ max = 0;
+ sums = []
+ for (var i = 0; i < mat3[0].length; i++) {
+ sums[i] = 0;
+ }
+ mat3.forEach(d => {
+ d.forEach((e, i) => {
+ sums[i] += e;
+ });
+ });
+ mat_scaled = mat3.map((r, i) => r.map((e, j) => 100 * e / sums[j]));
+ relative = false; // 0 is false -> scaled
+ data = [mat_scaled, mat3];
+ scales = [colorScaleRel, colorScaleAbs];
+ const legends = [[0, 20, 40, 60, 80, 100], [0, 60, 120, 180, 240, 300]];
+ let d = data[+relative];
+ const top = svg.append("g").attr("id", "top");
+
+ const boxScale = d3.scaleBand()
+ .domain(d3.range(Math.max(d.length, d[0].length)))
+ .range([0, Math.min(height, width)])
+ .round(true)
+ ;
+
+ d3.select("#switch").on("click", updateData);
+
+ function updateData() {
+ relative = !relative;
+ d = data[+relative];
+ scale = scales[+relative]
+
+ // ENTER -- Rows
+ top.selectAll('g').data(d, (_, i) => i).enter().append('g')
+ .attr('opacity', 0.95)
+ .attr("transform", (_, i) => `translate(0, ${(boxScale(i))})`)
+ .attr('data-row-idx', (_, i) => i)
+ // ENTER -- Boxes
+ .selectAll('rect').data(d => d, (_, i) => i).enter().append("rect")
+ .attr('opacity', 0.95)
+ .attr("class", (_, i) => `id${i}`)
+ .attr('width', boxScale.bandwidth() * 1.01)
+ .attr('height', boxScale.bandwidth() * 1.01)
+ .attr("x", (_, i) => boxScale(i) + 150)
+ .on("mouseover", mouse_over_rect)
+ .on("mouseout", mouse_out_rect);
+
+ const boxes = top.selectAll('g').data(d, (_, i) => i).selectAll('rect').data(d => d, (_, i) => i);
+
+ boxes
+ .transition()
+ .attr('fill', d => scale(d));
+
+ svg.selectAll(".legend text")
+ .transition().duration(500)
+ .text((_, i) => {
+ const d = legends[+relative][i];
+ return relative ? d : d + '%';
+ });
+
+ svg.selectAll(".legend rect")
+ .transition().duration(500)
+ .style("fill", (d, i) => scale(legends[+relative][i]));
+
+ };
+ updateData();
+
+ function mouse_over_rect(d, i, j) { // Add interactivity
+ const row = d3.select(this.parentNode);
+ const block = d3.select(this);
+ const tooltip = d3.select('.tooltip');
+
+ //row
+ row.attr("opacity", 1);
+ d3.selectAll(`.id${i}`).attr("opacity", 1);
+
+ tooltip
+ .style("opacity", .9)
+ .html(relative ? d : `${d.toFixed(2)}%`);
+
+ // We calculate the bounding rects after setting the html
+ let rect = block.node().getBoundingClientRect();
+ let t_rect = tooltip.node().getBoundingClientRect();
+
+ tooltip
+ .style("left", (rect.left + rect.width / 2 - t_rect.width / 2) + "px")
+ .style("top", (rect.top - t_rect.height - 5) + "px");
+
+ //Labels
+ d3.select(`#rest${i}`)
+ .attr("fill", scale(d))
+ .attr("font-weight", "bold")
+ ;
+
+ d3.select(`#prod${row.attr('data-row-idx')}`)
+ .attr("fill", scale(d))
+ .attr("font-weight", "bold")
+ ;
+ }
+ function mouse_out_rect(d, i, j) {
+ const row = d3.select(this.parentNode);
+ const block = d3.select(this);
+ const tooltip = d3.select('.tooltip');
+
+ //rm border and text
+ row.attr("stroke", "none");
+ row.attr("opacity", 0.95);
+ d3.selectAll(`.id${i}`).attr("opacity", 0.95);
+
+ tooltip.style('opacity', 0);
+
+ d3.select(`#rest${i}`)
+ .attr("fill", "black")
+ .attr("font-weight", "")
+ ;
+ d3.select(`#prod${row.attr('data-row-idx')}`)
+ .attr("fill", "black")
+ .attr("font-weight", "")
+ ;
+ }
+
+ // product labels
+ let prodLabels = svg.append("g")
+ .selectAll("g")
+ .data(prod2)
+ .enter()
+ .append("text")
+ .text(d => d)
+ .attr("x", 30)
+ .attr("y", (_, i) => boxScale(i) + 15)
+ .attr("id", (_, i) => `prod${i}`)
+ .attr("font-family", "sans-serif")
+ .attr("font-size", "11px")
+ .attr("fill", "black");
+
+ // location labels
+ let locLabels = svg.append("g")
+ .selectAll("g")
+ .data(loc2)
+ .enter()
+ .append("text")
+ .text(d => d)
+ .attr("text-anchor", "middle")
+ .attr("transform", (_, i) => `translate(${(boxScale(i) + 150)},${boxScale(prodLabels.size() - 1) + 70}) rotate(-65)`)
+ .attr("font-family", "sans-serif")
+ .attr("id", (_, i) => `rest${i}`)
+ .attr("font-size", "11px")
+ .attr("fill", "black");
+
+ //Legend
+ let legend = svg.append('g')
+ .classed('legendWrapper', 'true')
+ .attr("transform", `translate(${boxScale(locLabels.size() - 1) + boxScale.bandwidth() + 160}, 0)`);
+ ;
+
+ let legendAbs = legend.selectAll(".legend")
+ .data(legends[+relative])
+ .enter().append("g")
+ .attr("class", "legend")
+ .attr("transform", (d, i) => `translate(0 ,${boxScale(i) + 20})`);
+
+ legendAbs.append("rect")
+ .attr("width", 20)
+ .attr("height", 20)
+ .style("fill", d => colorScaleAbs(d));
+
+ legendAbs.append("text")
+ .attr("x", 26)
+ .attr("y", 10)
+ .attr("dy", ".35em")
+ .text(d => relative ? d : `${d.toFixed(2)}%`);
+
+ legend.append("text")
+ .attr("class", "label")
+ .attr("x", 0)
+ .attr("y", 10)
+ .attr("dy", ".35em")
+ .text("Count");
+});
diff --git a/content/assets/scripts/datavis/timeSlider.js b/content/assets/scripts/datavis/timeSlider.js
new file mode 100644
index 0000000..20491c4
--- /dev/null
+++ b/content/assets/scripts/datavis/timeSlider.js
@@ -0,0 +1,187 @@
+(function() {
+function timeSlider() {
+ var data;
+ var sliderValue;
+ var updateSlider;
+ var updateData;
+
+ let width = 50;
+ let midPoint = width / 2;
+ let domain = [moment().subtract(1, 'year').toDate(), moment().toDate()]
+
+ const dispatch = d3.dispatch('slide');
+ var margin = { top: 2, right: 40, bottom: 20, left: 40 };
+
+ function my(svg) {
+ let xScale;
+
+ let tWidth = $(svg.node()).width();
+ let tHeight = $(svg.node()).height();
+
+ tWidth -= margin.left + margin.right;
+ tHeight -= margin.top + margin.bottom;
+
+ const g = svg.append('g')
+ .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+ const gAxis = g.append('g');
+
+ // Create the svg:defs element and the main gradient definition.
+ var svgDefs = g.append('defs');
+ var mainGradient = svgDefs.append('linearGradient')
+ .attr('id', 'mainGradient');
+ // Create the stops of the main gradient. Each stop will be assigned
+ // a class to style the stop using CSS.
+ mainGradient.append('stop')
+ .attr('stop-opacity', '0')
+ .attr('offset', '0%');
+ mainGradient.append('stop')
+ .attr('stop-color', 'blue')
+ .attr('stop-opacity', '1')
+ .attr('offset', '45%');
+ mainGradient.append('stop')
+ .attr('stop-color', 'blue')
+ .attr('stop-opacity', '1')
+ .attr('offset', '55%');
+ mainGradient.append('stop')
+ .attr('stop-opacity', '0')
+ .attr('offset', '100%');
+
+ updateData = function (data, updateDomain) {
+ if (updateDomain) {
+ domain = d3.extent(data);
+ }
+
+ xScale = d3.scaleTime()
+ .domain(domain)
+ .range([0, tWidth])
+ .nice()
+ ;
+
+ const xAxis = d3.axisBottom(xScale)
+ .tickFormat(d3.timeFormat("%b '%y"))
+ ;
+ gAxis
+ .attr('transform', 'translate(0,' + 50 + ')')
+ .classed('x axis', true)
+ .call(xAxis)
+ .selectAll("text")
+ ;
+
+ const sliderHeatmap = g.selectAll('rect.heatTick').data(data, d => d);
+
+ sliderHeatmap.exit().transition().attr('height', 0).remove();
+
+ sliderHeatmap.enter().append('rect')
+ .attr('x', e => xScale(e))
+ .attr('class', 'heatTick')
+ .attr('fill', 'blue')
+ .attr('width', 3)
+ .attr('height', 0)
+ .attr('fill-opacity', 0.2)
+ .transition()
+ .attr('height', 50)
+ ;
+
+ }
+ updateData(data);
+
+ const outer = g.append('rect')
+ .attr('stroke', 'black')
+ .attr('fill-opacity', 0)
+ .attr('stroke-width', 1)
+ .attr('width', tWidth)
+ .attr('height', 50);
+
+ const t1 = g.append('text')
+ .attr('font-size', '.6em')
+ .attr('y', 50);
+ const t2 = g.append('text')
+ .attr('font-size', '.6em')
+ .attr('y', 50);
+
+ const inner = g.append('rect')
+ .attr('stroke', 'black')
+ .attr('fill-opacity', 0)
+ .attr('stroke-width', 2)
+ .attr('width', 50)
+ .attr('height', width)
+ .call(d3.drag()
+ .on("drag", function (d) {
+ const dx = d3.event.dx;
+ const dy = d3.event.dy;
+
+ let nx = midPoint + dx - width / 2;
+
+ width -= 1.5 * dy;
+ width = Math.max(10, width);
+
+ nx += 1.5 * dy / 2;
+ nx = Math.min(tWidth - width, nx);
+ nx = Math.max(0, nx);
+
+ midPoint = nx + width / 2;
+
+ width = Math.min(width, tWidth);
+
+ const beginTime = xScale.invert(nx);
+ const endTime = xScale.invert(nx + width);
+
+ sliderValue = [beginTime, endTime];
+
+ updateSlider(sliderValue);
+
+ dispatch.call('slide', this, sliderValue);
+ }));
+
+ updateSlider = function (value) {
+ nx = xScale(value[0]);
+ width = xScale(value[1]) - xScale(value[0]);
+ midPoint = nx + width / 2;
+
+ inner.attr('x', nx)
+ .attr('width', width);
+
+ const fmtStr = 'DD/MM/YY'
+
+ t1.text(moment(value[0]).format(fmtStr))
+ .attr('x', nx)
+ .attr('transform', `rotate(45 ${nx},50) translate(20,20)`);
+ t2.text(moment(value[1]).format(fmtStr))
+ .attr('x', nx + width)
+ .attr('transform', `rotate(45 ${nx + width},50) translate(20,20)`);
+ }
+ updateSlider(xScale.domain());
+ }
+
+ my.on = function () {
+ let value = dispatch.on.apply(dispatch, arguments);
+ return value === dispatch ? my : value;
+ }
+
+ my.domain = function (value) {
+ if (!arguments.length) return domain;
+ domain = value;
+ if (typeof updateData === 'function') updateData(data);
+ return my;
+ }
+
+ my.slider = function (value) {
+ if (!arguments.length) return sliderValue;
+ if (typeof updateSlider === 'function') updateSlider(value);
+ return my;
+ }
+
+ my.data = function (dt) {
+ if (!arguments.length) return intensity;
+ data = dt
+ if (typeof updateData === 'function') updateData(data);
+ return my;
+ }
+
+ return my;
+}
+
+window['timeSlider'] = timeSlider;
+
+})();
diff --git a/content/assets/stylesheets/datavis/blog.css b/content/assets/stylesheets/datavis/blog.css
new file mode 100644
index 0000000..08b5f0e
--- /dev/null
+++ b/content/assets/stylesheets/datavis/blog.css
@@ -0,0 +1,44 @@
+div.tooltip {
+ position: fixed;
+ text-align: center;
+ min-width: 30px;
+ padding: 4px;
+ font: 12px sans-serif;
+ background: black;
+ color: white;
+ border: 0px;
+ border-radius: 8px;
+ pointer-events: none;
+ z-index: 10;
+ opacity: 0;
+}
+
+div.tooltip::after {
+ content: " ";
+ position: absolute;
+ top: 100%;
+ /* At the bottom of the tooltip */
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: black transparent transparent transparent;
+}
+
+#instance path.domain {
+ visibility: hidden;
+}
+
+.full-width {
+ margin-left: -50vw;
+ margin-right: -50vw;
+ width: 100vw;
+ max-width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+}
+text.begin,
+text.end {
+ font-size: 12pt;
+}
diff --git a/content/assets/stylesheets/datavis/style.css b/content/assets/stylesheets/datavis/style.css
new file mode 100644
index 0000000..e0e9f98
--- /dev/null
+++ b/content/assets/stylesheets/datavis/style.css
@@ -0,0 +1,16 @@
+.viscontainer {
+ display: flex;
+}
+
+.button-container {
+ padding-top: 50px;
+ padding-left: 20px;
+ padding-right: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+
+.button-item {
+ margin-bottom: 10px;
+}
diff --git a/content/blog/17-18/eet-en-drankgewoonten-in-zeus.md b/content/blog/17-18/eet-en-drankgewoonten-in-zeus.md
new file mode 100644
index 0000000..58f82c2
--- /dev/null
+++ b/content/blog/17-18/eet-en-drankgewoonten-in-zeus.md
@@ -0,0 +1,154 @@
+---
+author: Eloïse, Isaura en Lorin
+title: "De eet- en drankgewoonten in Zeus gevisualiseerd"
+created_at: 17-05-2018
+description: Een datavisualisatie project
+toc:
+ depth: 2
+---
+
+
+
+# Introductie
+
+Deze blogpost en de bijhorende visualisaties zijn gemaakt in functie van het vak Datavisualisatie, gegeven door Bart Mesuere.
+In dit vak kregen we de opdracht om een dataset te kiezen en die te visualizeren. Het was natuurlijk een
+no-brainer om de data die we al een aantal jaar aan het vergaren zijn van Haldis, Tap en Tab te gebruiken.
+
+Als je geïnteresseerd genoeg bent in het lezen van deze blogpost, ben je hoogstwaarschijnlijk geïnformeerd genoeg om te weten
+wat Haldis, Tap en Tab zijn, maar voor de ongeïnitieerden volgt een korte uitleg.
+
+## Haldis
+
+Sinds 2 april 2015 maakt Zeus gebruik van Haldis, een applicatie om het bestellen van eten in groep te vergemakkelijken.
+Dit laat onder andere toe dat mensen die nog op weg zijn naar te kelder toch eten kunnen bestellen. Bekijk
+het project op .
+
+## Tap
+
+Tap is onze digitale vervanging van het oude papier-en-streepjes systeem dat we al jaar en dag gebruikten. Elke drankje of
+versnapering was een aantal streepjes waard, wat ons weinig fine-grained controle gaf over de productprijzen.
+
+# Visualisaties
+
+## Haldis
+
+### Afstanden
+
+Op onze eerste visualisatie kunnen we via een timeline zien waar we het vaakst naartoe gaan met Zeus, en welke afstanden
+we bereid zijn om hiervoor te overbruggen. Om de timeslider te gebruiken kan je de timeslider naar beneden of naar boven
+slepen om in of uit te zoomen.
+
+
+Play
+
+### Punchcard
+
+Op onze tweede visualisatie krijgen we te zien wat de populairste uren zijn voor alle restaurants, zo zien we dat we onder
+andere eens 's avonds laat een frietje durven stekken!
+
+
+
+Play
+
+### Instance
+
+In de instance chart van Haldis zien we elke bestelling die
+geplaatst werd, gesorteerd op eerste tijdstip van bestelling.
+
+
+
+
+### Rankings
+
+We zien het verloop van de rangschikking van de verschillende restaurants. Interessant om te zien is onder andere de ongeloofelijke stijging van de Fritoloog als onze favoriete frituur.
+
+
+
+
+## Haldis & Tap
+
+### Co-occurence van Tap en Haldis
+
+Op de volgende chart zien we welke producten er besteld worden op Tap bij bepaalde restaurants op Haldis. Zo zien we onder
+andere dat er 5% vaker Club Maté besteld wordt bij het Blauw Kotje (frieten) dan bij onze favoriet Ocean
+Garden (chinees)!
+
+
+Switch
+
+### Co-occurence van Haldis, Tap en Zeus events
+
+Hier kunnen we verschillende statistieken van Haldis en Tap met elkaar vergelijken, en tegelijkertijd een eventueel verband
+met de Zeus-events bekijken.
+
+
+
+<% content_for :scripts do %>
+
+
+