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 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:
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.
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.
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 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
Tree / dendrogram: http://bl.ocks.org/mbostock/4063570, with a how-to (untested) here: http://www.meccanismocomplesso.org/en/dendrogramma-d3-parte1/
Treemap: https://github.com/mbostock/d3/wiki/Treemap-Layout, http://bl.ocks.org/mbostock/4063582, zoomable treemap: http://bost.ocks.org/mike/treemap/
Network (force layout): http://bl.ocks.org/mbostock/4062045 (see also Jim Vallandingham's talk at OpenVis: http://vallandingham.me/abusing_the_force.html)
Chord diagram: https://github.com/mbostock/d3/wiki/Chord-Layout, http://bl.ocks.org/mbostock/4062006, tutorial: http://www.delimited.io/blog/2014/11/18/interactive-chord-diagrams-in-d3
Pie chart: http://bl.ocks.org/mbostock/3887235, (see Scott's book chapter 11, too)
Histogram: http://bl.ocks.org/mbostock/3048450
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).
Scrolly tool from WSJ just released (I haven't tried it): https://github.com/WSJ/scroll-watcher
Maps with tooltips, education per child: http://www.npr.org/2016/04/18/474256366/why-americas-schools-have-a-money-problem
Animated Bubble Maps tutorial: http://vallandingham.me/bubble_charts_in_js.html
Sign up for the DashingD3 newsletter if you haven't: https://www.dashingd3js.com/
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.