Search⌘ K
Home
Courses
Master D3.js for Data Visualization

Tweaking the Bars and Labels

Explore how to modify bar colors to reflect data changes and animate labels effectively in D3.js. This lesson helps you synchronize transitions for bars and labels, improving the clarity and dynamism of your interactive visualizations.

We'll cover the following...

We are going to change the colors of the bars before playing the animation. Colors can be a great way of helping the reader understand if a shape is being added or removed. Currently, the bars will always remain the same color regardless of what happens. The second thing we will do is animate the labels properly. They are experiencing the same issue we had with the bars.

Transitioning colors

Let’s start with the color of the bars. We are going to update the functions we passed into the join() function. We will chain some attr() functions to change the fill.

Javascript (babel-node)
ctr.selectAll('rect')
  .data(newDataset)
  .join(
    (enter) => enter.append('rect')
      .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
      .attr("height", 0)
      .attr('x', d => xScale(d.x0))
      .attr("y", dimensions.ctrHeight)
      .attr('fill', '#b8de6f'),
    (update) => update,
    (exit) => exit.attr('fill', '#f39233')
      .transition(exitTransition)
      .attr('y', dimensions.ctrHeight)
      .attr('height', 0)
      .remove()
  )
  .transition(updateTransition)
  .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
  .attr("height", d => dimensions.ctrHeight - yScale(yAccessor(d)))
  .attr('x', d => xScale(d.x0))
  .attr("y", d => yScale(yAccessor(d)))
  .attr('fill', '#01c5c4')

We will start with the first function. At the end of the chain, we are modifying the fill. The color is the following: #b8de6f

This hex code will give us the color green. Green is a color associated with the activity of ...