What steps can be taken to ensure that specific elements stand out when they are clicked on

Question

What steps can be taken to ensure that specific elements stand out when they are clicked on

I'm in the process of creating a graph featuring bars with distinct data, color-coded for clarity. The legend explains the meaning behind each color. My goal is to implement a feature where clicking on a circle in the legend will highlight bars of the corresponding color on the graph.

<!DOCTYPE html>
<html>
<head>
  <meta>
  <meta name="description" content="Visualizing Resource Allocation per Project with Bar Graphs" />
  <meta charset="utf-8">
  <title>Resource Distribution by Program</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style type="text/css">
    h1 {
      font-size: 35px;
      color: darkblue;
      font-family: Helvetica;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }
    
    h2 {
      font-size: 20px;
      color: darkred;
      font-family: Helvetica;
      margin-left: 900px;
      margin-top: -40px; 
      margin-bottom: 70px
    }

    h3 {
      font-size: 13px;
      color: red;
      font-weight: bold;
    }

    .label {
      font-size: 20px;
      color: darkgrey;
      font-family: sans-serif;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }

    body {
      background: linear-gradient(white, #a6a6a6);
    }

    .legend {
      font-family: sans-serif;
      font-size: 17px; 
      font-weight: normal; 

    }

Please ignore the wide formatting, it's optimized for a large touch screen display.

My query pertains to enabling the functionality where clicking on a circle in the legend results in highlighting bars of the same color (specifically the stroke) on the graph.

Many thanks in advance!

javascript html css d3.js visualization

Answer 1

Answer №1

Choosing the appropriate bars can be a bit tricky at the moment, as the colors of the bars are not tied to any specific data but rather assigned based on an index:

.attr("fill", function(d, i) {
        return color[i%8] 
      })

If the colors were linked to the data (which is generally a better practice), it would simply involve assigning a class and then highlighting them using that class.

However, there is a method to select all bars with the same color as a clicked circle: by initially selecting all bars and then filtering the selection based on attributes:

.on("click", function(){
            var rects = d3.selectAll("rect").filter(function(){
            return this.attributes.fill.nodeValue == "#1F45FC";
            });
 });

You can view the demo here: https://jsfiddle.net/gerardofurtado/z3y0fk74/ (SO snippet wasn't used due to long bars)

Click on the circle, and bars with the same color will have a black stroke (2px width). Click again to remove the stroke.

Answer 2

Choosing the appropriate bars can be a bit tricky at the moment, as the colors of the bars are not tied to any specific data but rather assigned based on an index:

.attr("fill", function(d, i) {
        return color[i%8] 
      })

If the colors were linked to the data (which is generally a better practice), it would simply involve assigning a class and then highlighting them using that class.

However, there is a method to select all bars with the same color as a clicked circle: by initially selecting all bars and then filtering the selection based on attributes:

.on("click", function(){
            var rects = d3.selectAll("rect").filter(function(){
            return this.attributes.fill.nodeValue == "#1F45FC";
            });
 });

You can view the demo here: https://jsfiddle.net/gerardofurtado/z3y0fk74/ (SO snippet wasn't used due to long bars)

Click on the circle, and bars with the same color will have a black stroke (2px width). Click again to remove the stroke.

What steps can be taken to ensure that specific elements stand out when they are clicked on

Answer №1

Similar questions

Unlock the power of Javascript in Wordpress by converting a string into a dynamic Page Title

Using AJAX to assign PHP session variables

Stripping out only the position attribute using jQuery

Resolving formatting challenges in R markdown with Blastula

By setting `queue: false` when calling jQuery's `show()` method, you can

Obtaining the "category" and "name" from a stacked bar chart using the Highchart OnClick event

using jQuery to retrieve JSON data containing nested arrays

Ways to delay the execution of a loop using setTimeout or setInterval

"Discovering the referring page URL in Next.js: A Step-by-Step

Having trouble creating a delete button with the $_GET method

How can I insert <div> elements into arrays in JSX?

Invoking a prototype method executes the incorrect function repeatedly

Is there a universal framework for PHP and JavaScript commands?

Can you explain the distinction between these two forms of functional components in ReactJs?

Is it possible to break a single word when word wrapping?

The height of each Bootstrap column is equal to the height of its corresponding

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Load different fonts dynamically based on environment configuration

Press the button to move to the following node

Discover similarities between two arrays