These are chat archives for FreeCodeCamp/DataScience

5th
Dec 2017
Matthew Barlowe
@mcbarlowe
Dec 05 2017 01:28
Ok here is my d3 map I'm trying to create https://gist.github.com/mcbarlowe/2a68c56f374542f431f5bd84c6cb25a2
I'm trying to get the choropleth to change colors when ever I click the buttons up top i.e. update the data and switch to a new color scale but whenever i click the buttons I get ```
Uncaught TypeError: Cannot read property 'states' of undefined
    at default_data ((index):86)
    at HTMLInputElement.onclick ((index):28)
default_data @ (index):86
onclick @ (index):28
any help would greatly be appreciate @becausealice2 or @evaristoc
Alice Jiang
@becausealice2
Dec 05 2017 01:35
My sister brought my brand new niece over so I can't check your code right Now, but it looks like the data is not being read in.
Matthew Barlowe
@mcbarlowe
Dec 05 2017 01:40
That's fine no rush but I've stored the actual data in .d3.get() dictionaries which work in the console i just can't get it to read the topojson data to redraw the map so I can update it with the data
Alice Jiang
@becausealice2
Dec 05 2017 01:42
Do you need to redraw the map with each update? Are you not just updating the fill color?
Matthew Barlowe
@mcbarlowe
Dec 05 2017 01:52
yeah I'm just updating the fill color or trying to by passing it the id of the state from the topojson to the dictionary
Matthew Barlowe
@mcbarlowe
Dec 05 2017 02:48
lol I finally figured it out although I don't know why what i did worked
Alice Jiang
@becausealice2
Dec 05 2017 03:57
What did you do?
Ashek Rahman Anik
@ashekgo
Dec 05 2017 04:02
Hu
Hi There
Alice Jiang
@becausealice2
Dec 05 2017 05:24
Hello
evaristoc
@evaristoc
Dec 05 2017 07:19
@becausealice2 I think better in several parts. And try to write each as you are not going to write the other part. Better not to create high expectations for the audience.
Alice Jiang
@becausealice2
Dec 05 2017 07:22
The whole point of the beginning parts are to build up to the grand finale...
evaristoc
@evaristoc
Dec 05 2017 07:26
:) :) :)
evaristoc
@evaristoc
Dec 05 2017 07:33

@mcbarlowe I had a quick look at your code. The error just said that the us.objects geodataset didn't have the states property. Or that couldn't be read.

However I found the file does have the states property.

But are those charts still ok? I am not sure, but just by having a quick look it seems like you are overlapping charts?
Can you confirm?
evaristoc
@evaristoc
Dec 05 2017 07:41
And you defined us twice: one as a global and then as a local variable in the default_data function.
I have to check how the d3.queue works. Formerly we were not using promises but callbacks.
Eg., with JS-ES5:
d3.json("my_json_file_address.json", function(err, data){/*rendering code inside here*/})
evaristoc
@evaristoc
Dec 05 2017 07:49

d3.queue is an async parallel AJAX-ish that when ready apparently passes all the data into the function called on the await method.

I think it is parallel... or is an actual queue?

evaristoc
@evaristoc
Dec 05 2017 08:02
And I am not sure (JS pseudo-coder here...) but it seems to be a lot of hoisting in your code too, specially with the us variable, which seems to be defined as a global one.
Hoisting seems a clever thing in JS but apart of some exceptional cases where it is convenient, it is in general a source of confusion. Again, not sure but I think you can organise the order of the lines of your code to make it more clear? I think you can get similar or better results with a different order. Or make a better presentation of the hoisting.
evaristoc
@evaristoc
Dec 05 2017 08:12
Suggestions from a still-newbie, @mcbarlowe.
Alice Jiang
@becausealice2
Dec 05 2017 22:43

@evaristoc From d3.queue's github README:

A queue evaluates zero or more deferred asynchronous tasks with configurable concurrency: you control how many tasks run at the same time.

Alice Jiang
@becausealice2
Dec 05 2017 22:48
@mcbarlowe looking through the code in the gist you linked (finally) you are creating a global us variable and reading in the json there as well as reading it in again in a .defer() method in your d3.queue() chain, though I'm not JavaScript-savvy enough to be able to say if that's causing issues...
I'd have to pull the code and test some things to really understand what is going on, which I could probably manage later today if you want or need.