index.Rmd

--- 
title: "D3 for R Users"
author: "Joyce Robbins"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
always_allow_html: yes
documentclass: book
classoption: openany 
bibliography: [book.bib, packages.bib]
biblio-style: apalike
link-citations: yes
---

```{r include=FALSE}
# automatically create a bib database for R packages
knitr::write_bib(c(
  .packages(), 'bookdown', 'knitr', 'rmarkdown'
), 'packages.bib')

htmltools::tagList(rmarkdown::html_dependency_font_awesome())
```

# Welcome {-}

<style>
rect {
	pointer-events: all;
	}

	.node {
	fill: blue;
	}

	.cursor {
	fill: none;
	stroke: brown;
	pointer-events: none;
	}

	.link {
	stroke: red;
}

.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 20%;  <!-- changed this to be the same as y/x aspect ratio, not explained-->
	vertical-align: top;
	overflow: hidden;
}
.svg-content {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
</style>

<div id="container" class="svg-container">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="scripts/index1.js"></script>
</div>


<div style="text-align: right; font-size: 85%; font-style: italic;"> <!-- text-align needs to be in parent -->
Adapted from <a href="https://bl.ocks.org/mbostock/929623" target="_blank">Build Your Own Graph!</a>
</div>

This guide serves as a companion text to Scott Murray’s [*Interactive Data Visualization for the Web, 2nd edition*](https://www.amazon.com/Interactive-Data-Visualization-Web-Introduction/dp/1491921285/)--a required text for GR5702. Be sure to get the second edition, which is a comprehensive update to D3 version 4. The first edition uses D3 version 3, which is not compatible. (To add to the complication, the current version of D3 is v5.  However, since differences between v4 and v5 are minimal, unless otherwise indicated in this guide, the code in *IDVW2* will work with either.)

We rely on the text heavily but also deviate from it in several ways. *IDVW2* is written for graphics designers not data science students so the pain points are somewhat different. 

In terms of content, we will use certain ES6 conventions not covered in *IDVW2* that make coding easier (and more like R!). We use different examples, though you are strongly encouraged to study [Murray's code examples ](https://github.com/alignedleft/d3-book/releases){target="_blank"} in addition to reading the text. Particularly through the first half, we don't follow the text in order, so always refer to this guide first which will direct you to the pages of the text that you should read.

This is very much a work-in-progress so please [submit issues](https://github.com/jtr13/d3book/issues){target="_blank"} on GitHub to provide feedback and edit or add text by submitting pull requests. (Click the <i class="fas fa-edit"></i> icon at the top of each page to get started. More [detailed instructions](https://edav.info/contribute.html#step-2-click-the-edit-button){target="_blank"} are available on edav.info. If you would just like to view the source code, click the <i class="fa fa-eye"></i> icon.)