title: How to create a “slopegraph” in d3.js
body: <p>In <em>The Visual Display of Quantitative Information</em>, Edward Tufte coined a term “slopegraph” for a very minimal type of chart (<a href="http://charliepark.org/slopegraphs/" rel="nofollow noreferrer">more information</a>). The authoritative example looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/UcJ1Q.png" alt="Example of slope graph"></p>
  
  <p>There are at least two implementations of slopegraph in <a href="http://mbostock.github.com/d3/" rel="nofollow noreferrer">d3.js</a> in th wild:</p>
  
  <ul>
  <li><a href="http://markmarkoh.com/tuftes-slope-graphs-in-svg-using-d3js/" rel="nofollow noreferrer">http://markmarkoh.com/tuftes-slope-graphs-in-svg-using-d3js/</a></li>
  <li><a href="http://skedasis.com/d3/slopegraph/" rel="nofollow noreferrer">http://skedasis.com/d3/slopegraph/</a></li>
  </ul>
  
  <p>I had a shot at a more declarative implementation, and also to preserve a 100% correspondence between values in both columns, but got stuck. As expected, when items with similar or same values appear in the data set, the graphics overlap and the chart is not readable.</p>
  
  <p>The <a href="http://data.karmi.cz/d3/life-expectancy-slopegraph/" rel="nofollow noreferrer">naïve version</a> (<a href="https://gist.github.com/2339918" rel="nofollow noreferrer">source</a> ) uses the <code>linear</code> scale for computing horizontal position, while the <a href="http://data.karmi.cz/d3/life-expectancy-slopegraph-normalized/" rel="nofollow noreferrer">attempt to “normalize” the positions</a> (<a href="https://gist.github.com/2339918/499ce3758141516e09396674b277ae3e6f140a2b" rel="nofollow noreferrer">source</a>) uses the <code>ordinal</code> scale.</p>
  
  <p>I believe better results can be achieved with the ordinal scale, computing the offset based on coordinates of overlapping items. Should the offset be computed separately for both columns, should it be computed in advance based on data, or on the fly during setting the attributes? How could the codebase be expanded so items with the same values are positioned below each other, other items are adjusted accordingly and the values in both columns stay on the same horizontal position?</p>