Day 4: A Little Bit of CSS

Yesterday, we got some black nodes in our force layout. What if we want to color the nodes with the color of their houses? Also, it will be good to have a title to tell a little bit about what it is about. Let’s do this with some CSS.

There are three types of CSS selectors: type, class, and ID. Type is more general and ID is more specific. If you apply a rule to the same element using a type selector and an ID selector, the website will render the rules specified in the ID selector.

Title

We can add the title using the <h1> tag in html file. I want to use a customized font that looks like ancient handwriting, and I found one on Google Fonts. After selecting the font, we can find the information to be embedded on the web on the right.

Below shows how it is used in the CSS file. I also centered the text using text-align.

Color the nodes

Since we want to color nodes based on the house, we can create a class for the nodes. In our dataset, we have “team” as the house name.

const node = svg.selectAll(".node")
        .data(dataset.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("class",d => d.team)
        .attr("r", d => (4-d.group)*7.5)
        .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))

Then we can style each team using some CSS. I realized that it means two class names if there is a space in it. For example, class=”Head Master” means class Head and class Master instead of `Head Master`, so I added an underline in the dataset. To select a class, we add “.” in front of the class. To select an id, we put “#”. More info about CSS selectors can be found on MDN Web Docs.

I put the primary color of a house as the fill and the secondary color as the stroke. Head_Master is not in any house, so it is black with white strokes. If the hex number of a color has a pattern like “#AABBCC”, it can be shortened to “#ABC”. That’s why the fill and stroke for Head_Master only have three digits.

.Head_Master{
	fill:#000;
	stroke: #fff;
	stroke-width: 2px;

}

.Gryffindor{
	fill:#DC143C;
	stroke: #FFD700;
	stroke-width: 2px;
}

Today’s codes are here.