Pathy line with big dots

by Chamster

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg id="graph1" width="600" height="400" />

CSS

circle.dataPoint {
  stroke: orange;
  stroke-width: 1px;
  fill: yellow;
}

path.dataPath {
  stroke: blue;
  stroke-width: 3;
  fill: none;
}

line.axis{
  stroke: lightgrey;
  stroke-width: 1;
}

JavaScript

// Setup for variables and functions
var data = Array(30).fill()
  .map(function (_, i) { return (Math.random() * 20 - 10) + 3 * i - 30; });
var graph1 = d3.select("#graph1");
var width = +graph1.style("width").replace("px", "");
var height = +graph1.style("height").replace("px", "");
var dotSize = 5;
var scalerX1 = d3.scale.linear()
  .domain([0, data.length])
  .range([0, width]);
var scalerY1 = d3.scale.linear()
  .domain([d3.min(data), d3.max(data)])
  .range([height - dotSize, 0 + dotSize]);
function posX(_, i) { return scalerX1(i) + width / data.length / 2; }
function posY(d, _) { return scalerY1(d); }

// Set of g elements in for the individual data points
var gees = graph1.selectAll("g").data(data).enter().append("g");
    
// Path appended BEFORE the circles
gees.append("path")
  .attr("d", d3.svg.line().x(posX).y(posY)(data))
  .attr("class","dataPath");
// Circles appended AFTER the path
gees.append("circle")
  .attr({ cx: posX, cy: posY, r: dotSize })
  .attr("class", "dataPoint");

// Axis with step markers
gees.append("line")
  .attr({ x1: posX, y1: scalerY1(0), x2: posX, y2: scalerY1(0) - 5 })
  .attr({ "stroke": "lightgrey", "stroke-width": "1" });
gees.append("line")
  .attr({ x1: 0, y1: scalerY1(0), x2: width, y2: scalerY1(0) })
  .attr("class","axis");