D3 Examples - VR Renaissance

VR Renaissance - Linear Scale

a friendly, data-driven iteration on the product timeline plot from this tweet

this iteration uses actual linear units shipped data for the y-height of the bars and actual linear time data for the x-position of the bars

click and drag any of the images or text annotations to change their position and experiment with a new annotation layout

click the background to see axis lines and ticks

for the curious, there is a detailed commit history at the vr-renaissance companion repo

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
  <svg width='960' height='500'></svg>
  <script src='https://d3js.org/d3.v4.js'></script>
  <script src='https://d3js.org/d3-queue.v3.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js'></script>
  <script src='swoopy-drag.js'></script>
  <script src='d3-jetpack.js'></script>
  <script src='./index.js'></script>
</body>
​
    