d3 sandwich

Circle Packing

Step #1: Create the Circle and Text CSS Styles

In the Abstract State Map, all of the styling of the information on the screen was done through D3. In this step, we will learn another way to do it: using Cascading Style Sheets (CSS).

Let's start by playing with the code. Try tweaking the Cascading Style Sheet (CSS) values and see how it changes the Circle Packing graphic.

	<style>
  body {
	  font-family: sans-serif;
  }
	circle {
	  fill: Purple;
	  fill-opacity: .5;
	  stroke: Gray;
	  stroke-width: 1px;
	}
	text {
		text-anchor: middle;
	}

	.leaf circle {
	  fill: AntiqueWhite;
	  fill-opacity: 1;
	}
  .leaf text {
    font-size: 20px;
  }
	</style>

What Is a Cascading Style Sheet (CSS) and Why Would You Want One?

With the Abstract Map, if we wanted to change a rectangle's style – e.g., mark a selected state with a different color – we used code like this to do it. If you're only setting one style, such as "fill", that approach works well.

    .style("fill", "DarkRed");

But what if you're changing a whole bunch of styles? At that point, it might be easier to take the style changes outside of your code using Cascading Style Sheets (CSS). That way, you can easily tweak the look and feel without having to go into the code. This is particularly useful if you are working with a graphics designer.

There 2 ways you can use CSS:

Create a separate file, give it a name that ends with ".css", and then call it from your HTML page
Create an "in-line" stylesheet, where you put the CSS inside your HTML page.

For this recipe, we used an in-line stylesheet. All we had to do was use the code to the right.

	<style>
  ...
  </style>

How to Read CSS

There is a lot you can learn about using CSS -- just Google "CSS tutorial" and you'll find thousands of articles about it. Luckily, to use it with D3 you don't need to know much. So, here's the minimum you need to know.

Every chunk of CSS starts with what's called a "selector", which tells the browser to add the styles to. It's just like using d3.selectAll("rect"), just skip the d3.select.

For example, here we tell the browser that we want to make 4 style changes to each circle:

fill : Color each circle purple
fill-opacity: Set each circle's opacity/transparency to 0.5 (0 = invisible, 1 = no transparency)
stroke: Make each circle's border to gray
stroke-width: Make each circle's border 1 pixel wide

    circle {
  	  fill: Purple;
  	  fill-opacity: .5;
  	  stroke: Gray;
  	  stroke-width: 1px;
  	}

Similarly, here we tell the browser we want all text to be centered.

  	text {
  		text-anchor: middle;
  	}

CSS Classes

That'll work great if we want all of the circles to be styled the same way. But in this case, we want the circles that contain info about specific produce -- e.g., that 300 apples were purchased -- to be a different color and not to be transparent. How do we do that? By using classes or IDs.

With both SVG and HTML, you can tag an item as belonging either to a particular class or ID. If you want to tag just one item, use ID; if you are taking more than one item, use class. In our case we want to tag a bunch of circles, so we will use a class called "leaf"; in Step 4, we'll show you how we add that class to the right circles.

This code tells the browser how to style circles that belong to the "leaf" class:

.leaf tells the browser to select the "leaf" class. In CSS, we use "." to refer to class and "#" to refer to ID

By putting circle right after ".leaf", we're telling the browser to only select circles that belong to the "leaf" class.

  	.leaf circle {
  	  fill: AntiqueWhite;
  	  fill-opacity: 1;
  	}

We use the same approach to select all text that belongs to the "leaf" class.

font-size: the text size of the font

    .leaf text {
      font-size: 20px;
    }