Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript D3.js Data Binding with D3.js Data Binding

Posted by Zak Erving
Zak Erving
22,832 Points

"ReferenceError: data is not defined."

Been trying to follow along with this video, but am having trouble replicating the instructor's progress…even with the correct workspace and working in the console character by character, I'm still getting an error message that tells me that my data is not defined (yet the instructor is able to reference an array w/ 518 objects). Is anyone else experiencing something similar?

Kerry Smyth
Kerry Smyth
3,921 Points
Kerry Smyth
Kerry Smyth
3,921 Points

I was getting a similar error but I then added the single quotes around data inside the parentheses:

viz.selectAll('circles').data('data')

4 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

This is because data is just the parameter of the callback function being run once D3 has finished loading the climate_data.csv file on line 17 of dataBinding.html. It can therefore only be accessed from within that function.

The dots variable on the other hand, is assigned without the var keyword within that same callback function and therefore is a global variable, and can be accessed from the dev tools console.

Also note that in the video and in the answers from Zak Erving and Mike Ward, the selectAll method is being passed the string circles, plural/with an s on the end, rather than the singular circle as is the case in dataBinding.html (and how the svg element is named).

Eric Flood
Eric Flood
3,920 Points
Eric Flood
Eric Flood
3,920 Points

This does not answer the question or fix the issue.

Mike Ward
Mike Ward
30,843 Points
Mike Ward
Mike Ward
30,843 Points

I believe what is causing your error are the debug tools. I am using Chrome (as per the video), and your results may vary in other browsers.

You'll need to select the line number next to the corresponding code that you want to debug. To do so: open the sources tab and select the dataBinding.html file. Next, select the line number (19) to place a break, then refresh your browser (you'll notice the instructors browser refresh at ~2:56 in the video).

You should then be able to pass data as a function of data with:

viz.selectAll('circles').data(data)

Cheers

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

This is such a helpful answer that should have been included in the course videos.

It was horribly frustrating, and then I realized that the debugger paused any of script from processing, which is why the data variable didn't exist.

Once you add the breakpoint, click the 'play' button, so that the script runs and then pauses at the breakpoint.

Zak Erving
Zak Erving
22,832 Points
Zak Erving
Zak Erving
22,832 Points

Seems I needed to modify the workspace a bit to get everything to catch.

var csvData;
d3.csv('./climate_data.csv', function(data) {
csvData = data;
dots = viz.selectAll('circles')
                 .data(csvData)
                 .enter()
                 .append('circle');

By declaring a variable beforehand and then referencing/assigning it inside the function, everything checks out…however, I'm still kind of new to JS and this seems kinda…"hacky".

Does anyone have any suggestions on how I might improve this?

Maximilian Kohl
Maximilian Kohl
305 Points
Maximilian Kohl
Maximilian Kohl
305 Points

Thanks Mike, I saw that something was happening at that moment but wouldn't have guessed a reload. It is not very easy to follow, when crucial parts of the instruction are omitted.