Skip to content

Latest commit

 

History

History
138 lines (80 loc) · 6.09 KB

README.md

File metadata and controls

138 lines (80 loc) · 6.09 KB
Raw

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:

  • 20% for using 4+ chart types we covered in class (can include small multiples as one)
  • 20% for good interactivity: Transitions, highlights, tooltips everywhere needed, filter/sort, animation, update data...
  • 10% on text: Connective text holding the story together, intro and conclusion, annotations on graphs, good explanations, good writing (good English style)
  • 10% on storytelling: You create a useful, interesting data story flow using a mix of text, progression of graphs, steppers/buttons, highlights, scrollytelling. (You don't have to use all of them.)
  • 10% on graph/chart elements: Good labeling of values/axes, tooltips, readability of chart contents and labels
  • 10% on visual style overall: Color scheme, attractiveness, clarity in graphs
  • 10% for good data analysis: Interesting findings/results, nice use of top 10s, relating data sets to each other intelligently
  • 5% for page layout/design: Good visual and functional CSS, useful external links, resume/CV link, header/footer with info about the project and data as needed.
  • 5% for good UX: Can your reader figure out what to click on etc?

Extra-extra credit options will include:

  • Responsive design
  • Using interesting/new interactions or graph types we didn't cover in class (including layouts below)
  • Anything else that makes it stand out as a great project (my perogative)

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.