Workshop session introducing the d3 Javascript library to create charts from JSON data which we are now getting in abundance.
This will work well if you bring your laptop, have a decent text editor for coding (read: TextMate, Sublime, Atom, NotePad++... one which will do code completion and highlighting) and have the latest copy of the library which you can get from https://d3js.org
The intention is to start from a completely blank screen and empty document.
No previous experience will be required or assumed, other than a rudimentary understanding of a basic html document. Then:
discover the basics of how SVG graphic primitive types work
how to amend how they look on screen
how to use variables in data to create them
how to use the method in d3 to create 'graphs'
how to amend the code to use different types and sources of data
overview of chart types
making axes dynamic
adding text and lables to charts
adding more than one chart to the viewer
How far we get under the hood depends how quickly you all want to go, but I fully exepct that you will want to listen with one half of your brain while using the other to tweak the code we are writing to see the effect, and then use that to ask questions...
Looking forward to this John
Thank Vince. Fits well with your session because:
d3 is intended primarily for explanatory visualization work, as opposed to exploratory visualizations.
Exploratory tools (like Tableau) help you discover significant, meaningful patterns in data by quickly generating multiple views on the same data set.
Explanatory views highlight what you’ve already discovered. They are more constrained and limited, but also focused, designed to communicate only the important points (with up-to-date data).
Thanks for your attention and comments, I will be updating an annnotating the examples so you can pehaps play better on your own.
If you want to start there are some free bits on Dashing - https://www.dashingd3js.com
Also the online version of the Scott Murray book. http://chimera.labs.oreilly.com/books/1230000000345/index.html
This is all based on v3 of the d3 library, as are quite a few web examples. I suggest you try and only learn v4 is at all possible. There are quite a few differences which mean you need the correct version of the javascript library to execute the code.
If you want to see examples by Mike Bostock who is the key guy behind it then go to - https://bl.ocks.org/mbostock
Refresher on HTML color names - http://htmlcolorcodes.com/color-names/
(see I spelled it just so you would understand)