diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 29a5bbea5372c9ff7b2a5616e71fb08bde629de7..15d3e7516a23f0ed60130fee9cc66dc2eeafe505 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -137,18 +137,38 @@ class Hydrograph { } _plotMedianPoints(plot, xScale, yScale) { - plot.selectAll('circle') + plot.selectAll('medianPoint') .data(this._medianStats) .enter() .append('circle') .attr('r', '8px') - .attr('fill', 'blue') + .attr('fill', 'yellow') + .attr('x', function(d) { + return xScale(d.time); + }) + .attr('y', function(d) { + return yScale(d.value); + }) .attr('cx', function(d) { return xScale(d.time); }) .attr('cy', function(d) { return yScale(d.value); }); + + plot.selectAll('medianPointText') + .data(this._medianStats) + .enter() + .append('text') + .text(function(d) { + return d.label; + }) + .attr('x', function(d) { + return xScale(d.time) + 10; + }) + .attr('y', function(d) { + return yScale(d.value); + }); } _plotTooltips(plot, xScale, yScale) { diff --git a/assets/src/scripts/models.js b/assets/src/scripts/models.js index 78cc68f2983945641cb529224571f89799797095..facc84dbf783b07092650e478b6782eb1f59ea4a 100644 --- a/assets/src/scripts/models.js +++ b/assets/src/scripts/models.js @@ -99,7 +99,7 @@ export function parseMedianData(medianData, timeSeries) { let median = { time: recordDate, value: medianDatum.p50_va, - label: `${formatTime(recordDate)}\n${medianDatum.p50_va} ${unit}` + label: `${medianDatum.p50_va} ${unit}` }; // don't include leap days if it's not a leap year if (!isLeapYear(recordDate.getFullYear())) {