spinner with d3-component | es2015

an es2015 iteration on the block Spinner with d3-component from @currankelleher

This example demonstrates usage of d3-component to create a spinner component, and render it conditionally while something is loading. After loading finishes, the spinner goes away and is replaced by another component.

How often have you seen a data visualization show nothing but a blank screen while the data is loading? Showing a spinner with D3 and hiding it after data is loaded is not as easy as it seems. Here's a solution for doing this, feel free to use it in your projects!

This demonstrates the following patterns supported by d3-component:

Use of local state and lifecycle hooks (spinner timer).
Composition of components with conditional rendering (app component).

Built with blockbuilder.org

forked from curran's block: Posts with D3 Component

forked from curran's block: Spinny Loading Icon

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://unpkg.com/d3@4'></script>
  <script src='https://unpkg.com/d3-component@3'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
</head>
<body>
  <svg width='960' height='500'></svg>
  <script src='vis.js'></script>
</body>
    

https://unpkg.com/d3@4

https://unpkg.com/d3-component@3

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js