2

I am learning the wonderful libraries, dc.js and crossfilter.js and am making an example using a geochoropleth map.

I want to feed in some data and have the map draw the specific countries but the countries are not showing up. This is part of a much larger example and I'm trying to submit only the part I am having a problem with. I posted a jfiddle at https://jsfiddle.net/wheatgrass/93w6p6dc/6/

(but had a problem with it getting the cdns to work) where you (hopefully) can see the data and my crossfilter outputs. Everything is going to the console.log output.

Initially I had the data in a nested array, but read about cf needing "flattened" data, so I add two subset examples of flattened data, countries1 and countries2. I want to use countries2.

I tried using the reductio helper libs and (yay!) got the n1dimgroup to output by key "nid" and an array of countries with values. I did this by using the example in the Readme.md on the reductio github page. I could not find any examples in SO or elsewhere for what I am trying.

I need help with this part. How do I rewrite the reducer such that the n1dimgroup output is an object with key,values, like this?

{ key: Benin, value: 1}
{ key: Nepal, value: 2}
...

etc?

Your help and assistance would be greatly appreciated. Thank you. I have shortened the code below but data are on the jfiddle.

code below

<script>
//please see var countries2 on the jfiddle

 var countries = [
   "key":"Albania",
   "value":2,
   "key":"Jamaica",
    "value":1,
    "key":"Senegal",
     "value":3,
    "key":"Morocco",
     "value":2,
     "nid":"0",
     },
     {
      "key":"Fiji",
       "value":1,
      "key":"Mongolia",
      "value":1,
       "key":"Uganda",
       "value":1,
       "nid":"36",
       }
     var n1 = crossfilter(countries2);
     var n1dim = n1.dimension(function(d) { return d.nid});
     var n1dimgroup = n1dim.group();
      console.log("n1dim",n1dim.top(Infinity));
       console.log("n1dimgroup",n1dimgroup.top(Infinity));

var reducer = reductio()
     .exception(function(d) { return d.key; })
     .exceptionCount(true)
     .exceptionSum(function(d) { return d.value; });
reducer(n1dimgroup);

console.log('reducer', reducer);
console.log('n1dimgrouptop after reductio', n1dimgroup.top(Infinity));
console.log('n1dimgrouptop.key', n1dimgroup.top(Infinity).key);
console.log('n1dimgrouptop.value', n1dimgroup.top(Infinity).value);
</script>

How do I get the reducer to provide the output in key,value form in an object?

Ethan Jewett
  • 6,002
  • 16
  • 25
user2517542
  • 69
  • 8
  • I'm curious why you need to do this? I suspect its so that the group works with dc.js by default, but in that case I'd just suggest looking at the keyAccessor and valueAccessor options on dc.js groups, which let you use objects in formats other than the key/value format. – Ethan Jewett Apr 16 '16 at 23:23
  • BTW, the JSFiddle above is broken for me because the dependencies don't load and there are a couple of typos. Here is a working version: https://jsfiddle.net/mh0n7tx0/4/ – Ethan Jewett Apr 17 '16 at 01:23
  • Thanks for your response, Ethan. I am asking because in the geochoropleth, the json feeds in d.properties.name, which comes out in object format in the console. I can successfully give it data to draw that has one country, with one key and value, but when I send it data from the group that has multiple keys and values, it doesn't draw any of them. I will try to put a better example on jsfiddle. I have tried many combinations with key and accessor values, too but not yet been successful. – user2517542 Apr 17 '16 at 11:56
  • I think the problem is probably in the dc.js geochloropleth setup. If you can add that code to your question and fiddle, we can take a look. – Ethan Jewett Apr 17 '16 at 12:32
  • Hi Ethan, I have posted one example on bl.ocks.org at "http://bl.ocks.org/greaneym/ 19afc9dd7221087b6891a5f0efe3f4bf" and will try to get the second one soon. I am trying to develop a series of examples and am sharing with everyone. The first example shows how the countries display. The second example shows that I am struggling to get the countries output in a form that with work with the d.properties.name. I don't understand how to do this yet. Thank you for your help. – user2517542 Apr 17 '16 at 15:03
  • The second example "http://bl.ocks.org/greaneym/2a600873150a8e3f4bede48356579ad3" contains the subset of data with which I am having problems. The n1dimgroup output does not draw because it is not compatible with d.properties.name, but I don't know how to fix this. – user2517542 Apr 17 '16 at 16:01
  • It seems like the keyAccessor and valueAccessor are the answer here. Would you be able to add the dc.js map to the JSFiddle example and we'll get it working? – Ethan Jewett Apr 17 '16 at 21:32
  • I am not very good with JSFiddle but I have tried to make one including the map "https://jsfiddle.net/wheatgrass/na6do8wz/" and also included the world.json file locally. I couldn't get jsfiddle to see jquery though I put in a cdn with a https link. Thanks. – user2517542 Apr 18 '16 at 13:11
  • Ok, here is a simple-ish working example based on your data. It's not exactly what you want, but you should start with something that works and work from there. I'd recommend moving this discussion over to the dc.js mailing list, using this example as your starting point: https://jsfiddle.net/mh0n7tx0/5/ – Ethan Jewett Apr 18 '16 at 13:43
  • Thanks for your help, Ethan. I will check this out and move my further comments or questions to the dc.js group. – user2517542 Apr 18 '16 at 14:01
  • I tried to acknowledge this page as answered but can't find the arrow to click. – user2517542 Apr 18 '16 at 15:37
  • No worries :-) I think you can mark your own answer as "answered", but you may not have enough points to do so yet. – Ethan Jewett Apr 18 '16 at 17:20

1 Answers1

1

Ethan's example fiddle showed me how to use the accessor functions after using reductio lib on the group. This answered my questions. Thanks!

user2517542
  • 69
  • 8