block by micahstubbs 67d7aa147948d701e336f1f0589bf1e1

Crossfilter Demo | shareable filter URL

Full Screen

this iteration stores the extent of each chart filter in the url query string, so that URLs to unique filter views can be shared.

for example, this url points to a filter view that looks at short-haul flights that were delayed ~40 to ~60 minutes late in the day during a particular week in February 2001:

https://bl.ocks.org/micahstubbs/raw/67d7aa147948d701e336f1f0589bf1e1/?date=Fri%2520Feb%252009%25202001%252000%253A00%253A00%2520GMT-0800%2520%28Pacific%2520Standard%2520Time%29--Tue%2520Feb%252020%25202001%252000%253A00%253A00%2520GMT-0800%2520%28Pacific%2520Standard%2520Time%29&distance%2520%28mi.%29=255--440&arrival%2520delay%2520%28min.%29=29--69&time%2520of%2520day=19.799999999999997--22.200000000000003

since bl.ocks.org renders examples in an iframe, we need to view the raw example on it’s own page to see the url-filter-state feature in action.

this iteration was motivated by a desire to be able to generate a downloadable image or document of the crossfilter dashboard for the user, at the current filter state. storing the filter states in the url is one way to communicate to the screenshot server how the dashboard should look when the server captures the screenshot.

I encourage you to read more about URLSearchParams and the browser history pushState() method used to read and write the page’s url without triggering a full page reload.

an iteration on Crossfilter Demo | es2015 d3v4 from @micahstubbs

in repo form https://github.com/micahstubbs/crossfilter-experiments


this iteration


this iteration prettier formats the js


this iteration converts the code to ES2015 in something like the airbnb style

forked from @alexmacy‘s block: Updated Crossfilter.js demo

see also an earlier iteration that retains the plot width and table width of the original Crossfilter example at http://square.github.io/crossfilter/

commit history


This is an updated version of this demo of the crossfilter library. Crossfilter has been one of my favorite - and what I think to be on of the most underrated - JavaScript libraries. It hasn’t seen much of any updates in quite a while, so I wanted to find out how it would work with version 4 of d3.js.

There were some issues that came up with how d3-brush has been updated for v4. Big thanks goes to Alastair Dant (@ajdant) for helping to figure out a couple of those issues!

Also worth reading, is this discussion started by Robert Monfera (@monfera).

index.js

index.html

index.css