Applying a color gradient to nodes in d3 v5 based on their degree

If we were working with d3 v5, how might we go about coloring nodes based on their degrees? It's important that the visualization clearly shows nodes with higher degrees in darker shades and nodes with lower degrees in lighter shades.

I attempted to implement the following solution, but unfortunately it did not produce the desired outcome:

// To assign colors based on node degree
var colorScale = d3.scaleOrdinal()
.domain([1, 5]) // defining the range of node degrees
.range(["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6"]); // specifying the color range

// Creating a selection for nodes and binding data
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
.style("fill", function(d) { return colorScale(d.degree); }); 
// Using the defined color scale to color the nodes

Answer №1

enter your code here

// creating a color scale for node degree mapping

let nodes= [{degree:1},{degree:4},{degree:10},{degree:16},{degree:1}]
let value =nodes.map((el) => el.degree);
let DOMAIN= [d3.min(value),d3.max(value)]
let colorScale = d3.scaleOrdinal()
.domain( DOMAIN) // defining the range of node degrees
.range(["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6"]); // setting the color range

let radiusScale = d3.scaleLinear()
.domain( DOMAIN) // specifying the range of node degrees
.range([5,10]);
// selecting the SVG container and appending an SVG element
let svgContainer = d3.select('#svg').append('svg').attr('width',200).attr('height',200);
svgContainer.selectAll('circle').data(nodes).enter().append('circle').attr('r',(d,i) => radiusScale (d.degree)).attr('cy',10).attr('cx',(d,i) => i*30+5).attr('fill',(d,i) => colorScale(d.degree))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id='svg'></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create the columnHeader to match the width of the CSS column

Here's what I attempted: http://codepen.io/helloworld/pen/BcjCJ I aim for each column to have the same width as the column header visually. Currently, a slight difference in width exists between the column header and the actual column. Refer to the ...

Determine the amount of interconnected nodes listed in a csv file depicting their relationships

I have a sizable CSV document formatted as follows: ServerID|AppID 01 | 01 01 | 02 02 | 02 02 | 03 02 | 04 03 | 04 The information from this file is being used in a d3 force layout, demonstrated in this example. The cr ...

Incorporate dynamic animations into text wrapping using React

Currently, I am in the process of learning React and have successfully created a flexbox with 6 child containers using the wrap property. Now, I am looking to add animation when the containers wrap onto a new line. I attempted to add a transition animatio ...

Aligning multiple items to the right using Flexbox

While it's common knowledge how to align one item to the right in flexbox, what about aligning multiple items, like the last two elements, to the right and the rest to the left? Take a look at this example where I want elements with the class .r to be ...

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

Trouble arises with the background of the HTML body

There seems to be a mysterious white strip appearing when I use the (google custom sesrch) search results rendering tag gcse:searchresults-only If I remove cse id from var cx or delete the above tag, everything works perfectly and the white stripe disappe ...

Mapping the table by the header and the first cell in each row to be filled with data from a JSON

As I utilize PHP to echo JSON array inline, my goal is for JavaScript/jQuery to populate a table based on this data. The HTML table structure looks like this: <table> <thead> <tr> <th>Time</th> <th dat ...

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

I'm a beginner in jQuery and JavaScript programming. While I've managed to use jQuery for my Ajax calls, I'm facing an issue that has me stumped. When making an Ajax call, I'm trying to return a complete HTML structure, specifically a ...

Sending data from Node.JS to an HTML document

Currently, I am working on parsing an array fetched from an API using Node.js. My goal is to pass this array as a parameter to an HTML file in order to plot some points on a map based on the API data. Despite searching through various answers, none of them ...

Adaptable images - Adjusting image size for various screen dimensions

Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...

Ajax: client dilemma created by the interaction of two functions

My university homework assignment requires me to develop a small e-commerce website. After logging in, the user will be directed to the homepage where they will receive a JSON object from the server containing product information to dynamically generate th ...

Floating a DIV causes it to shift down in a responsive layout at specific window sizes

My issue lies with a fluid layout that works well for the most part. However, at specific window widths, one of four floating div-elements unexpectedly shifts down. This inconsistency happens at nearly 20 different widths, differing by only one pixel. For ...

Achieving perfect alignment for CSS heading and floated controls in the center of the page

I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned. Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the headi ...

The page is present, but unfortunately, the content is displaying a 404 error. I am considering using Selenium to retrieve

Is there a way to use Selenium webdriver to download images from a dynamically updated website, like this site? Every day a new page is created with images uploaded around 6 pm. How can I retrieve these images using Python and Selenium? url = 'http:/ ...

Is the img tag supported by html2image?

I've been diving into the functionality of the html2image package and noticed that it's having trouble locating my locally stored images. My code snippet looks like this: from html2image import Html2Image hti = Html2Image() html_str = "&q ...

The clash between React-beautiful-dnd and other dragging frameworks

I am currently facing a challenge with integrating D3 parallel parcoords and Material-table into one application. Individually, each component works perfectly fine. However, when rendered together, an issue arises within react-beautiful-dnd. D3 parallel pa ...

Mastering the Art of Incorporating jQuery, JavaScript and CSS References into Bootstrap with ASP.NET WebForms

Hey there, I'm currently working on a personal project as a beginner in Bootstrap. My main challenge for the past two days has been trying to integrate a dateTimePicker and number Incrementer using Bootstrap techniques. Despite my efforts in researchi ...

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

Leveraging oembed for dynamic content integration with SoundCloud in JSON

I'm looking to retrieve the latest 10 tracks of a user using oembed with json. $.getJSON("http://soundcloud.com/oembed", {url: "https://soundcloud.com/aviciiofficial", format: "json"}, function(data) { console.log(data.html); }) The d ...

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...