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:
Built with blockbuilder.org
forked from curran‘s block: Posts with D3 Component
forked from curran‘s block: Spinny Loading Icon
<!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>
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template
gimp xcf file � x B� B� gimp-image-grid (style solid)
(fgcolor (color-rgba 0.000000 0.000000 0.000000 1.000000))
(bgcolor (color-rgba 1.000000 1.000000 1.000000 1.000000))
(xspacing 10.000000)
(yspacing 10.000000)
(spacing-unit inches)
(xoffset 0.000000)
(yoffset 0.000000)
(offset-unit inches)
� � x )Screen Shot 2017-03-18 at 2.09.46 PM.png �
\ � x x � � � x � � � &