Anyone have a great data grid, or want to work on one?

[Kai Chang]

I started working on a simple div-based data grid as a reusable chart:

http://bl.ocks.org/3687826

There's also a table-based one here (not a reusable chart):

http://bl.ocks.org/d/3299303/

The crucial feature I need though is virtual rendering, which
SlickGrid does very well:

https://github.com/mleibman/SlickGrid/wiki

Basically only visible rows are rendered, but set the container height
so it creates a scrollbar that accounts for all the rows. This makes
it possible to have 100k+ rows in a table while still being very fast.
SlickGrid has never been a bottleneck for me.

The downside of SlickGrid is it is broken into several files, requires
jQuery and jQuery UI, and works quite differently than a d3 reusable
chart. It still has a great API and almost all the features you need
out of a data grid though.

Are there other grids to be aware of, especially ones implemented in
d3? Is it worth reinventing the wheel?

[Gianluca Bisceglie]

I have done extensive research on grids and SlickGrid is by far the best to deal with large number of data (millions of rows and columns) and allow for easy customization (e.g., writing your own editors and formatters, or cell selections modules). The community is also pretty active (not as D3's though).

What would a d3-reusable-chart-like grid add to the user experience compared to slickgrid?

[Jason Davies]

On Sun, Sep 09, 2012 at 04:13:36PM -0700, Kai Chang wrote:
> The crucial feature I need though is virtual rendering, which
> SlickGrid does very well:
>
> https://github.com/mleibman/SlickGrid/wiki

I've written a simple plugin for virtual rendering, "longscroll.js":

http://bl.ocks.org/3689677

Unfortunately Chrome seems to reset the scrollbar for heights above ~1e7
px, so this only really works for around 1M rows. Having said that, I'd
probably argue that more than 1M scrollable rows is not particularly
usable, and some kind of pager or message could be shown at the bottom
if there are too many to display.

Another possibility would be to have a custom scrollbar implementation,
to get around these limitations. I wonder what SlickGrid does?

--
Jason Davies, http://www.jasondavies.com/

[Jason Davies]

On Mon, Sep 10, 2012 at 08:46:34AM +0000, Jason Davies wrote:
> I wonder what SlickGrid does?

Looks like they have a neat solution that involves limiting the
scrollable height and using multiple virtual pages that jump from one to
another:

http://jsfiddle.net/SDa2B/4/

I'll update longscroll.js when I get a chance!

[Chris Viau]

I started an SVG one. It's very basic right now but I have to turn it into a full-featured pivot table this week. http://jsfiddle.net/christopheviau/v6VMf/ An SVG table only makes sense when you have very specific graphical needs, like having each cell transitioning into another shape like I do here: https://vimeo.com/24011651 and here https://vimeo.com/24011842. I also started a scroller game with my son. It's a little bit buggy but it shows how I render a new row of tiles only when needed: http://biovisualize.github.com/video_game_for_ennio/

Chris

[Michael Leibman]

Be careful when using this code - I remember it had a lot of bugs when it came time to integrate it into SlickGrid.  If memory serves, most of them were around handling changes in the viewport size and the row count.

[greg]

This Mike's NYT table looks like a great implementation:

http://www.nytimes.com/interactive/2012/09/14/us/how-the-chicago-public-school-district-compares.html?ref=education

[John Hilbert]

I am considering reinventing the wheel.  I recently posted, Tables: HTML-Based vs DIV-Based vs SVG-Based, which hopefully will open more dialog on the subject of future of tables.  I am siding more with jumping completely to SVG-based tables though.

[Gregor MacLennan]

This was all helpful for me in making this image grid, which I just posted about.

On Sunday, September 9, 2012 4:13:38 PM UTC-7, Kai Chang wrote:

[marc fawzi]

Any opinions on NYT's PourOver? http://nytimes.github.io/pourover/

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Bill White]

I needed to build a virtually scrolled d3 visualization and I was able to use Jason's longscroll.js plugin as a jumping off point to make it work.  I detailed it here for those who are interested.