On This Page...

Week 14: Reusable Charts, More Layouts, Project Help

Homework Review

Still a little bit of work on the chart functions.

Reminder that functions can go inside functions!

function drawLineChart(data) {

    var width...
    var height...
    var xAxis...
    var yAxis..
    var svg = ... // draw your svg here

    function drawme(data) {

        // you can access and use variables from the outer function here:
        xAxis.domain(...)
        yAxis.domain(...)

        svg.append...  // you can access svg here, from outer scope!
    }
}

Project Grading

Project is 40% of the course grade total (base points, not the extra credit points). Base points were 502 this semester.

Here is the breakdown:

Extra-extra credit options will include:

Helpful Stuff (I Hope)

Joining files in Excel using VLOOKUP:
https://support.office.com/en-us/article/VLOOKUP-function-0bbc8083-26fe-4963-8ab8-93a18ad188a1

See the worksheets in scatter_data_plus_codes.xlsx and in deaths_04yearsold_codes.xlsx.

Click on map to update line chart: lines_transition_map.html This takes a while to load, and the spinner isn't working right.

A Useful Thing for Pre-Debugging and Interviewing: Linting

Linting is running an app over your code to check for style and obvious errors, like variable conflicts or unused variables. Linters will often help you avoid bugs and save time.

You can run jshint from the command line. Also look at "JS Beautifiers."

A former colleague has written a great blog post on better ways to lint and check for formatting errors in JS: http://glebbahmutov.com/blog/1-2-3-linted/

This requires you to have node installed and do a bunch of other modules installs. I set it up for myself, and I can help.

D3's "Reusable Chart Pattern"

You've seen that D3 is a pretty "manual" process. There is one proposal for better code encapsulation and re-usability in the "reusable charts" closure paradigm.

Reference:

Note: This is the style Jim Vallandingham uses in his tutorial code.

See example using it in using_reusable_barchart.html.

Another recent example: http://bl.ocks.org/rcmoore38/9f2908455355c0589619

Other D3 Layouts

Other layouts we haven't covered are listed in Chapter 11: http://chimera.labs.oreilly.com/books/1230000000345/ch11.html.

Also see the D3 docs: https://github.com/mbostock/d3/wiki/Layouts

Ones that might work in your project: pie (for small number of wedges), treemap (to drill into causes of illness), histogram (to see distribution of death causes and rates, etc).

Recent Interesting Things

Homework

Make an appointment to see me if you are stuck. Drafts due April 28 if you want comments, final project due May 5.

I'll email you about a party-demo-session on May 3.