2018-08-31-transform.md

Create new project

Create a new project called, "wind" with separate files for

1. html
2. css
3. js

link the html file to your css and js files, similar to the previous lesson.

append "svg" to body

Use d3.select to select the body and then append svg. Add attributes for width and height.

append text to svg

Use the convention `svg.append("text") to add text to the svg viewport

Your code should look like this:

svg.append("text")
  .text("Hello")
  .attr("dx", "100")
  .attr("dy", "100")

add styling

Put the styles in your wind.css file

In your HTML file, you need to link to the css file.

    <link rel="stylesheet" href="css/wind.css">

Use Google Fonts to add the fonts.

Example of link to fonts in HTML. You can find the <link> string on Google Fonts.

    <link href="https://fonts.googleapis.com/css?family=Cabin|Inconsolata|Nunito|Nunito+Sans|Pacifico|Quicksand|Rubik|VT323" rel="stylesheet"> 

Example of css

    font-family: 'Pacifico', cursive;

Practice Rotation

Add Data

var dataset = [
    "No", "one", "can", "tell", "me,",
       "Nobody", "knows,",
       "Where", "the", "wind", "comes", "from,",
      "Where", "the", "wind", "goes."];

Note on Simple Data

• The data is a simple array
• To change position, angle, size, color, we are using the index value of each element
• a normal data set would use the number value of each element

Bind Data to Text

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")

Rotate in Function

    .attr("transform", function(d, i){
        var angle = i * 30
        return   "rotate(" + angle + ", 200, 200)";

Use words from dataset

.text(function(d){
   return d;
})