Lollipop Chart in D3.js

Lollipop Chart

A lollipop chart is used to summarize a set of categorical data. It is a similar kind of Barplot but instead of bars, it takes a line and a circle on top of each line.

1. In the horizontal lollipop chart, the x-axis holds the discrete values and the y-axis holds the categorical data.
2. In the vertical lollipop chart, the x-axis holds the categorical data and the y-axis holds the discrete values.

1. Building a Basic Lollipop Chart (Vertical)

Let’s build a basic lollipop chart by following the given steps. Each step syntax is provided with an example. Mostly, each step includes selecting SVG, passing the attributes to the functions that we use at each step.

Place this script inside your head tag in the HTML template.

Step 1: Set the Margins and Dimensions for the Lollipop Chart

The first step is to set up the margins and dimensions to the lollipop chart which is going to be created.

• Create a variable of dictionary type that holds four entries. Let them be
  {top: value, right: value, bottom: value, left: value}.
• Create the width and height using the previous keys from the dictionary.
• width = value – dictionary.left – dictionary.right,
• height = value – dictionary.top – dictionary.bottom;

Step 2: Define the Data

Next, we have to declare the data for the lollipop chart. Basically for a lollipop chart, we can pass the data from the CSV for an array of dictionaries.

Step 3: Setup the Scales (xScale & yScale)

Use the scaleBand() function to construct a band scale for the x-axis.

1. It takes the input_data as a domain. We can use the “map” function to choose a specific key for the x-axis.
2. The range is the output. Make sure that it should be the width of the svgContainer.
3. Padding can be provided in between two lollipops by passing the padding property.
4. Call the axisBottom() function to place the axis bottom of the line. It takes the “x” point as a parameter.
5. Here, we place the categorical elements. To display them, specify the text using the selectAll(“text”) function.

Use the scaleLinear() function to represent the discrete numeric data.

1. The height must be equal to the svgContainer. Pass the height to the range().
2. Call the axisLeft() function to place the axis on the left of the line. It takes the “y” point as a parameter.

Step 4: Add the Lines and Circles

The final and most important step is to add the lines and circles to the axes.

Lines:

1. Get the data using the data() function.
2. Append the line to the SVG.
3. Designate the position of two points on a web page:
   1. x1 – The position of the first end of the line.
      .attr(“x1”, function(d) { return xScale(d.Category); })
   2. x2 – The position of the second end of the line.
      .attr(“x1”, function(d) { return xScale(d.Category); })
   3. y1 – The position of the first end of the line.
      .attr(“y1”, function(d) { return yScale(d.Numeric); })
   4. y2 – The position of the second end of the line attributes are used.
      .attr(“y2”, yScale(0))
4. Use attr(“stroke”,”color”) to fill the color to the line.
5. It is optional to set the stroke width to the lines. Use attr(“stroke-width”, value) to set the stroke.

Circles:

1. Get the data using the data() function.
2. Append the circle to the SVG.
3. Circle Positions:
   1. cx – The position of the circle that takes the “x” position refers to the categorical element.
   2. cy – The position of the circle that takes the “y” position refers to the numeric element.
   3. r – It specifies the circle radius.

Example:

Create a lollipop chart related to the subject followers. The Subject_followers data (array of 10 dictionaries) that we are considering holds two keys in each dictionary – subject and count.

The points are:

Output:

2. Building the Basic Lollipop Chart (Horizontal)

We can follow the same steps to build the horizontal lollipop chart but the functions and attributes vary in the scales.

1. xScale

The xScale takes the scaleLinear() function and the domain holds the discrete data.

Example:

2. yScale

The yScale takes the scaleband() function and the categorical data is passed to the domain(). Also, the range() takes (0, height) instead of (height, 0).

3. Adding Lines and Circles

Go through the changes in the following snippet:

Example:

Use the same data and generate a horizontal lollipop chart.

Output:

3. Building a Lollipop Chart by Ordering Groups

If you want to order the groups in lollipop chart, use the sort() function. Look at the following snippets that sorts the groups in ascending and descending order such that the lollipops in the graph are displayed based on the sorted order. Pass the function with two parameters to the sort() function. It returns the data in the ascending order by comparing two values at a time.

Ascending Order:

Descending Order:

Example:

Use the same script that is created in Example 1. Order the data based on the count key in ascending order.

Output:

Conclusion

First, we provided the steps for creating a basic lollipop chart in D3.js with proper functions and syntax. Then, we used the same data for plotting the horizontal lollipop chart. Use the d3.sort() function to sort the lollipops based on groups.