Creating Bubble Chart with D3.js

Utilizing bubble chart for knowledge visualization explains the info simply and analyzes it with a number of inputs in a straightforward manner. On this information, we’ll first create a bubble chart in D3.js after which colour the bubbles within the chart for every class that’s current within the knowledge. Then, we’ll present an instance that makes use of the tooltip to show the class on mouseover on the bubble within the chart. Let’s see what the bubble chart is.

Introducing Bubble Chart

D3.js (stands for Information-Pushed Paperwork) is obtainable and free which is an open-source JavaScript library for 3D interactive knowledge visualizations with Scalable Vector Graphics (SVG). In a two-dimensional plot, bubble chart shows a number of circles (often called bubbles). It’s a generalization to the scatterplot which locations the bubbles on the plot as an alternative of dots within the scatterplot.

To assemble a bubble chart, three variables are necessary. One variable specifies the x-axis, one other variable specifies the y-axis, and the final variable exhibits the scale of the bubble.

Constructing a Fundamental Bubble Chart

Let’s construct a fundamental bubble chart by following the given steps. We think about the city_data with 4 entries – “total_shops”, “total_companies”, “metropolis”, and “total_lakes”. Solely “metropolis” is the specific variable and the remaining all are numeric values. Within the first instance, we embrace all three numeric variables.

Step 1: Set the Margins, Dimensions, and Radius for the Bubble Chart

Step one is to arrange the margins and dimensions to the bubble chart which goes to be created.

1. Create a dictionary that holds 4 entries – high, proper, backside, and left. These variables are used with bubble chart’s width and top. The width and top of the bubble chart are computed from the earlier dictionary. The calculation is proven within the following with the instance:

Instance:

Step 2: Append the SVG (Scalable Vector Graphics) Object

On this step, we have to append the SVG by creating the “div” container after which choose the container to inject the SVG.

Create a div (with the next syntax) container within the physique of the HTML template by passing the ID.

<div id=“svgContainer”></div>

Instance:

Step 3: Outline the Information

Subsequent, now we have to declare the info for the bubble chart. Let’s create an array of 10 “merchandise” objects with 4 key-value pairs.

Instance:

Step 4: Set Up the Scales (xScale, yScale, zScale)

1. Use the scaleLinear() operate to assemble a brand new linear scale for the x-axis with the area and the vary offered to it.

  1. It takes the input_data as a site. Let’s set the [0,100] area.
  2. The [0, width] vary is the output.
  3. Name the axisBottom() operate to position the axis backside of the road. Principally, it constructs a brand new bottom-oriented axis generator for the xScale.

Instance:

1. Use the scaleLinear() operate to assemble a brand new linear scale for the y-axis with the area and the vary offered to it.

  1. It takes the input_data as a site. Let it’s [0, 2000].
  2. The [height, 0] vary is the output.
  3. Name the axisLeft() operate to position the axis on the left of the road. Principally, it constructs a brand new left-oriented axis generator for the yScale.

Instance:

1. Use the scaleLinear() operate to assemble a brand new linear scale to specify the scale of the bubble with the area and the vary offered to it.

  1. It takes the input_data as a site. Let it’s [0, 100].
  2. The [1, 40] vary is the output (dimension of the bubbles).

Instance:

Step 5: Add Circles

1. Get the info utilizing the info() operate.
2. Append the circle to the SVG.

  1. cx – The place of the circle that takes the “x” place refers back to the numeric ingredient.
  2. cy – The place of the circle that takes the “y” place refers back to the numeric ingredient.
  3. r – It specifies the circle radius that takes the “z” place (Bubbles) which refers back to the numeric ingredient.

Instance:

Full Instance:

Create the bubble chart by combining all of the examples which are mentioned within the earlier steps.

<html>

<head>

<script src=“https://d3js.org/d3.v4.js”></script>

</head>

<physique>

<div id=“place”></div>

<script>

// Set the Margins and Dimensions for the Bubble Chart.
var margin_for_the_bubble_chart = {high: 20, proper: 40, backside: 60, left: 50},

 

width = 600 – margin_for_the_bubble_chart.left – margin_for_the_bubble_chart.proper,

top = 400 – margin_for_the_bubble_chart.high – margin_for_the_bubble_chart.backside;

