Controlling Color Transparency with Value

Question

Controlling Color Transparency with Value

I am working with a TreeMap layout and want to adjust the opacity of the children rectangles based on their values. Additionally, I would like each child to have a specific fill color so that viewers can easily compare data between cities without needing a separate legend. Currently, all rectangles in the TreeMap are the same color.

Apologies for directly inputting data into the code - I am still learning the basics.

Cheers

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            },
            {
              "name": "CKD",
              "value": 3.21,
              "color": "#2F9599",
            },
            {
              "name": "CHD",
              "value": 2.57,
              "color": "#E8175D",
            },
            {
              "name": "Diabetes",
              "value": 11.92,
              "color": "#474747",
            },
            {
              "name": "Stroke",
              "value": 1.18,
              "color": "#CC527A",
            }
          ]
        },

// Remaining code not changed for brevity

javascript html css d3.js

Answer 1

Answer №1

To adjust the opacity attribute, similar to setting width or height, you can define a function that determines how your values should be mapped into the percentage range (taking into consideration the maximum value).

.attr('opacity', function(d) { return d.value / 10 })

Incorporating this concept into your code would look something like this:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Pack layout (with labels)</title>
</head>;

<style>
rect {
  stroke: white;
}
text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  fill: black;
  font-size: 8px;
  text-anchor: end;
}

svg {
  padding-left: 60px;
  padding-top: 40px;
}
</style>

<body>
  <svg width="1020" height="720">
    <g></g>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "North England",
  "children": [
    {
      "name": "Bradford City",
      "children": [
        {
          "name": "Cancer",
          "value": 1.18,
          "color": "red",
        },
        {
          "name": "CKD",
          "value": 3.21,
          "color": "green",
        },
        {
          "name": "CHD",
          "value": 2.57,
          "color": "blue",
        },
        {
          "name": "Diabetes",
          "value": 11.92,
          "color": "yellow",
        },
        {
          "name": "Strokes",
          "value": 1.18,
          "color": "gray",
        }
      ]
    }
  ]
};

var treemapLayout = d3.treemap()
  .size([600, 400])
  .paddingOuter(20);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

nodes
  .append('rect')
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })
  .attr('opacity', function(d) { return 0.5 /* has to be like d.value / max or so */ })
  .attr('fill', function(d) { if (d.data.color) { 
                                  return d.data.color 
                                } else {
                                  return "white"
                                }})

nodes
  .append('text')
  .attr('dx', 4)
  .attr('dy', 14)
.text(function(d) {
      return d.data.name;
  });
  

  </script>
</body>

Updated:

    <!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            }
            ...
          ]
        }
        ...
      ]
    }
    ...
  ]
};

var maxValues = {
  "Cancer": 2.54,
  "CKD": 5.9,
  "CHD": 3.85,
  "Diabetes": 12,
  "Stroke": 2.13,
}

var treemapLayout = d3.treemap()
  .size([1000, 600])
  .paddingTop(20)
  .paddingInner(8);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'});

nodes
  .append('rect')
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })
  .attr('opacity', function(d) { return d.value / maxValues[d.data.name] })
  .attr('fill', function(d) { if (d.data.color) {
                                  return d.data.color
                                } else {
                                  return "white"
                                }});
  
nodes
  .append('text')
  .attr('dx', 10)
  .attr('dy', 8)
      .text(function(d) {
      return d.data.value;
  });

  </script>
</body>

Answer 2

To adjust the opacity attribute, similar to setting width or height, you can define a function that determines how your values should be mapped into the percentage range (taking into consideration the maximum value).

.attr('opacity', function(d) { return d.value / 10 })

Incorporating this concept into your code would look something like this:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Pack layout (with labels)</title>
</head>;

<style>
rect {
  stroke: white;
}
text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  fill: black;
  font-size: 8px;
  text-anchor: end;
}

svg {
  padding-left: 60px;
  padding-top: 40px;
}
</style>

