intellipharm-pty-ltd / dc-addons Goto Github PK

My transition from dc.js + leaflet.js to dc.leafletMarkerChart puzzles me on
how to handle events on the markers that are created.

d3.selectAll('.leaflet-marker-icon').on('click', function() {
        console.log("click");
}

does not work.
Is there a function to do that and be able to get id of the markers as well ?

The marker() function seems promissing but unusable (get message: marker is not a function) while doc says:

.marker() - set function (d,map) to build the marker object. Default: standard Leaflet marker is built

Hi there, this might be a bit of a crazy ask I was wondering if it was possible to add a leaflet plugin to the leaflet marker chart.

• Thanks

for any help and love dc-addons!

Dear Tim and the team,

First of all, I would like to thank you about the great apps you built, especially dc-addons.

I have been working on a dashboard project which I built with Crossfilter and dc.js, everything was going good until the data reached 2 years of worth. So the dashboard is really slow now as I have about 120550 rows with more than 43 dimensions/groups!

Then, I started searching to move the dashboard server side, so I found your dc-addons project as a solution that has many options for me to move it, i.e: CrossFilter-server and elastic search.

Can you please tell me if your dc-addons is still working and maintained? Unfortunately, I was not successful in getting any of your server extensions to work. Some of the errors I faced:

1. "npm install dc-addons --save" Gives the following error:
   Refusing to install dc-addons as a dependency of it-self, this was solved.
2. Grunt generated the following:
   UNMET PEER DEPENDENCY grunt@>=0.4.0, solved.
3. iojs generated an erro on the jsdom verision, solved but another error shows.

Do you have a simple working example of crossfilter-server? or elastic search? I'm really in need to move my dashboard to your addons, it will save a lot of performance and will also save time on me.

Looking forward to hear from you ..

Best regards,

Hi,

Is it possible to use the dc leaflet library together with the angular-dc library to link charts, tables and maps? Or does it need more work?

Hi,

I noticed a bug with bubbleCloud, here's a fix. The example page on http://intellipharm.github.io/dc-addons/examples/bubble-cloud.html is also affected.

--- dc-bubble-cloud.js.orig 2015-12-13 13:14:20.014238646 +0800
+++ dc-bubble-cloud.js  2015-12-11 11:24:39.295931930 +0800
@@ -14,7 +14,7 @@
     }

     dc.bubbleCloud = function (parent, chartGroup) {
-        var _chart = dc.bubbleMixin(dc.capMixin(dc.bubbleChart()));
+        var _chart = dc.bubbleMixin(dc.capMixin(dc.bubbleChart(parent)));

         var LAYOUT_GRAVITY = 0.2;
         var RADIUS_TRANSITION = 1500;

Thanks

After updating the pie chart, clicking on circles/bubbles selects the wrong bubbles. Do you have an idea for that?

Popup are opened from a click on a marker.
Is it possible to have popup when mouse is over a marker (mouseover event).

I am able to use dc alright, but when I am trying to use dc.leafletCustomChart I keep getting an error saying that dc.leafletCustomChart is not a function. I have imported dc, leaflet and on importing import * as dcaddons from'dc-addons'; it isn't working. Including dc-addons/dist/leaflet-map/dc-leaflet.js in scripts of angular-cli.json didn't help either.

How can I get it to work?

Hi,

seems like dc.leaflet popup functionality is somehow, broken. Clicking marker does not display a popup.

example page is also affected by it too: http://intellipharm.github.io/dc-addons/examples/leaflet-marker.html

for some reason map._panes.popupPane.appendChild(this._container) in leaflet.js does not add any elements into #leaflet-popup-pane

d and map are undefined

.icon(function(d,map) { console.log(d); }

How can I change the color of the icon then ?

Is there a tiles function to specify the L.tileLayer and attribution for a dc.leafletMarkerChart ?
It seems but haven't been able to use it.

So to do this, I have changed in hard the code line 25 in dc.leaflet.js

var _tiles = function (map) {
            L.tileLayer(
                //'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
                'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                {
                    attribution: '© OpenStreetMap contributors'
                    //attribution: 'LSCE © 2016 | Baselayer © ArcGis'
                }
            ).addTo(map);
        };

Is it possible to create 2 overlays in one map?
For example an overlay of markers and another one with path or other markers?
Could you point me to the right direction for where to start?

I'm running into the issue where the map won't drag after clicking on a marker. If you click on a marker and then click on the map, it's fine. If you click on a marker and then click "clear filter," it's fine. But if you click on a marker and then zoom, or click on a marker and then drag, or click on a marker and then click the "x" on the pop-up, then dragging stops working.

It seems that the problem is coming from the declaration of y in dc-leaflet.min.js and is saying that IndexOf is not a function. Any idea what's causing this?

.title(function() {})
that can be used to get rid of the title when mouseover a marker.

.fitOnRender()
that when set to false is usefull to zoom on a specific zone independently of your markers.

Is it possible to filter (set visible or not) features displayed from a dc.leafletChoroplethChart ?

I have started to code a small application to filter from specific dimensions different model configurations (here displayed as GeoJSON within a dc.leafletChoroplethChart). But I am stucked on how to link it to a simple row chart for example. Any help welcome.

My code is available from https://github.com/PBrockmann/NEMO_Config_Finder and tested from very last release of dc.js and dc-addons.

Your function doesn´t remove the original title/tooltip for pie charts. But I´ve found already the solution!
At line 30 in dc-tooltip-mixin.js you have to change "g.pie-slice path" to just "g.pie-slice", after that it work´s like charm.

Best regards und thanks for this great plugin :)

