For a route starting at New Haven, CT and ending at Hartford, CT.
Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0; position:fixed; top:0;right:0;bottom:0;left:0; padding: 10px; }/* svg { border: 1px solid aqua; } */ text tspan { font-weight: bold; } text.heading { font-size: 0.7em; } </style></head><body> <script src="data.js"></script> <script> totalDistance = Math.round(data[data.length - 1].x); let elevGain = data.reduce((acc, cur, idx, arr) => { if (idx > 0 && (cur.y > arr[idx - 1].y)) { acc += cur.y - arr[idx - 1].y; } return acc; }, 0); elevGain = Math.round(elevGain * 3.28084); const chartMargins = { top: 10, right: 10, bottom: 50, left: 50 }; const chartWidth = 860; const chartHeight = 300; const width = chartWidth - chartMargins.right - chartMargins.left; const height = chartHeight - chartMargins.top - chartMargins.bottom; const svg = d3.select('body').append('svg') .attr('width', chartWidth) .attr('height', chartHeight); const g = svg.append('g') .attr('transform', "translate(" + chartMargins.left + "," + chartMargins.top + ")"); const xScale = d3.scaleLinear() .range([0, width]) .domain(d3.extent(data, d => d.x)); const yScale = d3.scaleLinear() .range([height, 0]) .domain(d3.extent(data, d => d.y)); const areaFn = d3.area() .x(d => xScale(d.x)) .y0(yScale(d3.min(data, d => d.y))) .y1(d => yScale(d.y)) .curve(d3.curveBasis); g.append('path') .datum(data) .attr('fill', 'steelblue') .attr('d', areaFn); g.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(xScale)) .append('text') .attr('fill', '#333') .attr('y', 35) .attr('x', width / 2) .text('Distance in miles'); g.append('g') .call(d3.axisLeft(yScale)) .append('text') .attr('fill', '#333') .attr('transform', 'rotate(-90)') .attr('y', -35) .attr('x', -height / 2) .attr('text-anchor', 'end') .text('Height, in feet'); // label for total distance g.append('g') .append('text') .classed('heading', true) .attr('y', height + 35) .attr('x', 0) .attr('font-family', 'sans-serif') .text('Total distance:') .append('tspan') .text(` ${totalDistance} mi`); // label for total elevation gain g.append('g') .append('text') .classed('heading', true) .attr('y', height + 35) .attr('x', width) .attr('font-family', 'sans-serif') .attr('text-anchor', 'end') .attr('startOffset', '100%') .text('Elevation gain:') .append('tspan') .text(` ${elevGain.toLocaleString()} ft`); </script></body> https://d3js.org/d3.v4.min.js