cartodb/d3.cartodb

Client-side rendering of CartoDB visualisations with d3

Deprecated

d3.cartodb was an experiment to render CARTO visualizations using d3.

Alternative

Check https://github.com/cartodb/tangram.cartodb for an alternative for CARTO vector rendering.

d3.cartodb's Issues

Repair viz function

So that we can load layers according to vizjsons.

Begin development of data filters

Add docs

Add browserify support

Visualization breaks when zoomed in

http://cartodb.github.io/d3.cartodb/test.html

With initial zoom level:

After zooming in:

Notice the Uncaught TypeError: f.on is not a function error too.

Add external error handling

Like we do in Torque, with an error() callback function.

Change project name

As discussed with @rochoa, using d3's namespace probably isn't a great idea. Also, the scope of the library has broadened over the course of its development, and the d3 library is less of a protagonist nowadays.

Maybe call it VECNIK? Or something more generic like cartodb-vector.

Add public API for interaction

Buffers prevent features in tile edges to listen to mouse events

This is caused by the padding covering some areas of the tile.

Add standard.js

Support tile buffers

At the moment tile boundaries are noticeable with point datasets.

Investigate blending modes

I'm finding contradictory information about browser compatibility in MDN and caniuse. Most blending modes seem to work fine in Chrome, although they seem to have some latency, so it's worth to profile it.

Markers should have their width set with a radius attribute

Right now it's being globally set via the path.

Tests should use src and not browserified file

At the moment tests are being run using the bundled library generated in ./dist/. This means running make after every change in the source while adding/editing tests. It'd be better to use the src files directly.

Tileloader shouldn't ask for negative tiles

There was a similar issue in Torque. It was corrected here: CartoDB/torque#84

Restore setSQL

setSQL was part of the API before the refactor into a Leaflet layer. We should probably restore it to manipulate the query.

Tiles are displaced out of their ordinary position

Seems to happen when there's a zoom change/new tiles are loaded.

Add NEWS

Provider tests need to be reoriented

Right now they're testing elements related to the SQL provider, which we're not really using anymore.

Uncaught TypeError: Cannot set property 'tilePoint' of undefined

I'm getting the following error:

Uncaught TypeError: Cannot set property 'tilePoint' of undefined

On this line.

For some reason, f.properties is undefined on some cases. Example (using the populated places dataset):

{
  "scalerank": "6",
  "natscale": "30",
  "labelrank": "8",
  "featurecla": "Populated place",
  "name": "Nord",
  "namepar": "",
  "namealt": "",
  "diffascii": "0",
  "nameascii": "Nord",
  "adm0cap": "0",
  "capalt": "0",
  "capin": "",
  "worldcity": "0",
  "megacity": "0",
  "sov0name": "Denmark",
  "sov_a3": "DNK",
  "adm0name": "Greenland",
  "adm0_a3": "GRL",
  "adm1name": "Nationalparken",
  "iso_a2": "GL",
  "note": "",
  "latitude": "81.7166257927",
  "longitude": "-17.8000352391",
  "changed": "1",
  "namediff": "1",
  "diffnote": "Added place.",
  "pop_max": "10",
  "pop_min": "10",
  "pop_other": "0",
  "rank_max": "1",
  "rank_min": "1",
  "geonameid": "-1",
  "meganame": "",
  "ls_name": "",
  "ls_match": "2",
  "checkme": "0",
  "cartodb_id": 5370,
  "created_at": "2014-10-19 00:00:00+00",
  "updated_at": "2014-10-19 00:00:00+00",
  "tilePoint": "2:1:0"
}

Set up test framework

• Add coverage testing.

Use Tileloader mixin externally

Layer should load tiles as the pane is dragged

At the moment it is only starting their load once the mouse is released.

Tiles shouldn't be requested again when changing style

But just modify the style applied to them

Fix conditional styles

At some point during these improvements/refactors I broke conditional styling. Fix it.

when you setup hovers javascript errrors are raised

see #1

Tile location is sometimes incorrect

When scrolling very quickly there must be some race condition causing the tiles to render their features in the wrong place.

Layer should be able to initialise without data

Sort of what we have at the moment at the Windshaft provider. We need the ability to set the url template at any point, regardless of its state.

Investigate overzooming with SVG tiles

Right now tiles disappear when zooming, to reappear when their loading is complete. Is it possible to do some sort of overzooming as the view zooms/the tiles are not loaded?

Use the maps API when user/table are specified instead of SQL API

That is, obtain a layergroup and use the resulting URL. This logic can be pretty much copied wholly from Torque.

Geometries that span several tiles shouldn't be added more than once to crossfilter

Frontend analysis

Filters

• Range: min, max
• Category: accept, reject

Category aggregation

• column, aggregation formula, aggregation column: start with count

Histogram aggregation

• count distribution

Providers should only be passed necessary parameters

At the moment we're passing over the whole options object from the layer

Use TopoJSON on rendering

Since we're now using tiles instead of querying the whole dataset, it seems logic to stop projecting geometries and worry about positions at a tile level, and using TopoJSON makes a lot of sense for this. The procedure would be to keep receiving geojson from the server and convert each tile on the client with mbostock/topojson.

Blocked by:

• #3 Add browserify support

Provide ways to know if features have been loaded, when they have changed, and get features for a given sublayer

As a user of the L.CartoDBd3Layer I want to able to:

1. Get notified when the features have been loaded or have changed (eg: initially, when the URL has been updated, or every time a filter has been applied).

   layer.bind('featuresChanged, function (features) {
      // I can work with the features
   });
   

2. Have a way to check if features have been loaded and be able to extract the features that have been previously loaded.

   if (layer.featuresLoaded()) {
     var features = layer.getFeatures();
     // use the features to get a list of categories, calculate the result of a formula, etc.
   )} else {
     // wait until features have been loaded/changed
     layer.bind('featuresChanged', function () {
       ...
     });
   }
   

@fdansv @rochoa @javisantana what do you guys think?

Add a test for overzoom

Requests tiles to windshaft using zxy provider

Add XYZ provider

Events mirroring in geometries out of bounds

I assume this sort of behaviour isn't cool

module.export

We need to review what we should export. In other words: what the public API must be.

Code style/linting

Use a more consistent code style:

• tabs vs spaces
• unused vars
• add jshint or any other linter

Polygon/line events should not be fragmented into tiles

In the long term this problem may be solving by stitching geometries, but for now it makes sense just to hash repeated features.

cc @javisantana

Don't assume global variables

Use require to use other libraries/components:

• carto in renderer
• d3 in util
• underscore in renderer

Move latLngToLayerPoint to cartodbd3layer

Repair vizjson example

Reduce complexity of render method

Right now the render method in src/renderer.js is about 130 lines long, and it contains way too much stuff. It should be refactored.

Tiles should be reloaded when mapconfig is received

There should be a base provider class

xyz.js and windshaft.js have a lot of repeated logic. A few methods should be directly inherited from a base provider.

Decouple renderer from Leaflet

• Stop extending L.class.
• Remove previous layer-related calls.
• Remove uses of Leaflet helper functions (projection mostly).

Add public, layer-level interface for filtering

Need to discuss this with @alonsogarciapablo