Myfanwy/Presentation by Karen Ng July 20 2016

## Presentation by Karen Ng July 20 2016
Karen's D3 Example:

http://karenyng.github.io/HW4_Stat250_W14/
It's from a template: http://square.github.io/crossfilter/ (you can fork the repo from the link on the page).

Part 1: How to host a visualization on github

For people to be able to see your visualization, you have to actually host it on a server somewhere.  The free, easy way is on GitHub.

1. For any visualization you want to host, first create a github repository for it.  This will be the master branch.
2. Create your visualization.  Typically, it will consist of at least 3 files, maybe more if you have a .css stylesheet associated.
 - the markdown file or the raw html file (the html file must be called "index.html" and reside in the root directory of the repo)
 - the .js file that includes the actual D3 code
 - the data file (format it takes will depend on the type of visualzation you want to do)
 - the .css file (optional; can also put style specifications between <style> tags in the html file.
3. Create a gh-pages branch of your repository.
 - The form the url for your page will take is as follows (github will do this for you automatically, but you do have to have a .github.io site set up already for all of this to work):
      - GITHUBUSERNAME.github.io/REPOSITORYNAME


data: you have to make a copy of your file available to the .html file.  The format your data take may depend on the type of D3 visualization you choose - for example, to use the d3 crossfilter code, Karen's data had to be in a .csv file format.

Summary: look for a good example on the web, find its github repository and fork it!  Then play.


Part II: Working with D3 in more familiar environments:


In R

 - RBokeh: http://hafen.github.io/rbokeh/ in development; not as complete as Bokeh for Python.
 - There are different frameworks for converting markdown to HTML.  Karen uses the Pelican library.
 - Rmarkdown and D3: http://vis.supstat.com/2012/11/contour-plots-with-d3-and-r/

In Python

 - Pelican for converting markdown files to html, or you can just embed the D3.js dependency in the code.


 Karen's blog: http://karenyyng.github.io/

 Thanks so much to Karen for giving such a great presentation on such short notice!
	Karen's D3 Example:

	http://karenyng.github.io/HW4_Stat250_W14/
	It's from a template: http://square.github.io/crossfilter/ (you can fork the repo from the link on the page).

	Part 1: How to host a visualization on github

	For people to be able to see your visualization, you have to actually host it on a server somewhere. The free, easy way is on GitHub.

	1. For any visualization you want to host, first create a github repository for it. This will be the master branch.
	2. Create your visualization. Typically, it will consist of at least 3 files, maybe more if you have a .css stylesheet associated.
	- the markdown file or the raw html file (the html file must be called "index.html" and reside in the root directory of the repo)
	- the .js file that includes the actual D3 code
	- the data file (format it takes will depend on the type of visualzation you want to do)
	- the .css file (optional; can also put style specifications between <style> tags in the html file.
	3. Create a gh-pages branch of your repository.
	- The form the url for your page will take is as follows (github will do this for you automatically, but you do have to have a .github.io site set up already for all of this to work):
	- GITHUBUSERNAME.github.io/REPOSITORYNAME


	data: you have to make a copy of your file available to the .html file. The format your data take may depend on the type of D3 visualization you choose - for example, to use the d3 crossfilter code, Karen's data had to be in a .csv file format.

	Summary: look for a good example on the web, find its github repository and fork it! Then play.


	Part II: Working with D3 in more familiar environments:


	In R

	- RBokeh: http://hafen.github.io/rbokeh/ in development; not as complete as Bokeh for Python.
	- There are different frameworks for converting markdown to HTML. Karen uses the Pelican library.
	- Rmarkdown and D3: http://vis.supstat.com/2012/11/contour-plots-with-d3-and-r/

	In Python

	- Pelican for converting markdown files to html, or you can just embed the D3.js dependency in the code.



	Karen's blog: http://karenyyng.github.io/

	Thanks so much to Karen for giving such a great presentation on such short notice!