d3:horizontal-graph-lines

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

CSS

svg {
  background: #fff1e5;
}
.h-line {
  stroke: lightgrey;
  stroke-width: 1;
}

JavaScript

const margins = {
  top: 2,
  bottom: 10,
  left: 20,
  right: 20,
};

const width = 700;
const height = 400;

const svg = renderSVG(width, height);

const min = 0;
const max = 10;

const yScale = d3.scaleLinear()
  .domain([min, max])
  .range([height - margins.bottom - margins.top, 0])

for (let i = min; i <= max; i++) {
  renderLine(svg, i);
}

function renderLine(svg, i) {
  svg.append('line')
    .attr('x1', margins.left)
    .attr('y1', margins.top + yScale(i))
    .attr('x2', width - margins.right)
    .attr('y2', margins.top + yScale(i))
    .attr('class', 'h-line')
    .attr('shape-rendering', 'crispEdges')
}

function renderSVG(width, height) {
  return d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);
}