Breaking News: Grepper is joining You.com. Read the official announcement!

Data visualization

kouqhar answered on July 30, 2022 Popularity 10/10 Helpfulness 1/10

answer Data visualization

Data visualization

Comment

/*
	// Data visualization with d3.js
    // Create a scatter plot with circles and add labels
    			// IMPORT OR INSTALL D3.JS
*/
    const dataset = [
                  [ 52,    42 ],
                  [ 185,   254 ],
                  [ 356,   220 ],
                  [ 75,    395 ],
                  [ 350,   420 ],
                  [ 300,   245 ],
                  [ 258,   64 ],
                  [ 444,   245 ],
                  [ 85,    205 ],
                  [ 19,    342 ]
                ];

    const w = 500; // X axis
    const h = 500; // Y axis

    const svg = d3.select("body") // Select the HTML tag you want to append data into
                  .append("svg") // This creates an 'svg' shape and appends it to 'body'
                  .attr("width", w) // Sets the width of 'svg' to 'w'
                  .attr("height", h); // Sets the height of 'svg' to 'h'

// A circle in SVG has three main attributes. The cx and cy attributes are the coordinates. 
// They tell D3 where to position the center of the shape on the SVG canvas. 
// The radius (r attribute) gives the size of the circle.

    svg.selectAll("circle") // 'Selects All' the 'circle' elements found in 'svg'
       .data(dataset) // Imports and automatically loops through the data or coordinates
       .enter() // Creates new (circle) elements if data is more than the selected elements
       .append("circle") // Appends 'circle' into 'svg'
       .attr("cx", (d, i) => d[0]) // The 'x' axis of 'circle', returns first elem for 'x'
       .attr("cy", (d, i) => h - d[1]) // The 'y' axis of 'circle', returns and inverts 'y'
       .attr("r", 5); // The 'r', radius gives the size of the 'circle'

    svg.selectAll("text") // 'Selects All' the 'text' node for each 'circle' to create a label
       .data(dataset) // Imports and automatically loops through the data or coordinates
       .enter() // Creates new (text) node if data is more than the selected nodes
       .append("text") // Appends 'text' node to its respective 'circle'
       .attr("x", (d, i) => d[0] + 5) // Moves the label horizontally by its 'x' point plus 5
       .attr("y", (d, i) => h - d[1]) // Moves and inverts the label vertically by its 'y' point
	   .text(d => `${d[0]}, ${d[1]}`) // Sets the 'text' node value to the coordinates "x, y"
       .attr('fill', 'teal') // Sets the color for each label to 'teal'

// With love @kouqhar

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: www.linkedin.com

Tags: data-visualization javascript

Link to this answer
Share Copy Link

Contributed on Jul 30 2022

kouqhar

0 Answers Avg Quality 2/10

Data visualization

Contents

More Related Answers

Data visualization

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.