var svg = d3.choose(“#place”)
      .append(“svg”)
      .attr(“width”, width + margin_for_the_bubble_chart.left + margin_for_the_bubble_chart.proper)
      .attr(“top”, top + margin_for_the_bubble_chart.high + margin_for_the_bubble_chart.backside)
      .append(“g”)
      .attr(“rework”,”translate(” + margin_for_the_bubble_chart.left + “,” + margin_for_the_bubble_chart.high + “)”);
 
// Enter Information – city_data
city_data = [
  {total_shops : 100,total_companies: 10, city:”Austin”,total_lakes:10},
  {total_shops : 200,total_companies: 30,city:”California”,total_lakes:20},
  {total_shops : 250,total_companies: 25,city:”Florida”,total_lakes:12},
  {total_shops : 120,total_companies: 30,city:”Austin”,total_lakes:4},
  {total_shops : 500,total_companies: 10,city:”California”,total_lakes:5},
  {total_shops : 500,total_companies: 50,city:”Florida”,total_lakes:6},
  {total_shops : 900,total_companies: 40,city:”Florida”,total_lakes:10},
  {total_shops : 500,total_companies: 50,city:”Austin”,total_lakes:20},
  {total_shops : 900,total_companies: 20,city:”California”,total_lakes:10},
  {total_shops : 1500,total_companies: 100,city:”Florida”,total_lakes:80}
]

// Specify the x-axis
var xScale = d3.scaleLinear()
    .area([0,100])
    .vary([ 0, width ]);
  svg.append(“g”)
    .attr(“rework”, “translate(0,” + top + “)”)
    .name(d3.axisBottom(xScale));

// Specify the y-axis
  var yScale = d3.scaleLinear()
    .area([0,2000])
    .vary([ height, 0]);
  svg.append(“g”)
    .name(d3.axisLeft(yScale));

// Specify the dimensions for the bubble dimension
  var zScale = d3.scaleLinear().area([0,100]).vary([1, 40]);
   
    // Add dots
  svg.append(‘g’)
    .selectAll(“something”)
    .knowledge(city_data)
    .enter()
    .append(“circle”)
      .attr(“cx”, operate (d) { return xScale(d.total_companies); } )
      .attr(“cy”, operate (d) { return yScale(d.total_shops); } )
      .attr(“r”, operate (d) { return zScale(d.total_lakes); } )
      .type(“fill”, “pink”)
      .attr(“stroke”, “black”)
 

</script>

</physique>

</html>

Output:

Coloured Bubble Chart

If you wish to categorize the bubbles based mostly on classes with totally different colours, use the colour scale. The scaleOrdinal() operate is used to create the colour scale.

Syntax:

The area enter is the distinctive classes which are current within the enter knowledge and the output is the vary of colours (vary output).

color_scale = d3.scaleOrdinal() .area([categories…]) .vary([“colors…);

Also, this categorical variable is mapped to the style() function with the “fill” attribute.

.style(“fill”, function (d) { return color_scale(d.categorical_variable); } )

Example:

Utilize the previous example and add the color scale. There are three unique categories that are present in the city_data input: “Austin”, “California”, and “Florida”. Specify these in the domain() and give the colors to the “#FFC0CB”, “#90EE90”, and “#87CEEB” range.

  1. The data with “Austin” – #FFC0CB is the bubble color.
  2. The data with “California” – #90EE90 is the bubble color.
  3. The data with “Florida” – #87CEEB is the bubble color.
html>

<head>

<script src=“https://d3js.org/d3.v4.js”></script>

</head>

<body>

<div id=“place”></div>

<script>

// Set the Margins and Dimensions for the Bubble Chart.
var margin_for_the_bubble_chart = {top: 20, right: 40, bottom: 60, left: 50},
 
width = 600 – margin_for_the_bubble_chart.left – margin_for_the_bubble_chart.right,

height = 400 – margin_for_the_bubble_chart.top – margin_for_the_bubble_chart.bottom;

var svg = d3.select(“#place”)
     .append(“svg”)
     .attr(“width”, width + margin_for_the_bubble_chart.left + margin_for_the_bubble_chart.right)
     .attr(“height”, height + margin_for_the_bubble_chart.top + margin_for_the_bubble_chart.bottom)
     .append(“g”)
     .attr(“transform”,“translate(“ + margin_for_the_bubble_chart.left + “,” + margin_for_the_bubble_chart.top + “)”);
 
// Input Data – city_data
city_data = [
     {total_shops : 100,total_companies: 10, city:“Austin”,total_lakes:10},
     {total_shops : 200,total_companies: 30,city:“California”,total_lakes:20},
     {total_shops : 250,total_companies: 25,city:“Florida”,total_lakes:12},
     {total_shops : 120,total_companies: 30,city:“Austin”,total_lakes:4},
     {total_shops : 500,total_companies: 10,city:“California”,total_lakes:5},
     {total_shops : 500,total_companies: 50,city:“Florida”,total_lakes:6},
     {total_shops : 900,total_companies: 40,city:“Florida”,total_lakes:10},
     {total_shops : 500,total_companies: 50,city:“Austin”,total_lakes:20},
     {total_shops : 900,total_companies: 20,city:“California”,total_lakes:10},
     {total_shops : 1500,total_companies: 100,city:“Florida”,total_lakes:80}
]

// Specify the x-axis
var xScale = d3.scaleLinear().area([0,100]).vary([ 0, width ]);
  svg.append(“g”)
    .attr(“rework”, “translate(0,” + top + “)”)
    .name(d3.axisBottom(xScale));

// Specify the x-axis
  var yScale = d3.scaleLinear().area([0,2000]).vary([ height, 0]);
  svg.append(“g”)
    .name(d3.axisLeft(yScale));

// Specify the dimensions for the bubble dimension
  var zScale = d3.scaleLinear().area([0,100]).vary([1, 40]);
   
    // Add a scale for bubble colour
  var color_scale = d3.scaleOrdinal()
    .area([“Austin”, “California”, “Florida”])
    .vary([“#FFC0CB”,“#90EE90”,“#87CEEB”]);
   
    // Add dots
  svg.append(‘g’)
    .selectAll(“dot”)
    .knowledge(city_data)
    .enter()
    .append(“circle”)
      .attr(“cx”, operate (d) { return xScale(d.total_companies); } )
      .attr(“cy”, operate (d) { return yScale(d.total_shops); } )
      .attr(“r”, operate (d) { return zScale(d.total_lakes); } )
      .type(“fill”, operate (d) { return color_scale(d.metropolis); } )
      .attr(“stroke”, “black”)
     
</script>

</physique>

</html>

Output:

Including Tooltip to the Bubble Chart

Let’s implement the tooltip performance that shows the identify of town with mouseover on a particular bubble.

Create a tooltip and append the “div” tag to it.

Write a operate that shows the created tooltip. Use tooltip.html() to carry town identify.

Name the earlier operate on mouseover by specifying it within the following snippet utilizing the on() operate. The “mouseover” needs to be specified:

Full Instance:

Make the most of the primary instance and add the earlier tooltip.

html>

<head>

<script src=“https://d3js.org/d3.v4.js”></script>

</head>

<physique>

<div id=“place”></div>

<script>

// Set the Margins and Dimensions for the Bubble Chart.
 var margin_for_the_bubble_chart = {high: 20, proper: 40, backside: 60, left: 50},
   
 width = 600 – margin_for_the_bubble_chart.left – margin_for_the_bubble_chart.proper,
 top = 400 – margin_for_the_bubble_chart.high – margin_for_the_bubble_chart.backside;

var svg = d3.choose(“#place”)
                .append(“svg”)
                .attr(“width”, width + margin_for_the_bubble_chart.left +                                                    margin_for_the_bubble_chart.proper)
                .attr(“top”, top + margin_for_the_bubble_chart.high +                                                   margin_for_the_bubble_chart.backside)
                .append(“g”)
                .attr(“rework”,“translate(“ + margin_for_the_bubble_chart.left +                                     “,” + margin_for_the_bubble_chart.high + “)”);
             

// Enter Information – city_data
city_data = [
  {total_shops : 100,total_companies: 10, city:“Austin”,total_lakes:10},
  {total_shops : 200,total_companies: 30,city:“California”,total_lakes:20},
  {total_shops : 250,total_companies: 25,city:“Florida”,total_lakes:12},
  {total_shops : 120,total_companies: 30,city:“Austin”,total_lakes:4},
  {total_shops : 500,total_companies: 10,city:“California”,total_lakes:5},
  {total_shops : 500,total_companies: 50,city:“Florida”,total_lakes:6},
  {total_shops : 900,total_companies: 40,city:“Florida”,total_lakes:10},
  {total_shops : 500,total_companies: 50,city:“Austin”,total_lakes:20},
  {total_shops : 900,total_companies: 20,city:“California”,total_lakes:10},
  {total_shops : 1500,total_companies: 100,city:“Florida”,total_lakes:80}
]

// Specify the x-axis
var xScale = d3.scaleLinear().area([0,100]).vary([ 0, width ]);
  svg.append(“g”)
    .attr(“rework”, “translate(0,” + top + “)”)
    .name(d3.axisBottom(xScale));

// Specify the x-axis
  var yScale = d3.scaleLinear().area([0,2000]).vary([ height, 0]);
  svg.append(“g”)
    .name(d3.axisLeft(yScale));

// Specify the dimensions for the bubble dimension
  var zScale = d3.scaleLinear().area([0,100]).vary([1, 40]);
   
   
    // Create a tooltip div
  var tooltip = d3.choose(“#place”).append(“div”)

  // Operate to view the Tooltip
  var displayTooltip = operate(d) {
    tooltip.html(“CITY: “ + d.metropolis)
  }
 
    // Add dots
  svg.append(‘g’)
    .selectAll(“dot”)
    .knowledge(city_data)
    .enter()
    .append(“circle”)
      .attr(“cx”, operate (d) { return xScale(d.total_companies); } )
      .attr(“cy”, operate (d) { return yScale(d.total_shops); } )
      .attr(“r”, operate (d) { return zScale(d.total_lakes); } )
      .attr(“stroke”, “black”)
      .type(“fill”, “pink”)
      // Name the displayTooltip operate on mouseover
      .on(“mouseover”, displayTooltip)

</script>

</physique>

</html>

Output:

Conclusion

On this information, first we mentioned in regards to the bubble chart. Then, we mentioned learn how to construct a fundamental bubble chart in D3.js by offering the easy steps. The code snippets are given at every step and an entire code can also be offered after explaining all of the steps. We specified the colour scale utilizing the scaleOrdinal() operate to paint the bubbles for every class with a special colour. Then, we discovered learn how to add a tooltip that shows the class on mouseover.

Info: This submit is rewritten with inspiration from the unique URL. Please click on on the supply hyperlink to learn the unique submit

Supply Hyperlink : https://linuxhint.com/creating-bubble-chart-d3-js/

Related Articles

Back to top button
close