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; } svg { width: 100%; height: 100%; } </style></head><body> <svg></svg> <script> let width = 800, height = 400, margin = 20, dotRadius = 6, hoverTransition = d3.transition() .ease(d3.easeLinear), data = [ { date: new Date(2017, 1, 1), value: 9 }, { date: new Date(2017, 1, 2), value: 3 }, { date: new Date(2017, 1, 3), value: 6 }, { date: new Date(2017, 1, 4), value: 2 }, { date: new Date(2017, 1, 5), value: 8 }, { date: new Date(2017, 1, 6), value: 4 }, { date: new Date(2017, 1, 7), value: 1 }, { date: new Date(2017, 1, 8), value: 5 } ], count = data.length, // Scales xDomain = d3.extent(data, d => d.date), xScale = d3.scaleTime() .domain(xDomain) .range([margin, width]), yScale = d3.scaleLinear() .domain([0, 10]) .range([height - margin, 0]), // Line line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.value)), // Axes xAxis = d3.axisBottom() .scale(xScale) .ticks(count) .tickFormat(d3.timeFormat("%b %d")), yAxis = d3.axisLeft() .scale(yScale), // Elements svg = d3.select('svg') .attr('width', width), dateAxis = svg.append('g') .attr('transform', `translate(0 ${height - margin})`) .call(xAxis), numberAxis = svg.append('g') .attr('transform', `translate(${margin} 0)`) .call(yAxis), linePath = svg.append('path') .attr('d', line(data)) .attr('fill', 'none') .attr('stroke', 'salmon') .attr('stroke-width', 3), dots = svg.append('g') .selectAll('circle') .data(data) .enter().append('circle') .attr('cx', d => xScale(d.date)) .attr('cy', d => yScale(d.value)) .attr('r', dotRadius) .attr('fill', 'salmon') .attr('stroke', 'white') .attr('stroke-width', 2) .style('cursor', 'pointer') .on('mouseenter', function() { d3.select(this) .interrupt() .transition(hoverTransition) .duration(300) .attr('r', dotRadius * 2); }) .on('mouseleave', function() { d3.select(this) .interrupt() .transition(hoverTransition) .duration(300) .attr('r', dotRadius); }); </script></body> https://d3js.org/d3.v4.min.js