<body>
  <svg width="1020" height="720">
    <g></g>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "North England",
  "children": [
    {
      "name": "Bradford City",
      "children": [
        {
          "name": "Cancer",
          "value": 1.18,
          "color": "red",
        },
        {
          "name": "CKD",
          "value": 3.21,
          "color": "green",
        },
        {
          "name": "CHD",
          "value": 2.57,
          "color": "blue",
        },
        {
          "name": "Diabetes",
          "value": 11.92,
          "color": "yellow",
        },
        {
          "name": "Strokes",
          "value": 1.18,
          "color": "gray",
        }
      ]
    }
  ]
};

var treemapLayout = d3.treemap()
  .size([600, 400])
  .paddingOuter(20);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

nodes
  .append('rect')
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })
  .attr('opacity', function(d) { return 0.5 /* has to be like d.value / max or so */ })
  .attr('fill', function(d) { if (d.data.color) { 
                                  return d.data.color 
                                } else {
                                  return "white"
                                }})

nodes
  .append('text')
  .attr('dx', 4)
  .attr('dy', 14)
.text(function(d) {
      return d.data.name;
  });
  

  </script>
</body>

Updated:

    <!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>TreeMap</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
  <svg width="1200" height="720">
    <g></g>
    <section class="container1">
      <p class="p1"> North England </p><p class="p2"> South England </p>
      <p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
      <p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
      <p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
      <p class="p9"> Bristol </p><p class="p10"> Luton </p>
      <p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
      <object class="Box" class="cancer"></object>
    </section>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var data = {
  "name": "England",
  "children": [
    {
      "name": "North England",
      "children": [
        {
          "name": "Bradford City",
          "children": [
            {
              "name": "Cancer",
              "value": 1.18,
              "color": "#A8A7A7",
            }
            ...
          ]
        }
        ...
      ]
    }
    ...
  ]
};

var maxValues = {
  "Cancer": 2.54,
  "CKD": 5.9,
  "CHD": 3.85,
  "Diabetes": 12,
  "Stroke": 2.13,
}

var treemapLayout = d3.treemap()
  .size([1000, 600])
  .paddingTop(20)
  .paddingInner(8);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

treemapLayout(rootNode);

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'});

nodes
  .append('rect')
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })
  .attr('opacity', function(d) { return d.value / maxValues[d.data.name] })
  .attr('fill', function(d) { if (d.data.color) {
                                  return d.data.color
                                } else {
                                  return "white"
                                }});
  
nodes
  .append('text')
  .attr('dx', 10)
  .attr('dy', 8)
      .text(function(d) {
      return d.data.value;
  });

  </script>
</body>

Controlling Color Transparency with Value

Answer №1

Similar questions

What is the reason for the click event in a Chrome extension's popup to refresh the popup's

Refreshing the Date Display with AJAX Response

Is there a way to access a PHP value within a self-invoked jQuery function?

There was an unexpected token syntax error while trying to assign the database URL from the environment variable "REACT_APP

Create a custom slider using jQuery that pulls in real-time data for a dynamic user

Styling the React Material UI DataGrid with the MuiDataGrid-window class using createMuiTheme or makeStyles / styled-components

multiple event listeners combined into a single function

How can I automatically add and remove the active class to the navigation on a single page layout?

Adding a tooltip to a specific header in a Vue list - here's how!

Difficulty in eliminating left and right padding in Vuetify's Toolbar component despite attempts with spacing helpers

Automatically adjust text size within div based on width dimensions

Sending an array from JavaScript to Ruby using Sinatra

Selenium WebDriver is having trouble locating an element

The video on mobile is not loading properly, as the play button appears crossed out

Confirm the presence of Cookie and save the data

Create a random number within a specified range using a different number in JavaScript

Step by step guide to applying a personalized "margin" to your CSS

nanoExpress Route Isolation

The mobile view is not displaying the footer in full width as expected

Tips for implementing a client-side event when an asp:menu item is clicked