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>
Rolling over boxes bring them to front, and clicking them sends them to the back.
D3 is often used to create and manipulate SVG. Other than with HTML, the order of SVG elements define their visibility (whereas in HTML we have something like z-index). So we are often missing the functionality of moving an SVG selection to the front/back as it is known from Adobe Illustrator.
Came across this vintage data viz (the b/w image), not sure how they got the figures, perhaps plane speeds at the time? I've added some more recent ones for comparison, referenced from astronomycafe and also dustbunny. note: dustbunny had the data from the Sun, so used it to calculate it from the Earth as the reference.
Just move over the planets to view. As the planets move along their orbital paths they move nearer and further in comparison to each other all the time, so all just for play.
>It's very hard for us to understand just how large the solar system is. Scientists tell us that the largest number our minds can really comprehend, or grasp, is about a hundred thousand (100,000). When you begin talking about the distances between planets, which are measured in millions, or billions, of miles, our minds just don't keep up very well. When you add the habit that adults hav
Needed a simple solution to move a legend back and forth. This example shows the logic and uses javascripts offsetLeft to move the item (li in this case)
Just a play with hotspots to make an image 'interactive' in D3 and an excuse to reminisce.
Sparse and missing data
Sparse data can be really tricky to represent when dealing with real time data —especially as you don't know when it will be sparse or dense, or even both in one representation.
These examples look at views with the same data. A chart showing reading per minute but the dataset doesn't have values for each minute; they would be zero.
This example takes from this super article Padding for zero values but uses the difference of the start and end time to create an array to map to, instead of using the ticks()
The charts are rendered using the awesome [D3 Financial Components (D3FC)](https://github.com/ScottLogic/d3-financial-components`
D3 Multiple Line chart with toggle legend
Line chart updates the yAxis depending on selection from the legend.
The legend uses purecss for the menu, which can be made into a responsive menu.
The legend has been added to the re-useable components from ScottLogic's awesome d3-financial-components
Extended from this excellent tutoriall to use d3 reusable pattern so you can have api to call the charts with the same code.
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() {
I agree with Whitman: “I exist as I am, that is enough"
The rest is additional :)