D3.js Shapes Symbols API

November 23, 2023 | by Arround The Web | No comments

In this guide, we will discuss how to create different symbols in D3.js with the d3-shape visualization. Most of the functions available in symbols API will be discussed in this guide with separate examples and all the required attributes will be considered while creating SVG. First, we will look at what D3.js is.

D3.js is an available and free open-source JavaScript library for the 3D interactive data visualizations with Scalable Vector Graphics (SVG). One of the easier ways without any kind of modules/software is using the D3.js link – https://d3js.org/d3.v3.min.js – within the script tag. This can be specified within the HTML template.

D3 Symbols

In D3.js, we use symbols to encode in the Scatterplot. Basically, these are the categorical shapes which represent the specific values. For all the functions in the symbols API, we need to follow some steps to generate them.

Step 1: Generate a symbol. In this step, we need to use a specific function to generate a symbol. It is optional to specify the size and type.

Example:

var symbol_name = d3.symbol()

Step 2: Create the SVG area and specify the symbol that is created in Step 1. You can also set the attributes to the symbol like adding color to it.

Example:

d3.select("#Place_to_display").append("path").attr("d", symbol_name ).attr("transform", "translate(50,50)")

Step 3: This is the important step where we need to specify the selected SVG using the ID attribute.

Example:

Example: Symbol()

We can create a default symbol using the symbol() function. It creates a circle with 64 pixel size and a black color by default. The following are the steps that are to be followed to implement the code:

1. Generate a symbol using d3.symbol() and store it in the default_symbol variable.
2. Use the d3.select(element) function to select the symbol. Here, specify the element name as Place_to_display.
3. Mention the element in the ID attribute. The ID attribute assigns the specified identifier to the <svg> element so that JavaScript can easily access the element.

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>symbol()</h1>

// Generate symbol

var default_symbol = d3.symbol()

d3.select("#Place_to_display").append("path").attr("d", default_symbol).attr("transform", "translate(50,50)")

</script>

</body>

</html>

Output:

Symbol.type(type)

Using the symbol.type() method, a specified symbol is generated. It takes the symbol type as the parameter. The standard seven symbols are:

Syntax:

Let’s look at the syntax of specifying all the types one by one.

Circle – d3.symbol().type(d3.symbolCircle)
Cross – d3.symbol().type(d3.symbolCross)
Diamond – d3.symbol().type(d3.symbolDiamond)
Square – d3.symbol().type(d3.symbolSquare)
Star – d3.symbol().type(d3.symbolStar)
Triangle – d3.symbol().type(d3.symbolTriangle)
Wye – d3.symbol().type(d3.symbolWye)

Example 1:

Let’s generate a circle, square, and diamond one after another.

1. Script for Circle:

2. Script for Square:

3. Script for Diamond:

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>d3.symbol().type(d3.symbolCircle)</h1>

<h1>d3.symbol().type(d3.symbolSquare)</h1>

<h1>d3.symbol().type(d3.symbolDiamond)</h1>

// Generate Circle

var circle_symbol = d3.symbol().type(d3.symbolCircle);

d3.select("#Place_to_display").append("path").attr("d", circle_symbol).attr("transform", "translate(50,50)").attr("fill", "blue")

</script>

// Generate Square

var square_symbol = d3.symbol().type(d3.symbolSquare);

d3.select("#Place_to_display2").append("path").attr("d", square_symbol).attr("transform", "translate(50,50)").attr("fill", "blue")

</script>

// Generate Diamond

var diamond_symbol = d3.symbol().type(d3.symbolDiamond);

d3.select("#Place_to_display3").append("path").attr("d", diamond_symbol).attr("transform", "translate(50,50)").attr("fill", "blue")

</script>

</body>

</html>

Output:

Symbol.size(size)

Until now, we learned how to generate specific symbols. Let’s see how to generate them with specific size using the symbol.size() method. It takes the pixel value as the parameter.

Syntax:

Let’s look at the syntax:

d3.symbol().size(size);

Example:

Let’s generate a star of color blue with 3000 pixels.

Script:

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>d3.symbol().size(size)</h1>

// Generate Star

var star_symbol = d3.symbol().type(d3.symbolStar).size(3000);

d3.select("#Place_to_display").append("path").attr("d", star_symbol).attr("transform", "translate(50,50)").attr("fill", "blue")

</script>

</body>

</html>

Output:

Properties

These are similar to what we learned in the previous examples. We will discuss it again separately with the stroke width attribute. Basically, this is used to set the surrounding width of the shape.

.attr("stroke","color").attr("stroke-width","pixel")

Here, the first attribute which is “stroke” takes the color for the stroke and the “stroke-width” attribute sets the width of the stroke.

Example 1: D3.js Symbol – SymbolCircle Property

Let’s generate a circle of 1000 px size of stroke red with 3px.

