Processing hierarchical JSON data with d3.js

Question

I'm trying to understand how to use more complicated data sets with d3. Below I will show the JSON data I would like to display;

{
"questions": ["Large choice of food", "Food quality", "Food freshness", "Taste of food", "Waiting time to recieve food", "Value for money"],
"places": ["US", "UK", "TK"],
"dates": ["Jan", "Feb", "Mar"],
"values": [ 
[
    [24, 42, 72],
    [29, 45, 79],
    [34, 39, 84]
],
[
    [33, 73, 41],
    [21, 16, 45],
    [43, 22, 17]
],
[
    [75, 53, 78],
    [55, 33, 22],
    [94, 83, 99]
],
[
    [63, 37, 11],
    [47, 67, 62],
    [33, 34, 35]
],
[
    [43, 89, 78],
    [99, 92, 87],
    [41, 23, 71]
],
[
    [92, 11, 45],
    [100, 0, 50],
    [40, 72, 62]
]
]
}

From here I would like to be able to select one question, then pair it with a place + date and then retrieve the value based on this.

I have tried to find resources online which could help educate me with how to access this kind of data in this way, but i've had no such luck. I have created a plnk to provide a set up for this.

http://plnkr.co/edit/Cdwm5RXoIdBNg0uxeeP6?p=preview

So the question is how can I retrieve this data in d3, and display it in the console in the order of question+[place + date][values based on this].

Any advice and links to good educational resources would be a big help for me at this stage,

Cheers

EDIT:

The above JSON format may be a little confusing, here is perhaps a more simplified version?

{
  "dates": ["Jan", "Feb", "Mar"],
  "questions": {
    "Large choice of food": {
      "US": [11, 15, 13],
      "UK": [25, 24, 39],
      "TK": [27, 23, 20]
    },
    "Food quality": {
      "US": [11, 15, 13],
      "UK": [25, 24, 40],
      "TK": [27, 23, 20]
    },
  }
}

I cant see a question in the UI ? And upon choosing a place and a date how do you know what values to get ? — thatOneGuy
– thatOneGuy, Commented May 19, 2016 at 15:03
Just read the data, i take it in each data values the first column is US, second Uk and third TK ? And then top row is Jan second is Feb and third is Mar ? — thatOneGuy
– thatOneGuy, Commented May 19, 2016 at 15:05
Hi, yes that is the idea but I agree it is perhaps a little confusing. I included another data structure that might make more sense? — alexc101
– alexc101, Commented May 19, 2016 at 15:21

thatOneGuy · Accepted Answer · 2016-05-19 15:24:45Z

1

Here is something I put together but it isn't using D3, but vanilla JS. So I'm not sure if you want this but I'll throw it in anyway. Rather self explanatory: http://plnkr.co/edit/ckm45FB3RVhofGbUjdBl?p=preview

Main chunk of code :

        var questionData = data.questions;
        var monthData = data.dates;
        var countryData = data.places; 

        //populate question drop down
        var questionSelect = document.getElementById('questionSelect');

        for(i=0;i<questionData.length;i++){
          var option = document.createElement('option');
              option.text = questionData[i];
              option.value = questionData[i];

              questionSelect.appendChild(option);
        }


         var submitButton = document.getElementById('submitButton');

         submitButton.addEventListener('click', getData);


         function getData(){
           var thisQuestion = document.getElementById('questionSelect').value;
           var thisCountry = document.getElementById('countrySelect').value;
           var thisMonth = document.getElementById('monthSelect').value;

           var questionIndex = questionData.indexOf(thisQuestion);
           var countryIndex = countryData.indexOf(thisCountry);
           var monthIndex = monthData.indexOf(thisMonth);

           var getValue = data.values[questionIndex][monthIndex][countryIndex]; //this is the found value
           console.log(getValue)
         }

answered May 19, 2016 at 15:24

thatOneGuy

10.7k9 gold badges59 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alexc101 Over a year ago

Sorry for the late response. This works and is a good insight, it's not exactly what I asked but thanks for the answer anyhow!

Collectives™ on Stack Overflow

Processing hierarchical JSON data with d3.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related