diff --git a/Gemfile b/Gemfile
index ca9cbca..cc2eb1e 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,7 @@ end
group :production do
# Autoprefixing for class
gem 'autoprefixer-rails'
- gem 'html_press'
+ gem 'htmlcompressor'
end
group :nanoc do
diff --git a/Gemfile.lock b/Gemfile.lock
index 6fb51d5..14fbc24 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -3,9 +3,9 @@ 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
builder (3.2.3)
coderay (1.1.2)
@@ -17,17 +17,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 +42,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 +51,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 +66,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 +77,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 +100,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)
@@ -130,7 +117,7 @@ DEPENDENCIES
coffee-script
guard-nanoc
highline
- html_press
+ htmlcompressor
icalendar
kramdown
nanoc
@@ -140,6 +127,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..ecd47e0
--- /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: moment(e.starttime) } }).then(data => {
+ function prepareData(data) {
+ let grouped = _(data).groupBy(e => e.name).mapValues(e => _(e).groupBy(e => e.starttime.hour()).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: moment(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: moment(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..7aee7b8
--- /dev/null
+++ b/content/assets/scripts/datavis/instanceChart.js
@@ -0,0 +1,172 @@
+(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])
+ ;
+
+ console.log(x.domain());
+
+
+ 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('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..9225f2b
--- /dev/null
+++ b/content/assets/scripts/datavis/script2.js
@@ -0,0 +1,334 @@
+(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();
+ chart.upper = true;
+ chart.eventdata = eventdata;
+
+ chart2 = timeBarChart();
+ chart2.upper = false;
+ 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]);
+
+ svg.select('.x.axis')
+ .transition(t)
+ .call(xAxis);
+
+ if (my.upper) {
+ yScale1.domain(d3.extent(dt, d => d.value));
+ svg.select('.y.axis')
+ .transition(t)
+ .call(yAxis1);
+ } else {
+ yScale2.domain(d3.extent(dt, d => d.value));
+ svg.select('.y.axis2')
+ .transition(t)
+ .call(yAxis2);
+ }
+
+ function update() {
+ let g = d3.select('svg#barchart > g');
+
+ var selection, sellines, eventlines;
+ if (my.upper) {
+ selection = g.selectAll('.datacircle');
+ sellines = g.selectAll('.line');
+ eventlines = g.selectAll('.eventline');
+ } else {
+ selection = g.selectAll('.datacircle2');
+ sellines = g.selectAll('.line2');
+ eventlines = g.selectAll('.eventline2');
+ }
+
+ sellines
+ .attr('x1', d => xScale(d.date))
+ .attr('y1', () => my.upper ? middle : padding.top)
+ .attr('x2', d => xScale(d.date))
+ .attr('y2', d => my.upper ? yScale1(d.value) : yScale2(d.value));
+
+ eventlines
+ .attr('x1', d => xScale(d.date))
+ .attr('y1', () => my.upper ? middle : padding.top)
+ .attr('x2', d => xScale(d.date))
+ .attr('y2', (d) => {
+ let yValue = 0;
+ selection.data().forEach(function (el) {
+ if (el.date === d.date) {
+ yValue = el.value;
+ }
+ })
+ return my.upper ? yScale1(yValue) : yScale2(yValue);
+ });
+
+ selection
+ .attr('cx', d => xScale(d.date))
+ .attr('cy', d => my.upper ? yScale1(d.value) : yScale2(d.value));
+
+ }
+
+ const fed = filterData(eventdata, my.domain.start, my.domain.end);
+
+ var selection, sellines, eventlines;
+ if (my.upper) {
+ selection = svg.selectAll('.datacircle').data(dt, d => d.date);
+ sellines = svg.selectAll('.line').data(dt, d => d.date);
+ eventlines = svg.selectAll('.eventline').data(fed, d => d.date);
+ } else {
+ selection = svg.selectAll('.datacircle2').data(dt, d => d.date);
+ sellines = svg.selectAll('.line2').data(dt, d => d.date);
+ 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', () => my.upper ? 'line' : 'line2')
+ .attr('transform', () => my.upper ? `translate(0, 0)` : `translate(0, ${middle - padding.bottom})`)
+ .merge(sellines);
+
+ eventlines.exit().remove();
+
+ eventlines.enter()
+ .append('line')
+ .attr('stroke', '#f4a442')
+ .attr('stroke-width', 2)
+ .attr('class', () => my.upper ? 'eventline' : 'eventline2')
+ .attr('transform', () => my.upper ? `translate(0, 0)` : `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", _ => {
+ const tooltip = d3.select('.tooltip');
+ tooltip.style("opacity", 0);
+ })
+ .merge(eventlines);
+
+ selection.exit().remove();
+
+ selection.enter()
+ .append('circle')
+ .attr('fill', 'lightblue')
+ .attr('class', () => my.upper ? 'datacircle' : 'datacircle2')
+ .attr('transform', () => my.upper ? `translate(0, 0)` : `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", _ => {
+ const tooltip = d3.select('.tooltip');
+ tooltip.style("opacity", 0);
+ })
+ .merge(selection)
+ .attr('r', 3)
+ ;
+
+ 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..1556de6
--- /dev/null
+++ b/content/assets/scripts/datavis/timeSlider.js
@@ -0,0 +1,189 @@
+(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) {
+ sliderValue = value
+
+ nx = xScale(sliderValue[0]);
+ width = xScale(sliderValue[1]) - xScale(sliderValue[0]);
+ midPoint = nx + width / 2;
+
+ inner.attr('x', nx)
+ .attr('width', width);
+
+ const fmtStr = 'DD/MM/YY'
+
+ t1.text(moment(sliderValue[0]).format(fmtStr))
+ .attr('x', nx)
+ .attr('transform', `rotate(45 ${nx},50) translate(20,20)`);
+ t2.text(moment(sliderValue[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..45402d5
--- /dev/null
+++ b/content/blog/17-18/eet-en-drankgewoonten-in-zeus.md
@@ -0,0 +1,152 @@
+---
+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](https://zeus.ugent.be/haldis) en [Tap](https://zeus.ugent.be/tap) 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 . We hebben over die aantal jaar een vierhonderdtal bestellingen geplaatst. Handmatig alle bestellingen opnemen heeft geen plaats meer in Zeus!
+
+## Tap
+
+Tap is onze digitale vervanging van het oude papier-en-streepjes systeem dat we al jaar en dag gebruikten om drankjes te verkopen in de kelder. Elke drankje of
+versnapering was een aantal streepjes waard, wat ons weinig fine-grained controle gaf over de productprijzen. Met Tap losten we dit probleem op met een hypermodern alternatief --- een tablet (genaamd koelkast) op de koelkast.
+
+# 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.
+
+We zien natuurlijk dat we vaak rond de Zeus kelder onze restaurants kiezen. Als je echter de timeslider rond het academiejaar '16-'17 zet, zie je dat we nogal avontuurlijk waren! We gingen buiten onze comfortzone, en zochten restaurants verder en verder op! We denken dat dit voornamelijk komt doordat er meer Zeusleden waren die met de auto wat verder eten konden halen (vooral Benji ❤️).
+
+
+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 bij 't Blauw Kotje! Bij de Fritoloog doen we dit minder vaak. Dit zal voornamelijk te wijten zijn aan het feit dat we nu minder laat in de kelder zitten. Door de timeslider op een vorig academiejaar te zetten kunnen we dit zien.
+
+
+
+Play
+
+### Instance
+
+In de instance chart van Haldis zien we elke bestelling die
+geplaatst werd, gesorteerd op eerste tijdstip van bestelling. Merk op hoe de Fritoloog plots onze favoriete frituur is geworden! Ook zien we dat pizza iets minder populair is geworden, en dat Ocean Garden onze favoriet blijft. Onze liefde voor Chinees is dus niet voor maar "tien minuutjes!", maar voor eeuwig.
+
+
+
+
+### 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 %>
+
+
+