dc-js / dc.leaflet.js Goto Github PK

Currently the color is used to encode the selection status.

But sometimes it's nice to encode some other property using color.

I'm not sure we want to go as way-out as dc.graph.js, where attributes are cascaded, and selection can set arbitrary properties. But maybe this could be more flexible.

Gordon Woodhull is stepping down from maintaining dc.leaflet.js at the end of 2022.

He may occasionally respond on Stack Overflow or on GitHub Issues, but will no longer maintain or contribute to the project.

We are seeking new maintainers for dc.leaflet.js. (Deepak Kumar @kum-deepak will maintain dc.js, and he's also seeking new maintainers to help on that project; see dc-js/dc.js#1868)

There is a lot that could be improved with dc.leaflet.js, such as:

• factoring it in ES6 mdoules
• updating it to latest Leaflet
• adding features and visual encodings

If you're interested in helping, please reach out here or via email.

Reported by @PBrockmann in intellipharm-pty-ltd#8.

_icon is not passed any arguments, so e.g. the color can't be set based on the data.

Needs _icon(d,map) here: https://github.com/dc-js/dc.leaflet.js/blob/master/src/markerChart.js#L28

I've documented it as part of the base, but actually it's implemented on each chart separately.

Easy to fix but needs a little testing.

Is it possible to update leaflet version to 1.0.2 and leaflet.markercluster to 1.0.0 ?
These are the latest versions of leaflet.
I am planning use in new app and just wanted to start with newer versions.

Originally the code attempted to apply Leaflet twice to the div, resulting in the error

map container is already initialized

#14 fixes the error - are there circumstances where we do need to completely reinitialize Leaflet? In dc.js this is usually a punt where there is code that can't gracefully transform/transition from one kind of data to another.

When executing a "reset all"..

<a href="javascript:dc.renderAll(); dc.redrawAll()">Reset all</a>

.. the layer of circles on a bubbleChart get stacked on top of each other.

It seems like the old layer first has to be removed.

KatiRG posted on gitter:

@gordonwoodhull I got dc.leafletChoroplethChart to work with a colorbrewer palette, and also with the default d3.scale.category20c() scale but in the correct order according to the spectrum in the documentation (https://github.com/mbostock/d3/wiki/Ordinal-Scales). Here is a gist: https://gist.github.com/KatiRG/87b95d8e3c1827fd0a72

I'll make a PR to fix this

As reported here, d3.tip and other d3 stuff won't work on the shapes in dc.leaflet because the data isn't bound:

http://stackoverflow.com/questions/31790830/d-undefined-for-d3-tip-tooltip-with-dc-leafletchoroplethchart

Since leaflet is creating the svg elements, not d3, the data is not attached and dc.leaflet.js is internally keeping a _dataMap to specify colors etc.

Could we bind those elements post hoc? Or is this dangerous?

Does leaflet have its own notion of data binding?

Is it possible to change the basemap tiles before calling render on the map? Defining the base map tile layer under layers in the .mapOptions accessor doesn't seem to work and results in a blank map with no basemap or geojson data.

In the dc charts (not dc leaflet), when selecting a group, the other groups get grayed-out. (tested with the bubbleChart)

Would this also be desired behavior for the dc leaflet maps?

seems to have rounded all of the bounds except for one

It might not always be controlled by the valueAccessor.

From @thebarbarian on January 17, 2017 8:7

I am not sure if it's a bug or my terrible JS-coding, please remove this if i messed up.

When displaying a LeafletMarkerChart and clicking a marker on the edge of the map, the creation of the textballoon will move the map slighly until it fits inside the frame. If i do this two times, i'm unable to drag the map. It's stuck.
The console gave me the following error after the map is stuck and i click a marker:

_markerList.indexOf is not a function(…)

After changing line 583 of dc-leaflet.js :

(_markerList.indexOf(_chart.filter()) !== -1 &&

into this:

(_markerList.toString().indexOf(_chart.filter()) !== -1 &&

the problem is solved. Adding the toString()-method doesn't seem to affect any of the other graphs on my dashboard.

My apologies if this isn't a bug, but it seemed to make sense to let the developers know.

Copied from original issue: dc-js/dc.js#1263

It would be great to support other layout algorithms such as

• tree layout - here is one variable-sized layout we might use, based on d3's tree layout.
• d3's force layout
• dagre?
• dynagraph? graphviz? if we're willing to go server-side.

In terms of the model and parameters, cola is probably the most complicated, so this may be a matter of moving general stuff to base classes and creating a hierarchy of layouts. Constraints is something no other layout algo has, afaik.

Obviously the parameters that affect layout will all be applied differently, so there's some kind of generator. But the parameters that just affect drawing parameters may be shared somewhat.

The choropleth popup feature in the demo doesn't work. Do you want a feature as described in this Leaflet example http://leafletjs.com/examples/choropleth.html where the values are displayed in a window in the top right of the map?

I did this for my project and this is what it looks like:
http://katirg.github.io/ExtremeAttributes/index.html

I wondered if there was an easy way of implementing OSM Buildings into the map.
Anyone tried this?
https://github.com/OSMBuildings/OSMBuildings

I have now spent 4 or 5 days, figuring out (two times) how you have to create the geo dimension to make it work with markerChart. I thought that the geo attribute of my data object has to look like this:

{ geo: {lat: 23.2323, lng:34.2323}}

The solution is that the object you give the dimension a geo object on your data object that is formatted like this:

geo: "343.34343, 34.23232"

BUT! This alone still does not make the graph show the map markers. You ALSO need to have a lat and a lng attribute on your data object. So completely your data object has to look like this:

[... , {geo: "34.34343, 23.2323", lat: 34.34343, lng: 23.2323, value: 5000}, ... ]

THEN the markers show up on the map, in this case showing the grouped data for the attribute value. Note, that lat and lng have to be Numbers and geo has to be a String!

I believe this should be noted in the documentation somewhere, because it just drove me nuts for the second time now, because of course I forgot how to fix it.

dc.leaflet.js still uses the dc.js 1.0 baseChart, which was changed to baseMixin in 2.0 and removed in 4.0.

In dc.leaflet version 0.2.3 for the Choropleth Chart the popup doesn't work or it doesn't get rendered. Am I wrong or it happens to anybody else? I will be happy to fix that but I would need some help.

      .renderPopup(true)
      .popup(function(d,feature) {
        return feature.properties.name+" : "+d.value;
      });

Anyway, any help would be really appreciated

Currently it's selectedColor and unselectedColor, which is limiting - should be data-driven.

Could follow dc.scatterPlot or dc.bubbleChart or could even follow dc.graph and have cascading data-driven styles...

I am a big fan of dc.js, but realized that it doesn't support heatmaps for leaflet, which my company would love to use. Is there any plans to add that? I know leaflet supports it natively, so hopefully getting it to connect to crossfilter is doable.

I am currently facing a issue when data has the exact same lat long it is counted only once to marker cluster. I tried it by adding data to demo1.tsv in examples also. We have scenarios of multiple data points for exact same lat long.

Thanks.

At least in README

Someone could fairly easily implement a composite leaflet chart - it wouldn't share any code with (dc.compositeChart)[https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.compositeChart] and very little interface, but the same concept of the composite chart owning the leaflet instance and the children drawing layers within it.

I am having issue with importing dc.leaflet while importing it.
const dcLeaflet = require('dc.leaflet');
gives me error unable to resolve path module
Currently I am able to resolve it by adding index.js in dc.leaflet inside node_module directory with following.

dc = require("dc");
leaflet = require('leaflet');
leaflet.markercluster = require('leaflet.markercluster');
crossfilter = require("crossfilter2");
module.exports = require("./dc.leaflet");

This is something we can not do with application deployment.
Do you have any alternative or better suggestion to so?

The demo doesn't render the maps properly and is complaining about the deprecated renderlet method. I'm also having trouble with getting the maps to render. Is the library working with dc 2.0.0-beta.19?

Edit: It seems that the problem is with width being properly set on the div.dc-leaflet.leaflet-container element and its child divs

Simon Johnson writes:

I haven't had a chance to try this particular version of the extension as I used my tweaked version as under time pressure. I did, however, use the same method of createLeaflet customization point. My feedback on this is that it needs to include the creation/adding of tiles and setting the zoom as these could already be set when the map has been created before DC is used.

If a featureOptions are defined via anonymous function for a choropleth map before defining colors and colorAccessor, you get unexpected behaviour. eg:

  var mapDimension = birds.dimension(function(i) { return i.island; });
  var mapGroup = mapDimension.group()
      .reduce(speciesDictAdd, speciesDictRemove, speciesDictInit);
  var mapColors = d3.scale.ordinal()
    .domain(d3.extent(mapGroup.all(), function(g) {
       return d3.keys(g.value).length;
    }))
    .range(['#fef0d9', '#fdd49e', '#fdbb84', '#fc8d59',
              '#ef6548', '#d7301f', '#990000']);
  mapChart
    .width($('#map .box-body').width())
    .height(500)
    .mapOptions({scrollWheelZoom: false})
    .center([51.86, -128.28])
    .zoom(10)
    .dimension(mapDimension)
    .group(mapGroup)
    .geojson(islandData)
    .featureKeyAccessor(function(d) { return d.properties.island;})
    .featureOptions(function(d) {
        console.log(mapColors.domain());  // <<<<<<<<<<<<<<< Domain is not consistent here
        var map = d3.map(mapGroup.top(Infinity), function(d) { return d.key; });
        var grp = map.get(d.properties.island);
        var species = grp ? d3.keys(grp.value).length : -1;
        return {
          stroke: species > 0,
          fillOpacity: 0.7,
          opacity: 0.7,
          color: grp ? mapColors(species) : null
        };
    })
    .colors(mapColors)
    .colorAccessor(function(d) { return d3.keys(d.value).length; })
    .renderPopup(false);

This is due to the color domain being redefined by the dc color mixin. The above code attempts to set the stroke of each polygon equal to the same color as the polygon fill. However, because The colorAccessor is trying to redefine the domain (which is already defined), the stroke colors end up being off.

To fix this, you can define the featureOptions function after colors, and everything works as expected.

Hi,
I am using .marker to customize something. I follow the document but "map" is undefined. d: is correct.
Thanks,
Dien

Hi,

I would like to show popup at markers after the map loaded without click action. Can I do it with dcjs?

Thanks,
Dien