Search⌘ K
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization

Adding a Bit More to Our Difference Chart

Explore how to enhance your D3 difference chart by adding a y-axis label, chart title, and an informative legend with color coding and links. Understand how these elements improve visualization clarity and user interaction.

We'll cover the following...

Add a y-axis label

Because it’s not immediately obvious what we’re looking at on the y-axis, we should add in a nice subtle label on it:

JavaScript (JSX)
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .style("fill", "black")
        .text("Daily Downloads from Leanpub");

Add a title

Every graph should have a title. The following code adds this to the top(ish) center of ...