sloped-stroke-width

don't use d3.area to encode stroke-width for non stacked charts

we don't perceive the distance from the top of the line to the bottom of the line
st
strokes will do this automatically
can't do variable stroke-width though, have to write a custom area function with trig
doesn't work for stacked area charts, everything is a lie

todo

make repo
scrolly post
not sure how to compare

links

/larskotthoff/1642835
https://github.com/d3/d3/pull/448

<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">

<body>
  <div id='container'>
    <div id='graph'></div>
    <div id='sections'>
      <div>
        <h3>Using the width shape is a neat way to encode information</h3>
        You can encode multiple dimensions or <a href='trade-map.html'>connect areas on a map</a>
      </div>

<div>
        <h3>But you have to be careful!</h3>
        We percive the thinest part of the line, not the height
        <p>
        <i>Drag the circles to see how slope changes the width of the line</i>
      </div>

<div>
        <h3>stroke-width works out of the box</h3>
        But doesn't work with changing area, checkout d3-varible-width
      </div>

<div>
        <h3>Doesn't work for stacking</h3>
        Since the height changes, lines won't add up to 100

</div>

</body>