D3 Examples - ETH Gas Price vs. Confirmation Time

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
<style> /* set the CSS */
​
.axis {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .9em;
  font-weight: bold;
}
​
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2.5px;
}
​
.dot {
  fill: steelblue;
}
​
div.tooltip {
  position: absolute;
  max-width: 300px;
  padding: 3px 6px;
  background: whitesmoke;
  border: 1px solid grey;
  border-radius: 3px;
  pointer-events: none;
  padding: 10px;
  border: 1px solid #ddd;
​
  transition: opacity 175ms linear;
  -moz-transition: opacity 175ms linear;
  -webkit-transition: opacity 175ms linear;
​
  transition-delay: 175ms
  -moz-transition-delay: 175ms;
  -webkit-transition-delay: 175ms;
​
  -moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
  -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
  box-shadow: 4px 4px 8px rgba(0,0,0,.5);
​
  -moz-border-radius: 15px;
  border-radius: 15px;
}
​
div.tooltip p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  padding: 0;
  margin: 0;
  text-align: center;
}
​
</style>
<body>
​
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
​
var tooltip;
​
tooltip = d3.select('body').append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);
​
var source = [['0.00', '120.00'], ['0.10', '120.00'], ['0.20', '120.00'], ['0.30', '120.00'], ['0.40', '120.00'], ['0.50', '120.00'], ['0.60', '120.00'], ['0.70', '120.00'], ['0.80', '120.00'], ['0.90', '120.00'], ['1.00', '108.60'], ['2.00', '108.60'], ['3.00', '108.60'], ['4.00', '108.60'], ['5.00', '100.20'], ['6.00', '100.20'], ['7.00', '100.20'], ['8.00', '100.20'], ['9.00', '99.50'], ['10.00', '99.40'], ['11.00', '98.20'], ['12.00', '98.20'], ['13.00', '98.20'], ['14.00', '98.20'], ['15.00', '98.10'], ['16.00', '98.00'], ['17.00', '98.00'], ['18.00', '97.90'], ['19.00', '97.80'], ['20.00', '29.40'], ['21.00', '0.60'], ['22.00', '0.60'], ['23.00', '0.60'], ['24.00', '0.60'], ['25.00', '0.60'], ['26.00', '0.60'], ['27.00', '0.60'], ['28.00', '0.60'], ['29.00', '0.60'], ['30.00', '0.60'], ['31.00', '0.60'], ['32.00', '0.60'], ['33.00', '0.60'], ['34.00', '0.60'], ['35.00', '0.60'], ['36.00', '0.60'], ['37.00', '0.60'], ['38.00', '0.60'], ['39.00', '0.60'], ['40.00', '0.60'], ['41.00', '0.60'], ['42.00', '0.60'], ['43.00', '0.60'], ['44.00', '0.60'], ['45.00', '0.60'], ['46.00', '0.60'], ['47.00', '0.60'], ['48.00', '0.60'], ['49.00', '0.60'], ['50.00', '0.60'], ['51.00', '0.60'], ['52.00', '0.60'], ['53.00', '0.60'], ['54.00', '0.60'], ['55.00', '0.60'], ['56.00', '0.60'], ['57.00', '0.60'], ['58.00', '0.60'], ['59.00', '0.60'], ['60.00', '0.60'], ['61.00', '0.60'], ['62.00', '0.60'], ['63.00', '0.60'], ['64.00', '0.60'], ['65.00', '0.60'], ['66.00', '0.60'], ['67.00', '0.60'], ['68.00', '0.60'], ['69.00', '0.60'], ['70.00', '0.60'], ['71.00', '0.60'], ['72.00', '0.60'], ['73.00', '0.60'], ['74.00', '0.60'], ['75.00', '0.60'], ['76.00', '0.60'], ['77.00', '0.60'], ['78.00', '0.60'], ['79.00', '0.60'], ['80.00', '0.60'], ['81.00', '0.60'], ['82.00', '0.60'], ['83.00', '0.60'], ['84.00', '0.60'], ['85.00', '0.60'], ['86.00', '0.60'], ['87.00', '0.60'], ['88.00', '0.60'], ['89.00', '0.60'], ['90.00', '0.60'], ['91.00', '0.60'], ['92.00', '0.60'], ['93.00', '0.60'], ['94.00', '0.60'], ['95.00', '0.60'], ['96.00', '0.60'], ['97.00', '0.60'], ['98.00', '0.60'], ['99.00', '0.60'], ['100.00', '0.60']];
​
data = []
source.forEach(function(d) {
    d['confirmation_time'] = parseFloat(d[1])
    d['gas_price'] = parseFloat(d[0]);
    d.splice(0,2);
​
    //clear out redundant data
    var addIt = true;
    if(d['gas_price'] > 22)
      addIt = false;
    if(d['gas_price'] < .9)
      addIt = false;
    if(addIt)
      data.push(d);
});
​
yAxisLabel = 'Confirmation Time (minutes)';
yAxisData = 'confirmation_time';
​
xAxisLabel = 'Gas Price';
xAxisData = 'gas_price';
​
circle_radius = 3.5;
​
var margin = {top: 20, right: 20, bottom: 50, left: 70},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
​
var valueline = d3.line()
  .curve(d3.curveMonotoneX)
  .x(function(d) { return x(eval('d.' + xAxisData)); })
  .y(function(d) { return y(eval('d.' + yAxisData)); });
