How can one maintain the same color for a child in a sunburst sequence as its parent?

Question

How can one maintain the same color for a child in a sunburst sequence as its parent?

Seeking advice on how to create a lighter color for a child element based on the parent's color. The code I currently use generates random colors as shown below:

  var color = d3.scale.category20b();

 .style("fill", function(d) { return color((d.children ? d : d.parent).name); })

This results in a random color for each node, like the first image linked here: first image : random colour

However, what I am aiming for is a gradient effect where the child's color is lighter than the parent's color, as seen in this example image: Gradient colour

If anyone has suggestions on achieving this effect, it would be greatly appreciated. I have included links to my result images due to restrictions on posting images directly. Thank you.

javascript css d3.js colors sunburst-diagram

Answer 1

Answer №1

This project presented an intriguing challenge. The majority of the effort went into setting up the color schemes and various webpage templates. I encountered some unexpected issues while attempting to utilize d3.interpolateString(), so I decided to postpone that for further investigation. Here is how I prepared for this task:

var brewerColors = d3.entries(colorbrewer);
// colors 1-5 seemed too similar
// colors 6-13 provided the best contrast
// colors 4 and above were not suitable
var brewerOffset = 9;
var pageTypes = ["home","product","search","account","other","end"];
var colors = [];
var pages = [];
for (var ct=0; ct<pageTypes.length; ct++) {
    var colorBucket = brewerColors[ct + brewerOffset].value[pageTypes.length];
    for (var ct2=0; ct2<colorBucket.length; ct2++) {
        pages.push(pageTypes[ct] + (ct2 + 1));
        colors.push(colorBucket[ct2]);
    }
}

var ramps = d3.scale.ordinal()
    // ensure center colors are darker than edge colors
    .domain(pages.reverse())
    .range(colors);

Following that, assigning the appropriate colors to the shapes was a straightforward process:

var path = vis.data([json]).selectAll("path")
    .data(nodes)
    .enter().append("svg:path")
    ...
    .style("fill", function(d) {
        return ramps(d.name + d.depth); // e.g. product1, home2, etc.
    })
    ...

For a live demonstration, you can access the complete working code on PLUNK.

NOTE: I recommend making a copy of the plunk to prevent accidental deletion in the future.

Answer 2

This project presented an intriguing challenge. The majority of the effort went into setting up the color schemes and various webpage templates. I encountered some unexpected issues while attempting to utilize d3.interpolateString(), so I decided to postpone that for further investigation. Here is how I prepared for this task:

var brewerColors = d3.entries(colorbrewer);
// colors 1-5 seemed too similar
// colors 6-13 provided the best contrast
// colors 4 and above were not suitable
var brewerOffset = 9;
var pageTypes = ["home","product","search","account","other","end"];
var colors = [];
var pages = [];
for (var ct=0; ct<pageTypes.length; ct++) {
    var colorBucket = brewerColors[ct + brewerOffset].value[pageTypes.length];
    for (var ct2=0; ct2<colorBucket.length; ct2++) {
        pages.push(pageTypes[ct] + (ct2 + 1));
        colors.push(colorBucket[ct2]);
    }
}

var ramps = d3.scale.ordinal()
    // ensure center colors are darker than edge colors
    .domain(pages.reverse())
    .range(colors);

Following that, assigning the appropriate colors to the shapes was a straightforward process:

var path = vis.data([json]).selectAll("path")
    .data(nodes)
    .enter().append("svg:path")
    ...
    .style("fill", function(d) {
        return ramps(d.name + d.depth); // e.g. product1, home2, etc.
    })
    ...

For a live demonstration, you can access the complete working code on PLUNK.

NOTE: I recommend making a copy of the plunk to prevent accidental deletion in the future.

How can one maintain the same color for a child in a sunburst sequence as its parent?

Answer №1

Similar questions

New elements can be inserted at the rear of the queue while older elements are removed from the front of the queue

Exploring the process of implementing a filter search feature using Vue.js and JavaScript

I am encountering an issue stating "indexRouter has not been defined"

"Performing validation on a number input by using the ng-change event

Hovering over a td tag and adding a border using CSS can cause the entire table to

What is the best way to access a variable in one file and then utilize it in multiple other files?

A guide to exporting a PDF in A4 size landscape mode with jspdf

Creating a Dynamic Navigation Bar with HTML and CSS

Having trouble running the development environment with npm or pnpm due to permission problems

Backdrop styling for Material-UI dialogs/modals

Encountering an Unexpected Identifier Error in the JavaScript Console

How can I resolve the issue of "require is not defined" in the code?

What is the best way to use useCallback within loops?

ReactJS Form: Updates in Parent Component State Result in Child Field Being Cleared and Props Remaining Unchanged

Do I need to use the "--save" flag in npm to add dependencies to the "package.json" file?

React's Material-UI AppBar is failing to register click events

Issues with dependencies in npx create react app

Creating a canvas that adjusts proportionally to different screen sizes

How can you position the nav collapse toggle to the far right while still allowing it to collapse downwards on smaller devices with Bootstrap 5?

How to Handle Duplicate Elements in #each Svelte Block