2018-08-30-lesson.md

Review code sections from previous lesson.

rect

svg.selectAll("rect")

text

svg.selectAll("text")

linear scale

d3.scaleLinear()

append svg

var svg = d3.select("body")
     .append("svg")

practice

Create 3 new files:

1. html
2. javascript
3. css

link the javascript and css files to your html

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

rectangle

Add rectangle with start point of 100, 100 roughly 300 x 100 pixels with a light pastel background.

Text

Create text with starting point of 100, 100

svg.append("text")
    .text("hello")
    .attr("x", "100")
    .attr("y", "100");

Change text style attributes

In the css file, create a class called, "curve".

Example:

.curve {
    font-size: 100px;
    font-family: sans-serif
}

In the Javascript file, attach the class attribute to the text

.attr("class", "curve")

Rotate text

.attr("transform", "rotate(45)")

set point of rotation

.attr("transform", "rotate(45, 100, 100)");

set vertically

simulate y axis label Use negative degree to get upright

Adjust x, y