Giter Site home page Giter Site logo

Comments (10)

mbostock avatar mbostock commented on June 23, 2024

Interesting application. I'm confident you could do this in Polymaps, but getting reasonable performance if 200+ layers are visible simultaneously may be tricky.

Are all the layers visible at the same time? The first thing you could experiment with is toggling the visibility of each layer when the map moves, so that if the layer is not visible with the viewport, you hide the layer and Polymaps won't draw any of the tiles (even though the tiles are invisible with about:blank).

The next thing I would try is to customize the layer implementation (see nypl.image in the "transform" example) to use a blank <svg:g> element rather than an image with the "about:blank" URL. I'm not quite sure how the browser handles displaying an image with the "about:blank" URL, so I'm guessing that an empty group element will be displayed more efficiently than an image.

Lastly, you could write your own layer implementation from scratch, perhaps as a wrapper on top of po.layer to get the lazy-loading you desire. Or perhaps we could figure out a way for the tile.element to be null for sparse tilesets.

from polymaps.

jasondavies avatar jasondavies commented on June 23, 2024

Thanks, turning off the visibility worked a treat when layers are off-screen, and performance is fine when zooming out and viewing all layers at once. I'll give you a sneak preview once I've uploaded the 5GB of tiles! I've also just committed an optimisation to allow null URLs instead of using about:blank as this seems slightly faster in Firefox: 5aa2717

Edit: added link to commit.

from polymaps.

mbostock avatar mbostock commented on June 23, 2024

Good stuff. I pulled your commit into my personal fork. It'll make the official release in a few weeks.

from polymaps.

jasondavies avatar jasondavies commented on June 23, 2024

Okay, sneak preview is finally up: http://www.jasondavies.com/voynich/

The source code is on GitHub too: http://github.com/jasondavies/voynich

I originally had code to show everything on one map as discussed above (see the commit history if you're interested). However, I personally prefer using a navigation menu to browse between scans, so this is turned off for now.

from polymaps.

mbostock avatar mbostock commented on June 23, 2024

Nice! My thought, if you still wanted to have all the scans visible simultaneously, is to implement them as a single layer. You could use my Hilbert curve code to figure out how to determine which scan to display based on the tile coordinates: http://bl.ocks.org/597287

from polymaps.

mbostock avatar mbostock commented on June 23, 2024

You could still use bookmarks for navigation, which would move the map center, rather than replacing the layer.

from polymaps.

jasondavies avatar jasondavies commented on June 23, 2024

Yes, I'm still planning to put it all in one map. Still need to figure out the Mercator conversion and I should have it working.

from polymaps.

jasondavies avatar jasondavies commented on June 23, 2024

I'd prefer to have each scan as a separate layer so that I can move flush with each other as they have varying widths. My experiments with this were encouraging.

from polymaps.

mbostock avatar mbostock commented on June 23, 2024

You can make them flush in a single layer even if they have varying widths, though that would certainly make the tile coordinate layout more challenging. The only thing you couldn't do, as a single layer, would be to have overlapping scans.

from polymaps.

jasondavies avatar jasondavies commented on June 23, 2024

Ah, interesting. I may also want to scale layers though as I think I can get the original scan resolutions, so I can have a uniform zoom scale for all scans. I think that would need separate layers?

I know separate layers will work anyway, sounds easier than using a custom tile coordinate layout :-)

from polymaps.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.