Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

"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

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

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

This does not answer the question or fix the issue.

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,369 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.

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?

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.