isakiko / d3-visualising-data Goto Github PK

Lesson plans for teaching the basics of HTML, CSS, SVG, JSON, and JS (primarily D3.js), in order to create browser-based data visualisations.

Home Page: http://isakiko.github.io/D3-visualising-data/

License: Other

Makefile 0.89% HTML 42.41% CSS 28.81% JavaScript 27.89%

d3-visualising-data's People

Contributors

Stargazers

Watchers

d3-visualising-data's Issues

HTML5 has section as element

On 01-html.md we have

HTML has more predefined elements that will vary in size and style. To divide the page into different section, we can create a division using <div> to open and </div> to close it.

I would suggest replace <div> with <section> based on http://www.w3.org/TR/html/sections.html#the-section-element. I'm also happy to reword the text to

HTML has more predefined elements that will vary in size and style. To divide the page into different **blocks**, we can create each **block** using <div> to open and </div> to close it.

Using camelCase in javascript

The current javascript code uses underscores, which might be familiar for the learners if they come e.g. from a Python lesson.

My understanding is that javascript uses a camelCase naming convention.
If the change is meaningful, cat_image would become catImage and so on.

I'm not sure this is a first priority though.

json lesson contains conflict markers

The current md and html version of the 06-json lesson contains some git conflict markers like

<<<<<<< HEAD This process is called 'nesting'.

Two "nations.json" files

I noticed there are two nations.json files, in in code/ and one in resources.
The current version of the lesson seems to be based on the one in code/.

Replace chapter 4 with gists, blocks and blockbuilder

Learning git seems to be too much load for this lesson.

It's probably an easier path to learn to create gists, and you'll have covered half the way to properly using Github.

With gists we get access to the d3 ecosystem of bl.ocks.org and blockbuilder.

Also it takes some pressure off “publishing”, just because it looks more like “playground”. We can even start with anonymous gists!

Make HTML examples valid

On 01-html.md we have

<!DOCTYPE html>
<html>
    --> Everything goes in here <--
</html>

I suggest to replace it with

<!DOCTYPE html>
<html>
    <!-- Everything goes in here -->
</html>

That is a valid HTML with the standard syntax for comments.

Duplicate code block in the js lesson

The sentence """ The last step is to write the meow function. We want a pop-up window. The JavaScript function alert() will give us one. """ is surrounded by two occurrences of the same code.
The second occurrence should probably be removed.

This same sentence also probably needs to be swapped and merge with the next one.

How many hours does this lesson need?

This could be indicated in the introduction.

PS: I'm tempted to start translating this to French :)

Introduce Javascript functions before event handler

At 05-javascript.md we have

Using getElementById, we can grab the element from document (a magical object representing the entire page) and work with it in the JavaScript file.
var cat_image = document.getElementById('cat');
Now we want to detect if someone clicks on the cat image. Event listeners help us by constantly checking if someone performs a certain action.
var cat_image = document.getElementById('cat');
cat_image.addEventListener("click", meow);
Our event listener takes two arguments: the type of event and what we want it to do. We want to execute a function called meow(), which will open a pop-up window. We can use the JavaScript function alert().
function meow() {
   alert("Meow!");
};

I think that is better to introduce the Javascript function at the begin. So maybe replace the previous text with something like

We what to open a pop-up window when the user click on the image. We can use the JavaScript function alert() to create the pop-up window. So let's start creating a function to perform the action that we want.
function meow() {
   alert("Meow!");
};
Now that we have our function we need to get the image.
Using getElementById, we can grab the element from document (a magical object representing the entire page) and work with it in the JavaScript file.
var cat_image = document.getElementById('cat');
Now we want to detect if someone clicks on the cat image. Event listeners help us by constantly checking if someone performs a certain action and we can add our functions to be perform when the event is trigger.
cat_image.addEventListener("click", meow);
Our event listener takes two arguments: the type of event and the function to execute.

Mention tools that can edit SVG files

03-images-and-svg.md talk about SVG. Unfortunately writing SVG by hand is boring and "impossible" for complex tasks. There are great tools to edit SVG files, e.g. Inkscape, and almost every plotting library can export to SVG. I think that we should mention this things.

Possible issue with the <script> location

The lessons (javascript part) currently mentions that script can be put anywhere in the body.
There are two possible issues:

the can be placed in the head too, and it is often the case, so it might be confusion for learners
in the lesson, the "getElementById" will work only if the script comes after the corresponding html element in the source HTML file

A possible fix (if we want to avoid talking about onload [1] and other alternatives) would be to say that script can be anywhere in the head or body but that in this example it must be just before closing the body.

[1]: e.g. http://www.w3schools.com/jsref/event_onload.asp