Testing zoom and panning in d3.js with both mouse and touch interactions.
sources:
Sundar Singh eesur
I agree with Whitman: “I exist as I am, that is enough"
The rest is additional :)
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() {
Extended from this excellent tutoriall to use d3 reusable pattern so you can have api to call the charts with the same code.
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
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`
Just a play with hotspots to make an image 'interactive' in D3 and an excuse to reminisce.
- Find a pic, choose The Grand Budapest Hotel, it was an awesome film
- Made a grid, so I can quickly reference the pixels
- Made the data (my son helped me here)
- Draw some transparent rects
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)