D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
curran
Full window
Github gist
Visual List Library
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Shopping App Prototype</title> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="visualList.js"></script> </head> <body> <svg width="960" height="500"></svg> <script> d3.json('data.json', data => { data.forEach((list, i) => { setTimeout(() => { d3.select('svg').call(visualList, { data: list, xValue: d => d.price, margin: { left: 220, right: 220, top: 20, bottom: 20 }, barPadding: 0.1, yValue: d => d.name, verticalSpacing: 60, transitionDuration: 800, textValue: d => `${d.name} $${d.price}` }); }, i * 1000); }); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js