D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
alessioalex
Full window
Github gist
JS Bin // source https://jsbin.com/cegiseq
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <pre id='display-panel'></pre> <script id="jsbin-javascript"> function getRandomInt(min, max) { return Math.random() * (max - min) + min; } const search = (word, callback) => { const results = ['foo', 'bar', 'baz', 'baz2', 'etc', 'etc2']; const numberOfResults = getRandomInt(1, results.length); const randomTimeout = getRandomInt(1, 4); setTimeout(() => { callback(null, results.slice(0, numberOfResults)); }, randomTimeout); }; const display = (data) => { console.log('display', data); const el = document.querySelector('#display-panel'); const msg = (typeof data === 'string') ? data : data.join(', '); el.textContent = msg; }; const displaySearchResults = (error, results) => { if (error) { display('Search failed, please retry later.'); } else { display(results); } }; const word = 'cats'; // will display random results each time // uncomment to check // search(word, displaySearchResults); const searchWrapper = (word, callback) => { const key = `search-${word}`; const results = sessionStorage.getItem(key); if (results) { // keeping things asynchronous setTimeout(() => callback(null, results), 1); } else { search(word, (error, res) => { if (error) { return callback(error); } // keeping the results in cache sessionStorage.setItem(key, res); callback(null, res); }); } }; // will always display the same results because they are cached searchWrapper('cats', displaySearchResults); </script> <script id="jsbin-source-javascript" type="text/javascript">function getRandomInt(min, max) { return Math.random() * (max - min) + min; } const search = (word, callback) => { const results = ['foo', 'bar', 'baz', 'baz2', 'etc', 'etc2']; const numberOfResults = getRandomInt(1, results.length); const randomTimeout = getRandomInt(1, 4); setTimeout(() => { callback(null, results.slice(0, numberOfResults)); }, randomTimeout); }; const display = (data) => { console.log('display', data); const el = document.querySelector('#display-panel'); const msg = (typeof data === 'string') ? data : data.join(', '); el.textContent = msg; }; const displaySearchResults = (error, results) => { if (error) { display('Search failed, please retry later.'); } else { display(results); } }; const word = 'cats'; // will display random results each time // uncomment to check // search(word, displaySearchResults); const searchWrapper = (word, callback) => { const key = `search-${word}`; const results = sessionStorage.getItem(key); if (results) { // keeping things asynchronous setTimeout(() => callback(null, results), 1); } else { search(word, (error, res) => { if (error) { return callback(error); } // keeping the results in cache sessionStorage.setItem(key, res); callback(null, res); }); } }; // will always display the same results because they are cached searchWrapper('cats', displaySearchResults); </script></body> </html>