# Blogs and Visualizations

This page collects some resources to help you build your visualization output (blogs or webpages summarizing and demonstrating the key takeaways of your project).

## Some examples

You'll see that you need three main components: A title, some (but not too many) main figures, and some written explanations.

- [Race & Intergenerational Mobility](https://www.nytimes.com/interactive/2018/03/19/upshot/race-class-white-and-black-men.html)
- [COVID-19 Projections Using Machine Learning](https://covid19-projections.com)
- [State and National Poll Aggregation](https://pkremp.github.io/report.html)
- [The Universe of Miles Davis](https://pudding.cool/2017/03/miles/index.html)

In general, the figures should be self-explanatory. A random reader of your website should be able to get the main point of your project, and they will learn more by reading the text.

You can also decide whether you would like your visualizations to be static or interactive. Static visualizations are easier to embed in your blog, while interactive ones are a bit more fun and engaging to the readers (but don't overuse them since you risk confusing the reader if it's too complicated).

## Build your own website / blog

There are several ways you can build and host your own website / blog for free. One easy and popular way nowadays is via Github Pages. You can simply follow the few steps in [this guide](https://pages.github.com) to create your own github pages.

## Static visualizations

In principle, if you already saved your plots in static formats (svg, png, jpg, etc), you can add them to your github pages repo, edit the htmls of your github pages (ex. `index.html`), and push the repo to Github. The figure will them show up in `http://username.github.io/repository`.

There are also some simpler ways to deploy your visualizations.

If you mainly work with Jupyter Notebook, you can:
- Create a notebook specifically for visualization
- Make the plots, add the texts explaining the project
- Convert the notebook into html in the command line (use `--no-input` to hide the code cells)

- Copy the resulting `NOTEBOOK-NAME.html` to your visualization Github pages repo. Rename it to `index.html`. Push it to Github then your rendered notebook will show up on `http://username.github.io/repository`.

If you work with Rmarkdown notebooks, you can:
- Create a notebook specifically for visualization
- Make the plots, add the texts explaining the project
- [Convert the notebook into html](https://bookdown.org/yihui/rmarkdown/html-document.html)
- Copy the resulting html to your visualization Github pages repo. Rename it to `index.html`. Push it to Github then your rendered notebook will show up on `http://username.github.io/repository`.
- Alternatively, you can also create your whole blog / website / Github pages in R using the [blogdown](https://bookdown.org/yihui/blogdown/github-pages.html) package and generate everything within R.


## Interactive Visualizations

You will need some additional libraries in Python or R to generate interactive plots. 

### Python / Jupyter Notebook
- [Plotly](https://plotly.com/python/): Most popular and easy to use, but a bit clumsy
- [mpld3](https://mpld3.github.io/): Based on D3.js and matplotlib
- [Altair](https://altair-viz.github.io/): Based on Vega-Lite
- [Bokeh](https://docs.bokeh.org/en/latest/index.html): Extensive plotting capabilities, explore their example gallery

In general, interactive visualizations won't work completely on your (static) Github pages. Some packages would provide ways that you can embed `iframe` in your Github pages (for example, see this guide for [Plotly](https://towardsdatascience.com/how-to-create-a-plotly-visualization-and-embed-it-on-websites-517c1a78568b)) so that you can see your interactive visualizations on your website.


### R / Rmarkdown
- [htmlwidgets](http://www.htmlwidgets.org/showcase_plotly.html): R functions that return JavaScript visualizations (ex. Plotly)
- [Shiny](https://shiny.rstudio.com/tutorial/): Builds interactive web apps powered by R

If you work in R, this [online book](https://plotly-r.com/saving.html) will be useful for publishing interactive plots.


### D3.js

If you would like to take full control of your interactive visualization, one popular way is to write it in d3.js.
There's recently some free services devoted to creating collaborative notebooks specifically for d3.js visualizations: [Observable](https://observablehq.com/demo). See this [example](https://observablehq.com/@neocartocnrs/49394-deaths-in-migration-in-europes-neighbourhood-1993-20?collection=@neocartocnrs/migrations).

After creating your notebook in Observable, you can also embed them into your Github pages. See this [demo](https://vakila.github.io/observable-demo/embeds.html) and this [guide](https://observablehq.com/@observablehq/introduction-to-embedding).