The paired row chart example link returns a 404 error, even though the file appears to be in the examples folder.

I tried many different ways but couldn't overcome this problem. In normal leaflet markercluster, all coordinates are grouping well and generate the total number of cases in the data. However, when we use dc.leaflet.MarkerChart, clustering is not created for the points that exactly fall to the same place. I checked Yurukov's example and the same problem was there. For instance, demo1.tsv has 1378 data points but the map only displays 1324 of it. I think there is a problem in grouping procedure. Here is the related partial code of Yurukov. Any help is greatly appreciated. Thanks, Murat

var facilities = xf.dimension(function(d) { return d.geo; });
var facilitiesGroup = facilities.group().reduceCount();

Hi,
you lib is awesome!! already stared. :-)

I have a problem.
In you deom Markers with no clustering and selection by area and also in my own tests test filtering works if i move the map. But if i change the pie filter or other connected crossfilter the map flickers and stays the same.

Is it working propperly?

Would be awesome to integrate as a dc.addons the d3.hexbin. Cf example here: https://bl.ocks.org/mbostock/4248146

There's a project from @trevorgerhardt as a source of inspiration: http://trevorgerhardt.com/hexacabi/
https://github.com/trevorgerhardt/hexacabi/blob/gh-pages/index.html#L269:L332

Hello all,
I'm struggling a bit with customizations of markers on a Leaflet map. Documentation pointed me to the .marker() styling option, but I can't find a sample of this. Could someone provide an example of how to turn the default markers into circles (as in L.circleMarker) with a specific, uniform color?
Thank you much!

By @ozermm

I am trying to add a map layer to the marker chart in order to define the border of the city but I couldn't do it. Can anyone tell me how to do it?

When I use dc_leaflet.markerChart option to generate the map, I cannot add any other layers. Could you please help me on this. I tried to find a solution but couldn't do. Any help is greatly appreciated.

Can i get the SQL script for importing the data

On other dc charts, when applying a filter by clicking on an element on a chart, all other elements on the chart become "deselected", or grayed out (unless they were part of an existing filter). This behavior isn't implemented by the marker chart, so it's hard to tell which markers are currently selected if the user applies a filter on the chart.

I realize implementing this behavior is probably complicated by all the different options available for display/filtering on the marker chart, but I need to make it work for our use case (no clustering, just click filtering on the markers). I can file a PR with the changes if you'd like a start in making it work in general.

Hi,

I'm trying to use your library in a ES6 project. But I can't seem to get it to work. I'm not sure how and where dc-addons is able to modify the dc object before I try to use it. Can you give me a pointer on how to import the library correctly and then use it, in an ES6 class?

Hi,
I gather from the documentation that 'filterByArea(true)' on a leafletMarkerChart would enable event when the map is panned. I tried setting this to true in the leaflet example but am getting an error '_g' as undefined. If I turn this off the map is rendered but data filter depending on the map events are not happening.
Just a copy/paste of the example code but providing here for completeness

`
var marker = dc.leafletMarkerChart("#demo1 .map")
.dimension(facilities)
.group(facilitiesGroup)
.width(600)
.height(400)
.filterByArea(true)
.clusterOptions({maxClusterRadius: 5, showCoverageOnHover: true, spiderfyOnMaxZoom: true})
.cluster(true);

  var types = xf.dimension(function(d) { return d.type; });
  var typesGroup = types.group().reduceCount();

  var pie = dc.pieChart("#demo1 .pie")
    .dimension(types)
    .group(typesGroup)
    .width(200)
    .height(200)
    .renderLabel(true)
    .renderTitle(true)
    .ordering(function (p) {
      return -p.value;
    });

`

How do you access to popup properties ?
I would like to set the marker._popup.options.closeButton to false but cannot access to marker._popup

mapChart  = dc.leafletMarkerChart("#chart-map");

mapChart
      .width(1000)
      .height(300)
      .dimension(mapDim)
      .group(mapGroup)
...
      .popup(function(d,marker) {
        console.log(marker);
        //marker._popup.options.closeButton = false;   // not possible
        id = d.key[2] -1;
        return  "Id: " + data[id].Id;
      })