From 33f5d4d3a6b063a9bc0193d09740adff6862d7db Mon Sep 17 00:00:00 2001 From: Lorin Werthen Date: Fri, 18 May 2018 22:19:43 +0200 Subject: [PATCH] fix safari problems --- content/assets/scripts/datavis/blog.js | 8 +- .../assets/scripts/datavis/instanceChart.js | 5 +- content/assets/scripts/datavis/script2.js | 227 ++++-------------- 3 files changed, 59 insertions(+), 181 deletions(-) diff --git a/content/assets/scripts/datavis/blog.js b/content/assets/scripts/datavis/blog.js index 868d612..ecd47e0 100644 --- a/content/assets/scripts/datavis/blog.js +++ b/content/assets/scripts/datavis/blog.js @@ -101,9 +101,9 @@ // PUNCHCARD (function () { - d3.csv(`/csvdata/punchcard.csv`, e => { return { ...e, starttime: d3.isoParse(e.starttime) } }).then(data => { + 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.getHours()).mapValues(e => e.length).value()).value(); + 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; @@ -173,7 +173,7 @@ // INSTANCE CHART (function () { d3.csv(`/csvdata/punchcard.csv`, e => { - return { ...e, starttime: d3.isoParse(e.starttime) } + return { ...e, starttime: moment(e.starttime) } }).then(data => { function prepareData(data, interval) { data = _(data).sortBy(e => e.starttime).groupBy('name').value(); @@ -225,7 +225,7 @@ } d3.csv(`/csvdata/punchcard.csv`, e => { - return { ...e, starttime: d3.isoParse(e.starttime) } + return { ...e, starttime: moment(e.starttime) } }).then(data => { const prepped = prepareData(data, d3.timeDay.every(1)); diff --git a/content/assets/scripts/datavis/instanceChart.js b/content/assets/scripts/datavis/instanceChart.js index 151380f..7aee7b8 100644 --- a/content/assets/scripts/datavis/instanceChart.js +++ b/content/assets/scripts/datavis/instanceChart.js @@ -31,8 +31,10 @@ const x = d3.scaleTime() .domain(d3.extent(times)) .range([0, width - leftPad]) - // .nice() ; + + console.log(x.domain()); + const y = d3.scaleBand() .domain(d3.keys(data)) @@ -140,7 +142,6 @@ text .style('left', `${d3.event.x + 15}px`) - // .style('left', `${mouse[0] + 120}px`) .style('top', `${d3.event.y - 20}px`) ; diff --git a/content/assets/scripts/datavis/script2.js b/content/assets/scripts/datavis/script2.js index c88a969..9225f2b 100644 --- a/content/assets/scripts/datavis/script2.js +++ b/content/assets/scripts/datavis/script2.js @@ -65,8 +65,11 @@ chart = timeBarChart(); - chart2 = timeBarChart2(); + chart.upper = true; chart.eventdata = eventdata; + + chart2 = timeBarChart(); + chart2.upper = false; chart2.eventdata = eventdata; selection = d3.select('#barchart').append('g'); @@ -136,35 +139,47 @@ .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); + 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'); - const selection = g.selectAll('.datacircle'); - const sellines = g.selectAll('.line'); - const eventlines = g.selectAll('.eventline'); + 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', middle) + .attr('y1', () => my.upper ? middle : padding.top) .attr('x2', d => xScale(d.date)) - .transition() - .attr('y2', d => yScale1(d.value)); + .attr('y2', d => my.upper ? yScale1(d.value) : yScale2(d.value)); eventlines .attr('x1', d => xScale(d.date)) - .attr('y1', middle) + .attr('y1', () => my.upper ? middle : padding.top) .attr('x2', d => xScale(d.date)) - .transition() .attr('y2', (d) => { let yValue = 0; selection.data().forEach(function (el) { @@ -172,21 +187,27 @@ yValue = el.value; } }) - return yScale1(yValue); + return my.upper ? yScale1(yValue) : yScale2(yValue); }); selection - .transition() .attr('cx', d => xScale(d.date)) - .attr('cy', d => yScale1(d.value)); + .attr('cy', d => my.upper ? yScale1(d.value) : yScale2(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); + 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'; @@ -196,9 +217,9 @@ .append('line') .attr('stroke', '#ddd') .attr('stroke-width', 2) - .attr('class', 'line') - .merge(sellines) - .transition(t); + .attr('class', () => my.upper ? 'line' : 'line2') + .attr('transform', () => my.upper ? `translate(0, 0)` : `translate(0, ${middle - padding.bottom})`) + .merge(sellines); eventlines.exit().remove(); @@ -206,7 +227,8 @@ .append('line') .attr('stroke', '#f4a442') .attr('stroke-width', 2) - .attr('class', 'eventline') + .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'); @@ -223,17 +245,18 @@ .style("top", (rect.top - t_rect.height - 5) + "px"); }) .on("mouseout", _ => { - div.style("opacity", 0); + const tooltip = d3.select('.tooltip'); + tooltip.style("opacity", 0); }) - .merge(eventlines) - .transition(t); + .merge(eventlines); selection.exit().remove(); selection.enter() .append('circle') .attr('fill', 'lightblue') - .attr('class', 'datacircle') + .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'); @@ -250,11 +273,11 @@ .style("top", (rect.top - t_rect.height - 5) + "px"); }) .on("mouseout", _ => { - div.style("opacity", 0); + const tooltip = d3.select('.tooltip'); + tooltip.style("opacity", 0); }) .merge(selection) .attr('r', 3) - .transition(t) ; update(); @@ -263,152 +286,6 @@ 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 = {