From b307254b4e4b93eb9478f029f11bb0336768ec0a Mon Sep 17 00:00:00 2001 From: collnell Date: Wed, 28 Jul 2021 13:55:43 -0500 Subject: [PATCH 01/21] adjust legend spacing --- src/components/GWL.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index d1f5be5..318eb79 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -102,6 +102,7 @@ export default { // make a legend var legend_peak = this.svg.append("g").classed("legend", true) var legend_keys = ["Very high", "High", "Normal", "Low", "Very low"]; + var shape_dist = [5,25,42,43,60,83,103]; // draw path shapes legend_peak.selectAll("peak_symbol") @@ -110,11 +111,11 @@ export default { .append("path") .attr("fill", function(d){return d["color"]}) .attr("d", function(d){return d["path_quant"]}) - .attr("transform", function(d, i){return "translate(50, " + (580-i*20) + ") scale(.8)"}) + .attr("transform", function(d, i){return "translate(50, " + (580-shape_dist[i]) + ") scale(.8)"}) .attr("id", function(d){return d["quant"]}) .attr("class", "peak_symbol") .attr("x", 50) - .attr("y", function(d,i){ return 500 + i*20}) // 100 is where the first dot appears. 25 is the distance between dots + //.attr("y", function(d,i){ return 500 + i*20}) // 100 is where the first dot appears. 25 is the distance between dots // add categorical labels very low - very high legend_peak.selectAll("mylabels") @@ -122,7 +123,7 @@ export default { .enter() .append("text") .attr("x", 70) - .attr("y", function(d,i){ return 500 + i*20}) // 100 is where the first dot appears. 25 is the distance between dots + .attr("y", function(d,i){ return 493 + i*23}) // 100 is where the first dot appears. 25 is the distance between dots .text(function(d){ return d}) .attr("text-anchor", "left") .style("alignment-baseline", "middle") From aa82bb5dedff49ad27e7fb9d678a642596b98879 Mon Sep 17 00:00:00 2001 From: collnell Date: Wed, 28 Jul 2021 18:39:15 -0500 Subject: [PATCH 02/21] bar plot by category --- src/components/GWL.vue | 167 +++++++++++++++++++++++++++++++++++------ 1 file changed, 145 insertions(+), 22 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 318eb79..5765165 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -1,12 +1,12 @@ @@ -24,10 +24,12 @@ export default { d3: null, quant_peaks: null, date_peaks: null, - svg_files: null, svg: null, peaky: null, site_coords: null, + site_count: null, + percData: null, + peak_grp: null, day_length: 20, // frame duration in milliseconds @@ -54,7 +56,9 @@ export default { let promises = [ self.d3.csv(self.publicPath + "quant_peaks.csv", this.d3.autotype), // used to draw legend shapes self.d3.csv(self.publicPath + "date_peaks.csv", this.d3.autotype), - self.d3.csv(self.publicPath + "gw_sites.csv", this.d3.autotype) + self.d3.csv(self.publicPath + "gw_sites.csv", this.d3.autotype), + self.d3.csv(self.publicPath + "gwl_daily_count.csv", this.d3.autotype), + self.d3.json(self.publicPath + "perc_df.json", this.d3.autotype) ]; Promise.all(promises).then(self.callback); // once it's loaded }, @@ -63,6 +67,11 @@ export default { this.quant_peaks = data[0]; // peak shapes for legend this.date_peaks = data[1]; // gwl timeseries data this.site_coords = data[2]; // site positioning on svg + this.site_count = data[3]; // number of sites x quant_category x wyday + var jtest = data[3]; + // let jtest = this.d3.json(self.publicPath + "perc_df.json"); + // console.log(jtest) + // water days var wyday = this.date_peaks.columns @@ -93,16 +102,42 @@ export default { .domain([-40, -25, 25, 40]) .range(["#1A3399","#479BC5","#669957","#C1A53A","#7E1900"]) // using a slightly darker green - // draw the chart + //same for bar chart data + var quant_cat = [...new Set(this.quant_peaks.map(function(d) { return d.quant}))]; + var n_quant = quant_cat.length + var perc = this.site_count.map(function(d){ return d[quant_cat[0]]; }); + this.percData = []; + for (i = 0; i < n_quant; i++) { + var key_quant = quant_cat[i]; + var wyday = this.site_count.map(function(d){ return d['wyday']}); + var perc = this.site_count.map(function(d){ return d[key_quant]}); + this.percData.push({key_quant: key_quant, wyday: wyday, perc: perc}) + }; + console.log(this.percData) + + // draw the chart this.makeLegend(); this.drawFrame1(this.peaky); + + // animated bar chart + //this.legendBarChart(this.percData); + }, makeLegend(){ - // make a legend - var legend_peak = this.svg.append("g").classed("legend", true) - var legend_keys = ["Very high", "High", "Normal", "Low", "Very low"]; - var shape_dist = [5,25,42,43,60,83,103]; + var legend_height = 300; + var legend_width = 500; + + // make a legend + var legend_peak = this.d3.select("#legend-container") + .append("svg") + .attr("width", legend_width) + .attr("height", legend_height) + .attr("id", "map-legend") + .append("g").classed("legend", true) + + var legend_keys = ["Very low", "low", "Normal", "High","Very high"]; + var shape_dist = [5,25,42,42,60,83,103]; // draw path shapes legend_peak.selectAll("peak_symbol") @@ -111,22 +146,21 @@ export default { .append("path") .attr("fill", function(d){return d["color"]}) .attr("d", function(d){return d["path_quant"]}) - .attr("transform", function(d, i){return "translate(50, " + (580-shape_dist[i]) + ") scale(.8)"}) + .attr("transform", function(d, i){return "translate(250, " + (legend_height/2-shape_dist[i]) + ") scale(.8)"}) .attr("id", function(d){return d["quant"]}) .attr("class", "peak_symbol") - .attr("x", 50) - //.attr("y", function(d,i){ return 500 + i*20}) // 100 is where the first dot appears. 25 is the distance between dots - + // add categorical labels very low - very high legend_peak.selectAll("mylabels") .data(legend_keys) .enter() .append("text") - .attr("x", 70) - .attr("y", function(d,i){ return 493 + i*23}) // 100 is where the first dot appears. 25 is the distance between dots + .attr("x", 270) + .attr("y", function(d,i){ return legend_height/2 - (i*22)}) // 100 is where the first dot appears. 25 is the distance between dots .text(function(d){ return d}) .attr("text-anchor", "left") .style("alignment-baseline", "middle") + }, drawFrame1(data){ const self = this; @@ -148,6 +182,7 @@ export default { .attr("d", function(d) { return "M-10 0 C -10 0 0 " + d.gwl[start] + " 10 0 Z" } ) // d.gwl.# corresponds to day of wy, starting with 0 this.animateGWL(start); // once sites are drawn, trigger animation + this.legendBarChart(this.percData, start); }, animateGWL(start){ const self = this; @@ -171,6 +206,79 @@ export default { .attr("d", function(d) { return "M-10 0 C -10 0 0 " + d.gwl[364] + " 10 0 Z" }) } + }, + legendBarChart(data, start){ + // bar chart showing proportion of gages in each category + + // scales + var w = 225; + var h = 110; + + var xScale = this.d3.scaleLinear() + .domain([0,0.55]) + .range([0, w]) + + var yScale = this.d3.scaleBand() + .domain(["Veryhigh", "High", "Normal", "Low", "Verylow"]) + .range([h, 0]) + + // add bar chart + var svg = this.d3.select("#map-legend") + .append("g") + .classed("bar-chart", true) + + svg.selectAll("rect") + .data(data) + .enter() + .append("rect") + .classed("bars", true) + .attr("width", function(d) { + return xScale(d.perc[start]); + }) + .attr("y", function(d, i) { + return 145 - yScale(d.key_quant) + }) + .attr("x", function(d) { + return w - xScale(d.perc[start]) + }) + .attr("id", function(d){ return d.key_quant}) + .attr("height", "10") + .attr("fill", "royalblue") + + this.animateBarChart(start); + + + }, + animateBarChart(start){ + + var xScale = this.d3.scaleLinear() + .domain([0,0.55]) + .range([0, 225]) + + if (start < 364){ + this.d3.selectAll(".bars") + .transition() + .duration(this.day_length) + .attr("x", function(d) { + return 225 - xScale(d.perc[start]) + }) + .attr("width", function(d) { + return xScale(d.perc[start]); + }) + .end() + .then(() => this.animateBarChart(start+1)) + } else { + this.d3.selectAll(".bars") + .transition() + .duration(this.day_length) + .attr("x", function(d) { + return 225 - xScale(d.perc[364]) + }) + .attr("width", function(d) { + return xScale(d.perc[364]); + }) + + } } } } @@ -178,23 +286,38 @@ export default { \ No newline at end of file From 44f11811f9e3cfcedea7f48fbc6639f4b1129378 Mon Sep 17 00:00:00 2001 From: collnell Date: Fri, 13 Aug 2021 16:45:25 -0500 Subject: [PATCH 05/21] import gsap --- src/components/GWL.vue | 4 +++- src/main.js | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 59f210d..54ea6a6 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -15,6 +15,8 @@ \ No newline at end of file From fa6573c969ad156c8ac354ea1f723b83a1d2f8a7 Mon Sep 17 00:00:00 2001 From: collnell Date: Thu, 30 Sep 2021 11:11:29 -0500 Subject: [PATCH 14/21] rescale timeline with screen --- src/components/GWL.vue | 115 ++++-------------------------------- src/views/Visualization.vue | 7 +-- 2 files changed, 13 insertions(+), 109 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index b8c989d..ea906bf 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -9,7 +9,6 @@
-

Seitan 8-bit in, veniam pickled pitchfork hammock sustainable aliqua edison bulb. Four dollar toast man bun affogato crucifix locavore ut, labore quinoa gastropub qui reprehenderit adipisicing chicharrones asymmetrical. Live-edge squid banjo bespoke prism migas post-ironic tousled kitsch aute banh mi veniam ut kogi. Literally woke sriracha taxidermy freegan +1 voluptate church-key tempor cornhole humblebrag small batch fanny pack.

@@ -167,8 +166,7 @@ export default { this.makeLegend(); this.drawFrame1(this.peaky); - // animated bar chart - this.legendBarChart(this.percData); + // animated time chart this.drawLine(this.days, this.percData) }, @@ -191,7 +189,7 @@ export default { .attr("width", "100%") //.attr("height", line_height) .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewbox", "0 0 " + line_width + " " + line_height) + .attr("viewBox", "0 0 " + line_width + " " + line_height) .attr("id", "x-line") // scale space @@ -207,7 +205,7 @@ export default { // draw axes var liney = svg.append("g") .call(xLine) - .attr("transform", "translate(0," + 130 + ")") + .attr("transform", "translate(0," + 100 + ")") .classed("liney", true) // style axes @@ -219,7 +217,7 @@ export default { // timeline events/"buttons" var button_month = svg.append("g") .classed("#btn-month", true) - .attr("transform", "translate(0," + 130 + ")") + .attr("transform", "translate(0," + 100 + ")") .attr("z-index", 100) // month points on timeline @@ -296,7 +294,7 @@ export default { var line_chart = svg.append("g") .classed("time-chart", true) .attr("id", "time-legend") - .attr("transform", "translate(0," + 30 + ")") + .attr("transform", "translate(0," + 0 + ")") var y = this.d3.scaleLinear() .domain([0, 0.5]) @@ -324,7 +322,7 @@ export default { .attr("stroke-width", "3px") .attr("opacity", 0.7); - // aimate line to time + // animate line to time var start = this.start; line_chart.append("rect") @@ -441,7 +439,7 @@ export default { makeLegend(){ var legend_height = 150; - var legend_width = 220; + var legend_width = 240; // make a legend var legend_peak = this.d3.select("#legend-container") @@ -452,7 +450,7 @@ export default { .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewbox", "0 0 " + legend_width + " " + legend_height) .append("g").classed("legend", true) - .attr("transform", "translate(100, 0)") + .attr("transform", "translate(90, 0)") var legend_keys = ["Very low", "Low", "Normal", "High","Very high"]; // labels var shape_dist = [5,25,42,42,60,83,103]; // y positioning (normal has 2 shapes butted together) @@ -552,98 +550,6 @@ export default { .duration(this.day_length) // duration of each day .attr("d", function(d) { return "M-10 0 C -10 0 0 " + d.gwl[this.n_days] + " 10 0 Z" }) } - - }, - legendBarChart(data, start){ - // bar chart showing proportion of gages in each category - - // scales - var w = 200; - var h = 110; - - var xScale = this.d3.scaleLinear() - .domain([0, 0.5]) - .range([0, w]) - - var yScale = this.d3.scaleBand() - .domain(["Veryhigh", "High", "Normal", "Low", "Verylow"]) - .range([h, 0]) - - var bar_color = this.d3.scaleOrdinal() - .domain(["Veryhigh", "High", "Normal", "Low","Verylow"]) - .range(["#1A3399","#479BC5","#D1ECC9","#C1A53A","#7E1900"]) - - // add bar chart - var svg = this.d3.select("#map-legend") - .append("g") - .classed("bar-chart", true) - - // the dancing bar chart legend - /* svg.selectAll("rect") - .data(data) - .enter() - .append("rect") - .classed("bars", true) - .attr("width", function(d) { - return xScale(d.perc[start]); - }) - .attr("y", function(d, i) { - return 146 - yScale(d.key_quant) - }) - .attr("x", function(d) { - //return w + xScale(d.perc[start]) - return 150 - }) - .attr("id", function(d){ return d.key_quant}) - .attr("height", "12") - .attr("fill", function(d) { return bar_color(d.key_quant) }) - .attr("opacity", 0.8) */ - - // axes - /* var xAxis = this.d3.axisBottom() - .scale(xScale) - .ticks(5); - - svg.append("g") - .attr("transform", "translate(150," + 170 + ")") - .classed("x-axis", true) - .call(xAxis) */ - - // then animate it - this.animateBarChart(start); - - }, - animateBarChart(start){ - - var xScale = this.d3.scaleLinear() - .domain([0,0.5]) - .range([0, 225]) - - if (start < 364){ - this.d3.selectAll(".bars") - .transition() - .duration(this.day_length) - .attr("x", function(d) { - return 150 - }) - .attr("width", function(d) { - return xScale(d.perc[start]); - }) - .end() - .then(() => this.animateBarChart(start+1)) - } else { - this.d3.selectAll(".bars") - .transition() - .duration(this.day_length) - .ease(this.d3.easeCubic) - .attr("x", function(d) { - return 150 - }) - .attr("width", function(d) { - return xScale(d.perc[364]); - }) - } - } } } @@ -654,6 +560,7 @@ export default { // mobile first #grid-container { display: grid; + padding: 1rem; width: 100%; vertical-align: middle; overflow: hidden; @@ -691,8 +598,8 @@ export default { #legend-container { grid-area: legend; display: flex; - justify-content: end; - align-items: start; + justify-content: flex-end; + align-items: flex-start; } #time-container { grid-area: time; diff --git a/src/views/Visualization.vue b/src/views/Visualization.vue index 07e7646..210ceda 100644 --- a/src/views/Visualization.vue +++ b/src/views/Visualization.vue @@ -10,14 +10,11 @@ export default { name: 'Visualization', components: { GWL: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/GWL") - //DA: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/DA") - + }, computed: { }, - mounted(){ - const self = this; - + mounted(){ }, methods:{ } From 6a34da3d2c18e4b4db1b7676d20b35e2ea37ce91 Mon Sep 17 00:00:00 2001 From: collnell Date: Thu, 30 Sep 2021 11:57:29 -0500 Subject: [PATCH 15/21] adjust mobile padding --- src/components/GWL.vue | 43 +++++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index ea906bf..6be1630 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -181,13 +181,12 @@ export default { var line_width = this.width; var line_height = 250; - var mar = 50; + var mar = 20; // set up svg for timeline var svg = this.d3.select("#line-container") .append("svg") .attr("width", "100%") - //.attr("height", line_height) .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "0 0 " + line_width + " " + line_height) .attr("id", "x-line") @@ -195,7 +194,7 @@ export default { // scale space var xScale = this.d3.scaleLinear() .domain([1, 367]) - .range([mar, line_width-mar]) + .range([mar, line_width-2*mar]) // define axes var xLine = this.d3.axisBottom() @@ -276,14 +275,14 @@ export default { button_month .append("text") .attr("class", function(d,i) { return "button_year" } ) - .attr("x", function(d) { return xScale(367)-10 }) // centering on pt + .attr("x", function(d) { return xScale(367)-20 }) // centering on pt .attr("y", 45) .attr("stroke", this.button_color) .text(function(d, i) { return 2022 }) button_month .append("text") - .attr("class", function(d,i) { return "button_year" } ) + .attr("class", function(d,i) { return "axis_label" } ) .attr("x", function(d) { return xScale(1)-10 }) // centering on pt .attr("y", -110) .attr("stroke", this.button_color) @@ -328,7 +327,7 @@ export default { line_chart.append("rect") .data(this.days) .classed("hilite", true) - .attr("transform", "translate(0, 0)") + .attr("transform", "translate(1, 0)") .attr("width", "5") .attr("height", "100") .attr("opacity", 0.5) @@ -525,7 +524,7 @@ export default { .attr("fill", function(d) { return self.quant_color(d.gwl[0]) }) // this is not exactly right .attr("stroke-width", "1px") .attr("opacity", ".5") - .attr("d", function(d) { return "M-7 0 C -7 0 0 " + d.gwl[start]*1.5 + " 7 0 Z" } ) // d.gwl.# corresponds to day of wy, starting with 0 + .attr("d", function(d) { return "M-10 0 C -10 0 0 " + d.gwl[start]*1.5 + " 10 0 Z" } ) // d.gwl.# corresponds to day of wy, starting with 0 this.animateGWL(start); // once sites are drawn, trigger animation //this.legendBarChart(this.percData, start); @@ -560,7 +559,7 @@ export default { // mobile first #grid-container { display: grid; - padding: 1rem; + padding-right: 2rem; width: 100%; vertical-align: middle; overflow: hidden; @@ -572,14 +571,16 @@ export default { } #map-container{ grid-area: map; + padding: 1rem; + padding-right: 2rem; .map { - padding: 1rem; } } #text-container { grid-area: text; padding:20px; padding-top: 0px; + padding-right: 2rem; // controlling positioning within div as page scales display: flex; justify-content: center; @@ -587,13 +588,11 @@ export default { } #line-container { grid-area: line; - margin-bottom: 20px; + margin-bottom: 10px; /* display: flex; justify-content: center; align-items: center; */ - svg { - } } #legend-container { grid-area: legend; @@ -601,13 +600,6 @@ export default { justify-content: flex-end; align-items: flex-start; } -#time-container { - grid-area: time; - margin: 2%; - margin-bottom: 2px; - margin-right: 5%; - height: auto; -} #title-container { padding:20px; padding-bottom: 0px; @@ -634,6 +626,7 @@ export default { color: #4b4a4a; } + // desktop @media (min-width:1024px) { #grid-container { @@ -654,6 +647,18 @@ export default { align-items: center; } + #line-container { + grid-area: line; + margin-bottom: 10px; + margin-left: 10px; + +/* display: flex; + justify-content: center; + align-items: center; */ + + svg { + } +} } \ No newline at end of file From a98a2cd9d771ffac6f051e7614e3a07b984f244c Mon Sep 17 00:00:00 2001 From: collnell Date: Fri, 1 Oct 2021 08:36:14 -0500 Subject: [PATCH 16/21] darken green color --- public/quant_peaks.csv | 4 +- src/components/GWL.vue | 101 ++++++++++++++++------------------------- 2 files changed, 41 insertions(+), 64 deletions(-) diff --git a/public/quant_peaks.csv b/public/quant_peaks.csv index 32fa95d..186cfd7 100644 --- a/public/quant_peaks.csv +++ b/public/quant_peaks.csv @@ -1,7 +1,7 @@ color,peak_mid,quant,path_quant #7E1900,5,Verylow,M-10 0 C -10 0 0 45 10 0 Z #C1A53A,17.5,Low,M-10 0 C -10 0 0 32 10 0 Z -#D1ECC9,50,Normal,M-10 0 C -10 0 0 15 10 0 Z -#D1ECC9,50,Normal,M-10 0 C -10 0 0 -15 10 0 Z +#8fce83,50,Normal,M-10 0 C -10 0 0 15 10 0 Z +#8fce83,50,Normal,M-10 0 C -10 0 0 -15 10 0 Z #479BC5,82.5,High,M-10 0 C -10 0 0 -32 10 0 Z #1A3399,95,Veryhigh,M-10 0 C -10 0 0 -45 10 0 Z diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 6be1630..97ae29f 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -57,6 +57,7 @@ export default { // style for timeline button_color: "grey", button_hilite: "black", + green: "rgb(143, 206, 131)", // TODO: derive from pipeline. inputs are months, day sequence nested w/ key @@ -147,7 +148,7 @@ export default { // set color scale for path fill this.quant_color = this.d3.scaleThreshold() .domain([-40, -25, 25, 40]) - .range(["#1A3399","#479BC5","#669957","#C1A53A","#7E1900"]) // using a slightly darker green + .range(["#1A3399","#479BC5",this.green,"#C1A53A","#7E1900"]) // using a slightly darker green //same for bar chart data var quant_cat = [...new Set(this.quant_peaks.map(function(d) { return d.quant}))]; @@ -193,7 +194,7 @@ export default { // scale space var xScale = this.d3.scaleLinear() - .domain([1, 367]) + .domain([0, this.n_days]) .range([mar, line_width-2*mar]) // define axes @@ -204,7 +205,7 @@ export default { // draw axes var liney = svg.append("g") .call(xLine) - .attr("transform", "translate(0," + 100 + ")") + .attr("transform", "translate(0," + 120 + ")") .classed("liney", true) // style axes @@ -216,11 +217,11 @@ export default { // timeline events/"buttons" var button_month = svg.append("g") .classed("#btn-month", true) - .attr("transform", "translate(0," + 100 + ")") + .attr("transform", "translate(0," + 120 + ")") .attr("z-index", 100) // month points on timeline - // TODO: make functions that accept any date and label + // TODO: make functions that accept any date and label for annotations button_month.selectAll(".button_inner") .data(this.months).enter() .append("circle") @@ -293,7 +294,7 @@ export default { var line_chart = svg.append("g") .classed("time-chart", true) .attr("id", "time-legend") - .attr("transform", "translate(0," + 0 + ")") + .attr("transform", "translate(0," + 20 + ")") var y = this.d3.scaleLinear() .domain([0, 0.5]) @@ -301,7 +302,7 @@ export default { var bar_color = this.d3.scaleOrdinal() .domain(["Veryhigh", "High", "Normal", "Low","Verylow"]) - .range(["#1A3399","#479BC5","#D1ECC9","#C1A53A","#7E1900"]) + .range(["#1A3399","#479BC5",this.green,"#C1A53A","#7E1900"]) var line = this.d3.line() .defined(d => !isNaN(d)) @@ -327,22 +328,21 @@ export default { line_chart.append("rect") .data(this.days) .classed("hilite", true) - .attr("transform", "translate(1, 0)") + //.attr("transform", "translate(1, 0)") .attr("width", "5") .attr("height", "100") .attr("opacity", 0.5) .attr("fill", "grey") .attr("x", xScale(this.days[start])) - this.animateLine(start) - + this.animateLine(start); }, animateLine(start){ // animates grey line on timeseries chart to represent current timepoint - var line_width = 1100; - var line_height = 200; - var mar = 50; + var line_width = this.width; + var line_height = 250; + var mar = 20; var x = this.d3.scaleLinear() .domain([1, this.n_days]) @@ -356,11 +356,11 @@ export default { .end() .then(() => this.animateLine(start+1)) } else { - this.d3.selectAll(".hilite") - .transition() - .duration(this.day_length) - .attr("x", x(this.days[this.n_days])) - } + this.d3.selectAll(".hilite") + .transition() + .duration(this.day_length) + .attr("x", x(this.days[this.n_days])) + } }, buttonSelect(d){ // highlight on timeline when hovered @@ -397,11 +397,6 @@ export default { .attr("fill", this.button_color) .attr("stroke", this.button_color) }, - /* moveTimeline(d){ - this.start = d.day; - this.animateLine(this.start) - - }, */ initTime(){ // TO DO: init nested timelines for playback control // broken up by month and tagged for user control @@ -441,7 +436,7 @@ export default { var legend_width = 240; // make a legend - var legend_peak = this.d3.select("#legend-container") + var legend_peak = this.d3.select("#legend-container") .append("svg") .attr("width", legend_width) .attr("height", legend_height) @@ -451,28 +446,28 @@ export default { .append("g").classed("legend", true) .attr("transform", "translate(90, 0)") - var legend_keys = ["Very low", "Low", "Normal", "High","Very high"]; // labels - var shape_dist = [5,25,42,42,60,83,103]; // y positioning (normal has 2 shapes butted together) - var perc_label = ["0 - 0.1", "0.1 - 0.25" ,"0.25 - 0.75", "0.75 - 0.9", "0.9+"] + var legend_keys = ["Very low", "Low", "Normal", "High","Very high"]; // labels + var shape_dist = [5,25,42,42,60,83,103]; // y positioning (normal has 2 shapes butted together) + var perc_label = ["0 - 0.1", "0.1 - 0.25" ,"0.25 - 0.75", "0.75 - 0.9", "0.9+"] // draw path shapes and labels legend_peak - .append("text") - .text("GWL") - .attr("x", -20) - .attr("y", "30") - .style("font-size", "20") - .style("font-weight", 700) - .attr("text-anchor", "end") + .append("text") + .text("GWL") + .attr("x", -20) + .attr("y", "30") + .style("font-size", "20") + .style("font-weight", 700) + .attr("text-anchor", "end") legend_peak - .append("text") - .text("Percentile") - .attr("x", 105) - .attr("y", "30") - .style("font-size", "20") - .style("font-weight", 700) - .attr("text-anchor", "end") + .append("text") + .text("Percentile") + .attr("x", 105) + .attr("y", "30") + .style("font-size", "20") + .style("font-weight", 700) + .attr("text-anchor", "end") legend_peak.selectAll("peak_symbol") .data(this.quant_peaks) @@ -511,7 +506,6 @@ export default { const self = this; // select existing paths using class - // was dropping positioning because svg-loader and svgo are cleaning out s? var start = this.start; this.peak_grp = this.svg.selectAll("path.peak") .data(data, function(d) { return d ? d.key : this.class; }) // binds data based on class/key @@ -524,10 +518,9 @@ export default { .attr("fill", function(d) { return self.quant_color(d.gwl[0]) }) // this is not exactly right .attr("stroke-width", "1px") .attr("opacity", ".5") - .attr("d", function(d) { return "M-10 0 C -10 0 0 " + d.gwl[start]*1.5 + " 10 0 Z" } ) // d.gwl.# corresponds to day of wy, starting with 0 + .attr("d", function(d) { return "M-10 0 C -10 0 0 " + d.gwl[start]*1 + " 10 0 Z" } ) // d.gwl.# corresponds to day of wy, starting with 0 this.animateGWL(start); // once sites are drawn, trigger animation - //this.legendBarChart(this.percData, start); }, animateGWL(start){ const self = this; @@ -573,8 +566,6 @@ export default { grid-area: map; padding: 1rem; padding-right: 2rem; - .map { - } } #text-container { grid-area: text; @@ -589,10 +580,6 @@ export default { #line-container { grid-area: line; margin-bottom: 10px; -/* display: flex; - justify-content: center; - align-items: center; */ - } #legend-container { grid-area: legend; @@ -607,13 +594,12 @@ export default { grid-area: title; h1, h2, h3 { width: 95vw; - color:rgb(34, 33, 33); + color:"black"; height: auto; padding: 4px; } } - // drop shadow on map outline #bkgrd-map-grp { filter: drop-shadow(0.2rem 0.2rem 0.5rem rgba(38, 49, 43, 0.15)); @@ -623,10 +609,9 @@ export default { // annotated timeline .liney { stroke-width: 2px; - color: #4b4a4a; + color: rgb(143, 206, 131); } - // desktop @media (min-width:1024px) { #grid-container { @@ -645,19 +630,11 @@ export default { display: flex; justify-content: center; align-items: center; - } #line-container { grid-area: line; margin-bottom: 10px; margin-left: 10px; - -/* display: flex; - justify-content: center; - align-items: center; */ - - svg { - } } } From c5e561b235e8a8011cf230a53d14d66dfbb291b9 Mon Sep 17 00:00:00 2001 From: collnell Date: Fri, 1 Oct 2021 10:32:20 -0500 Subject: [PATCH 17/21] lint fix --- src/App.vue | 2 +- src/components/GWL.vue | 34 +++++++--- src/components/WorkInProgressWarning.vue | 3 +- src/components/vue-dropdown-menu.vue | 83 +++++++++++++++--------- 4 files changed, 81 insertions(+), 41 deletions(-) diff --git a/src/App.vue b/src/App.vue index b1f8f7d..87a4478 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,7 @@ - + diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 97ae29f..2e67d7d 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -2,17 +2,33 @@
-

U.S. Groundwater Conditions

-

The low down on flow down low

+

+ U.S. Groundwater Conditions +

+

+ The low down on flow down low +

+
+
+ +
+
+
+
+

+ Seitan 8-bit in, veniam pickled pitchfork hammock sustainable aliqua edison bulb. Four dollar toast man bun affogato crucifix locavore ut, labore quinoa gastropub qui reprehenderit adipisicing chicharrones asymmetrical. Live-edge squid banjo bespoke prism migas post-ironic tousled kitsch aute banh mi veniam ut kogi. Literally woke sriracha taxidermy freegan +1 voluptate church-key tempor cornhole humblebrag small batch fanny pack. +

-
-
-
-
-

Seitan 8-bit in, veniam pickled pitchfork hammock sustainable aliqua edison bulb. Four dollar toast man bun affogato crucifix locavore ut, labore quinoa gastropub qui reprehenderit adipisicing chicharrones asymmetrical. Live-edge squid banjo bespoke prism migas post-ironic tousled kitsch aute banh mi veniam ut kogi. Literally woke sriracha taxidermy freegan +1 voluptate church-key tempor cornhole humblebrag small batch fanny pack. -

-