Chart axis styles

2018-09-10.md

X and Y Axis Creation

Future Dataset Discussion

https://data.world/datanerd/cat-vs-dog-popularity-in-u-s/discuss/cat-vs-dog-popularity-in-u-s/4194

Create Y Axis

1. copy code and style from the x axis
2. x attribute is -40 (left of the "0" x axis)
3. y attribute is height/2 (vertical middle of y axis)
4. rotation is -90
5. point of rotation is -40, height/2

Example code available at bottom of tutorial

Create Chart Title at the Top

1. append group
2. append class for chartTitle
3. append text
4. anchor text in the middle
5. set x attribute to the middle
6. y attribute is negative value (above top of graphing area, in margin)

Example for JavaScript, HTML, and CSS files available at bottom.

Adjust Styles

Use Google Fonts

Choose any font.

---

Example Y Axis Label

svg.append("g")
    .attr("class", "yTitle")
    .append("text")
        .text("Number of Dogs")
        .attr("text-anchor", "middle")
        .attr("x", -40)
        .attr("y", height/2)
        .attr("transform", "rotate(-90, -40," + height/2 + ")");

---

Example Chart Title Elements

in JavaScript

   svg.append("g")
      .attr("class", "chartTitle")
      .append("text")
          .text("Alaskan Dog Sled Expeditions")
          .attr("text-anchor", "middle")
          .attr("x", width/2)
          .attr("y", -50);

In HTML

<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch|Finger+Paint|Flavors|Hanalei+Fill" rel="stylesheet"> 

In css

  .xTitle {
      font-size: 30;
      /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif */
      font-family: 'Cabin Sketch', cursive;
  }

  .yTitle {
      font-size: 30;
      font-family: 'Cabin Sketch', cursive;
  }

  .chartTitle {
      font-size: 50;
      font-family: 'Flavors', cursive;
  }

dog-cat.png