Master D3.js for Data Visualization/

...

/

Tweaking the Bars and Labels

Tweaking the Bars and Labels

Transitions can be enhanced by adding color to help the reader understand what is being added or removed.

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.

Press + to interact
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 ...