CSS

Cascading Stylesheets (CSS) have been with us since 1996, making them one of the oldest staples of the Web, even though they only reached widespread popularity with the tables versus CSS wars of the early 2000s.

You're probably familiar with using CSS for styling HTML. So, this section will be a refreshing breeze after all that weird-looking SVG stuff.

My favorite thing about CSS is its simplicity; consider the following code:

selector { 
  attribute: value; 
}

That describes CSS better than I can--you use selectors to modify properties using values. Although there's a bit more to it, particularly in terms of how properties cascade down the DOM tree, the above is pretty much it.

We've been using selectors all this time. A selector is any string that describes one or more elements in a DOM tree.

Although you can get fancy with selectors, there's been a lot written about how to intelligently name classes recently so that most CSS is just simply just declarative. One such approach is BEM, standing for Block Element Modifier, wherein you write classes in the .block__element-modifier format, so that they tend to look like .some-module__submit-button--large. This modular approach reduces CSS conflicts and having to dig through the Developer Tools Element pane trying to figure out why something is styled a particular way. For more information, visit http://getbem.com/.

To review:

path: Selects all the <path> element
.axis: Selects all the elements with a class="axis" attribute
.axis line: Selects all the <line> elements that are children of the class="axis" elements
.axis, line: Selects all the class="axis" and <line> elements

D3 selections are a subset of CSS selectors; so, any selection you can make with d3.selectAll , you can specify using CSS.

We can invoke CSS with D3 in three ways:

Defining a class attribute with the .attr() method, which can be brittle
Using the .classed() method, the preferred way to define classes
Defining styling directly with the .style() method

Let's throw readability to the wind for a second and make our axes totally trippy.

Go into index.css and add the following at the end:

.trippy { 
  animation: wheee 3s infinite; 
  fill: green !important; 
} 

@keyframes wheee { 
  0%   {stroke: red;} 
  25%  {stroke: yellow;} 
  50%  {stroke: blue;} 
  75%  {stroke: green;} 
  100% {stroke: red;} 
}

We use !important to override the fill color of our axes (which--if you read the last infobox, you'll remember--is defined in the style attribute, meaning that it generally takes precedence over CSS, unless !important is added to the CSS declaration), and then set the stroke (which is not defined anywhere yet) to a series of colors that cycles every three seconds on an infinity loop. This animation is defined using keyframes that indicate the various stages of the animation. I assure you, this shall not be the last time we get .trippy in this book!

Now, ensure that the following line is in lib/main.js to load the CSS into your HTML file; you can also use the <link> tags in your HTML, but again, that's boring:

import '../styles/index.css';

Now, we amend the drawing loop from earlier to look as follows:

  axes.forEach((axis, i) => 
    chart.container.append('g') 
        .data(d3.range(0, amount)) 
        .classed('trippy', i % 2) 
        .attr('transform', &grave;translate(0,${(i * 50) + chart.margin.top})&grave;) 
        .call(axis) 
  );

We'll have none of that foolishness with specifying the same values five times in a row. Using the .classed() function, we add the .trippy class to every second axis. .classed() adds the specified class if the second argument is true or missing, and removes it otherwise. All the numbers on the second and fourth axes now change color, and it's amazing and totally life reaffirming.

I hope that you're getting excited, because we're finally through this terribly boring review chapter, and we'll soon move on to all kinds of supreme awesomeness! We'll be talking more about animation in Chapter 5, Defining the User Experience - Animation and Interaction.

Table of Contents for CSS

Create new playlist

Sign In

Sign Up

Table of Contents for
CSS