Script:

1. Pass d3.symbolCircle to the type() method with the size of 1000 px. Store it in the symbolCircle variable.
2. Use the d3.select() function and pass the previous variable with “stroke” and “stroke-width” attributes.

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolCircle Property</h1>

// Generate Circle with stroke properties

var symbolCircle = d3.symbol().type(d3.symbolCircle).size(1000);

d3.select("#Place_to_display").append("path").attr("d", symbolCircle).attr("transform", "translate(50,50)").attr("fill", "green")

.attr("stroke","red").attr("stroke-width","3px")

</script>

</body>

</html>

Output:

Example 2: D3.js Symbol – SymbolCross Property

Let’s generate a cross symbol of 1000 px size of stroke red with 3px.

Script:

1. Pass d3.symbolCross to the type() method with the size of 1000 px. Store it in the symbolCross variable.
2. Use the d3.select() function and pass the previous variable with “stroke” and “stroke-width” attributes.

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolCross Property</h1>

// Generate Cross symbol with stroke properties

var symbolCross = d3.symbol().type(d3.symbolCross).size(1000);

d3.select("#Place_to_display").append("path").attr("d", symbolCross).attr("transform", "translate(50,50)").attr("fill", "green")

.attr("stroke","red").attr("stroke-width","3px")

</script>

</body>

</html>

Output:

Example 3: D3.js Symbol – SymbolDiamond Property

Let’s generate a diamond symbol of 2500 px size of stroke blue with 3px.

Script:

1. Pass d3.symbolDiamond to the type() method with the size of 2500 px. Store it in the symbolCross variable.
2. Use the d3.select() function and pass the previous variable with “stroke” and “stroke-width” attributes.

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolDiamond Property</h1>

// Generate Diamond symbol with stroke properties

var symbolDiamond = d3.symbol().type(d3.symbolDiamond).size(2500);

d3.select("#Place_to_display").append("path").attr("d", symbolDiamond).attr("transform", "translate(50,50)").attr("fill", "yellow")

.attr("stroke","blue").attr("stroke-width","3px")

</script>

</body>

</html>

Output:

Example 4: D3.js Symbol – SymbolSquare Property

Pass the d3.symbolSquare property to the type() function with size 4000 px with blue stroke of size 10 px.

Script:

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolSquare Property</h1>

// Generate Square symbol with stroke properties

var symbolSquare = d3.symbol().type(d3.symbolSquare).size(4000);

d3.select("#Place_to_display").append("path").attr("d", symbolSquare).attr("transform", "translate(50,50)").attr("fill", "yellow")

.attr("stroke","blue").attr("stroke-width","10px")

</script>

</body>

</html>

Output:

Example 5: D3.js Symbol – SymbolTriangle Property

Pass the d3.symbolTriangle property to the type() function with size 2000 px with blue stroke of size 10 px.

Script:

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolTriangle Property</h1>

// Generate Triangle symbol with stroke properties

var symbolTriangle = d3.symbol().type(d3.symbolTriangle).size(2000);

d3.select("#Place_to_display").append("path").attr("d", symbolTriangle).attr("transform", "translate(50,50)").attr("fill", "yellow")

.attr("stroke","blue").attr("stroke-width","10px")

</script>

</body>

</html>

Output:

Example 6: D3.js Symbol – SymbolWye Property

Pass the d3.symbolWye property to the type() function with size 2000 px with blue stroke of size 8 px.

Script:

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolWye Property</h1>

// Generate Wye symbol with stroke properties

var symbolWye = d3.symbol().type(d3.symbolWye).size(2000);

d3.select("#Place_to_display").append("path").attr("d", symbolWye).attr("transform", "translate(50,50)").attr("fill", "green")

.attr("stroke","blue").attr("stroke-width","8px")

</script>

</body>

</html>

Output:

Example 7: D3.js Symbol – SymbolStar Property

Pass the d3.symbolStar property to the type() function with size 2000 px with pink stroke of size 8 px.

Script:

This is the entire code:

<html>

<head>

<script src=

"https://d3js.org/d3.v5.min.js">

</script>

</head>

<body>

<h1>D3.js Symbol - symbolStar Property</h1>

// Generate Star symbol with stroke properties

var symbolStar = d3.symbol().type(d3.symbolStar).size(2000);

d3.select("#Place_to_display").append("path").attr("d", symbolStar).attr("transform", "translate(50,50)").attr("fill", "green")

.attr("stroke","pink").attr("stroke-width","8px")

</script>

</body>

</html>

Output:

Conclusion

In this guide, we learned how to create symbols in D3.js using the D3-shapes visualization. First, we discussed the basic functions that generate the shapes by default. After that, we generated different shapes with specific sizes. Finally, we discussed seven different symbol properties with stroke attributes.

Source: linuxhint.com