​
var svg = d3.select('body')
  .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 + ')');
​
x.domain([0, d3.max(data, function(d) { return eval('d.' + xAxisData); })]).nice();
y.domain([0, d3.max(data, function(d) { return eval('d.' + yAxisData); })]).nice();
​
svg.append('path')
  .data([data])
  .attr('class', 'line')
  .attr('d', valueline);
​
svg.selectAll('circle').data(data)
  .enter().append('circle')
  .attr('class', 'dot')
  .attr('r', circle_radius)
  .attr('cx', d => x(eval('d.' + xAxisData)))
  .attr('cy', d => y(eval('d.' + yAxisData)))
  .on('click', d => showTooltip(d))
  .on("mouseover", function(d,i) {
        d3.select(this)
          .transition()
          .duration('75')
          .attr('r', circle_radius + 4);
        showTooltip(d);
    })
  .on("mouseout", function(d,i) {
        d3.select(this)
          .transition()
          .duration('75')
          .attr('r', circle_radius);
        hideTooltip();
    });
​
//xAxis
svg.append('g')
  .attr('transform', 'translate(0,' + height + ')')
  .call(d3.axisBottom(x));
​
//text label for the y axis
svg.append('text')
    .attr('transform',
          'translate(' + (width/2) + ' ,' +
                         (height + margin.top + 20) + ')')
    .style('text-anchor', 'middle')
    .attr('class', 'axis')
    .text(xAxisLabel);
​
//yAxis
svg.append('g')
  .call(d3.axisLeft(y));
​
//text label for the y axis
svg.append('text')
  .attr('transform', 'rotate(-90)')
  .attr('y', 0 - margin.left)
  .attr('x',0 - (height / 2))
  .attr('dy', '2em')
  .attr('class', 'axis')
  .style('text-anchor', 'middle')
  .text(yAxisLabel);
​
function showTooltip(d) {
  var tooltip_msg = '<div class="tooltip">';
  tooltip_msg = `<p>Gas Price: ${d.gas_price}</p>`;
​
  var decimalTimeString = d.confirmation_time;
  var n = new Date(0,0);
  n.setSeconds(+decimalTimeString * 60 * 60);
  var confirmation_time = n.toTimeString().slice(0, 8).replace(':00','');
  var part1 = parseInt(confirmation_time.split(':')[0])
  var part2 = parseInt(confirmation_time.split(':')[1]);
  part2 = ("0" + part2).slice(-2);
  display_time = part1 + "h " + part2 + "m";
​
  tooltip_msg = tooltip_msg + `<p>Time: ${display_time}</p>`;
  tooltip_msg = tooltip_msg + '</div>';
  tooltip.transition().style('opacity', 1);
  tooltip.html(tooltip_msg).style('left', (d3.event.pageX - 55) + 'px').style('top', (d3.event.pageY - 65) + 'px');
}
​
function hideTooltip() {
  tooltip.style('opacity', 0);
}
​
</script>
</body>
​
    