D3 + JavaScript Tooling's Not (Just) For Unicorns
A horrible introduction to using modern JavaScript tooling with D3
A horrible introduction to using modern JavaScript tooling with D3
Chapter 7
If you look inside of node_modules, the important folder here is a secret, hidden folder called .bin.
Note: To see hidden folders on OS X, press
Command+Shift+.when you’re in Finder. In this case, browse intonode_modules, press those keys, and you’ll see.binkind of faded out up at the top. Click on it.
.bin includes all of the binary files that your modules have, which we can think of as all of the programs you can run. You’ll see one of the files inside is eslint, just ready to go!
I guess we need some JavaScript code to check, right? Let’s take a nice (terrible) sample D3 file, and save it as graph.js.
var datapoints = [ { name: 'New York', population: 8 },
{ name: 'Los Angeles', population: 3.9},
{ name: 'Washington, DC', population: 0.7 }
]
var svg = d3.select("body").append("svg").attr("height", 100).attr("width", 400)
svg.selectAll("circle").data(datapoints)
.enter().append("circle")
.attr("r", 10)
.attr("cx", function(d) {
return xPositionScale(d.population);
})
.attr("cy", function(d, i) {
return 100 * i;
})You’ll save this as graph.js in your project folder, right next to the package.json file.
If we want to lint this file to fix it up, we need to ask eslint to take a look at it. Our command needs to say “go into node_modules, then go into .bin, then run eslint, and tell it to look at graph.js.” The end result looks like this:
Windows note: You need to put quotes around the
eslintpart, to make it"./node_modules/.bin/eslint" graph.js. You’ll need to do this every time you run something fromnode_modules.
It mostly makes sense, except for the ./ part - this just means “go into node_modules that’s inside of our current directory.” You don’t always need it, but if you don’t use it sometimes you’ll run into issues.
Spoiler alert: the command doesn’t work. That’s because eslint doesn’t know what rules we want to listen to yet! We can tell eslint by initializing it.
Windows note: Again, you’ll need to do
"./node_modules/.bin/eslint" --fix graph.js. I’m not going to remind you any more!!!
The default is Answer questions about your style, but we’re probably too dumb to have a quality consistent style. It’s probably best if we use an existing style guide! So push up, select Use a popular style guide, and hit enter.
Then pick Standard. This allows us to not use semicolons, which is normally a terrible idea but pretty relaxing when cutting and pasting D3 code from the internet
Then pick JSON. That’s just a personal preference.
Yes, install whatever it wants.
And now we’re good! The very last line says
Successfully created .eslintrc.json file in /Users/jonathansoma/Documents/Columbia/Curriculum/2018-storytelling/test3Which sounds pretty cool. This is the file that tells eslint what kind of syle we’re going to use. Right now it looks like this:
Cool, right? So cool? So much the best cool? Sigh, I know, that was a lot of work to just get those three lines. Let’s try to run eslint on our file again.
Windows: Remember your quotes!
LOOKS LIKE WE’RE IDIOTS. Here are our errors:
2:3 error Expected consistent spacing standard/object-curly-even-spacing
2:41 error A space is required before '}' object-curly-spacing
5:1 error 'd3' is not defined no-undef
5:14 error Strings must use singlequote quotes
6:19 error Strings must use singlequote quotes
7:9 error Strings must use singlequote quotes
8:9 error Strings must use singlequote quotes
8:22 error Missing space before function parentheses space-before-function-paren
9:1 error Expected indentation of 4 spaces but found 2 indent
9:10 error 'xPositionScale' is not defined no-undef
9:38 error Extra semicolon semi
11:9 error Strings must use singlequote quotes
11:22 error Missing space before function parentheses space-before-function-paren
12:1 error Expected indentation of 4 spaces but found 2 indent
12:17 error Extra semicolon semi
13:5 error Newline required at end of file but not found eol-lastOof, oof, oof. That’s the problem with rules: you’re in trouble if you break them! We’re supposd to only use single quotes, apparently, and put spaces before }, and some other stuff about spaces and functions parentheses.
I’m sick of reading errors! Luckily, there’s a nugget of hope: 8 errors and 0 warnings potentially fixable with the–fixoption. Let’s try that.
First, open up your graph.js. Take a good, long look at it. Stare it down. Now run this command:
Hey, look at that! Down to 2 errors. Pretty nice! If you watched your graph.js closely, you’ll see it transformed a little bit - the " all became ' and the spaces shifted around a litte. Instead of us doing the hard work of consistent style, eslint did it for us!
Now we have two remaining errors
6:1 error 'd3' is not defined no-undef
10:12 error 'xPositionScale' is not defined no-undefLet’s start with the second one… did I never define xPositionScale? Hm, guess not! Can my code work without it? Nope!
And that’s how linting finds all of your dumbest errors for you. You don’t need a teaching assistant or a rubber duck, just the eslint command! It’s great at catching typos or reminding you of variables that you should or shouldn’t be using.
To fix that error, we can define xPositionScale somewhere in our code:
Run the linter again…
And we’re just down to the d3 problem!
The big issue here is that our code is fine how it is - we didn’t forget to create the d3 variable, we’re just adding d3 way off in the html file, not in our graph file.
To fix this, we need to tell eslint that d3 is actually a global variable, one that comes from outer space (or wherever) and falls right into our script. Let’s add one line to the top of our code:
Now let’s run the linter one more time…
And ta-da! No issues. I think it should probably do a little dance for us since we did such a good job, but I guess we can’t have it all.