As I continue on my journey to learn more about programming, I decided to keep samples of code on my website. The first such example is here.
Overall I am happy with how the sample page looks but getting it there is a bit of a mess.
Obviously this is a bit of double handling as every time I change the D3 function I have to re-copy its text into the Index.html page.
I managed to get jQuery to read the D3 function and insert it into the index.html page fine but, when I did that, I couldn't get Syntax Highlighter to format it. Tried all sorts of arrangements like:
- only running the jQuery script on load and then calling Syntax Highlighter;
- having a button to run the jQuery script and another button to run Syntax Highlighter
- calling Syntax Highlighter in the header and then running the jQuery script on page load
- etc, etc, etc.
Didn't matter what, I could always get the jQuery script to add the function to the page but could never get it formatted.
I guess I need to read the Syntax Highlighter source and figure out how to invoke it.
As an alternative, I spent a couple of hours looking at one of Mike Bostock's example pages and how he develops them. I think I like his method, which I'll summarise in a minute, but there are a whole other set of things I need to learn in order to implement that.
Essentially what Mike does is include a description of his example (README.md), any data files for the example (graph.json) and the source for the example (index.html) on a github gist page (see example here). On his example page he then has a gist object file, a bunch of d3 scripts and then uses Showdown and highlight.js to pull the text files from his gist and format them on his page. Quite neat and tidy.
For now, i'll add samples the good old colster way, at least until I understand what is going on better.