Reusable slopegraph inspired/adapted from Ben Van Dyke's example into a reusable chart.
This slopegraph example shows the number of personal computers installed in a country per household. This includes desktop PCs and laptops, but excludes smartphones and terminals connected to mainframe computers. All figures are calculated using total number of Personal Computers and the Total Number of Households.
Example using spin.js during load of JSON data for a D3 chart
Showing the spinner/loader being triggered before the JSON callback, and stopped within the JSON callback (hence after the JSON data has been loaded):
// loader settings
var target = document.getElementById('#chart-id');
function init() {
School homework for Krishan, my 7 year old, looking at famous rock landmarks. We surfed the net and stored some examples in a Google Sheet and exported the data into JSON to display with some filters.
flashing heatmap (random data updating, every five seconds)—testing out the very useful and awesome tilegrams
Hexagonal world map, that draws based hexagons on the generated canvas map (comment out display: hidden, in css, to see the canvas rendering)
Reference sources:
Example uses D3 to produce Pure's responsive grid programmatically.
For example, elements within a '3' row grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
| license: mit | |
| height: 500 | |
| border: no |
| license: mit | |
| height: 500 | |
| border: no |
| license: mit | |
| height: 500 | |
| border: no |
| license: mit | |
| height: 500 | |
| border: no |