Customizing line charts with D3.js and AngularJS for ultimate visual impact

Question

Customizing line charts with D3.js and AngularJS for ultimate visual impact

Working on a project involving the creation of a line chart using D3.js library and AngularJS within an Ionic framework. I am looking to customize the color of data points based on the Y-axis values. For example, if the value falls between 0-30, I want the data point to be displayed in green; for values between 31-40, yellow; and for values between 41-60, red. This is my first time working with D3 and I will be dynamically fetching data from a back-end JSON file. The back-end includes a parameter 'e' that ranges from 0 to 3 depending on the Y-axis data value, which determines the color code at the front-end. The 'e' parameter varies depending on different scenarios related to the Y axis, such as Sales or Tax. For instance, in the context of sales, a value of 0 represents 110-150, whereas for Tax, it signifies 50-90. Seeking assistance from anyone familiar with this process. View the expected line chart image.

javascript angularjs d3.js ionic-framework

Answer 1

Answer №1

If you want to add color to the circle nodes based on y axis values, you can use the following code snippet (In this example, it's based on data "close"):

svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 3.5)
    .style("fill", function(d){
       if (d.close < 100)
           return "red";
       if (d.close < 200)
           return "brown";
       if (d.close < 300)
           return "green";
       if (d.close < 400)
           return "blue";
       if (d.close < 500)
           return "yellow" ;  
       if (d.close < 600)
           return "pink" ;       
       if (d.close < 700)
           return "orange" ;  
    })

To implement this in Angular, you need to create a directive...

UPDATE I have included a div for displaying tooltip as shown below:

<div id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
    <div id="ttclose"></div>
    <div id="ttdate"></div>
</div>

Then, during the move event, you can show and set values like this:

.on("mouseover", function () {
                return d3.select("#mytooltip").style("visibility", "visible"); //displaying the tooltip
            })
                .on("mousemove", function (d) {
                console.log()
                d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
                d3.select("#mytooltip").select("#ttdate").text(function () {
                    return d.date; //setting date values in tooltip
                });
                d3.select("#mytooltip").select("#ttclose").text(function () {
                    return d.close; //setting date values in tooltip
                });
                return;
            })
                .on("mouseout", function () {
                return d3.select("#mytooltip").style("visibility", "hidden"); //hiding the tooltip
            });

You can find the complete working code here

I hope this explanation is helpful!

Answer 2

If you want to add color to the circle nodes based on y axis values, you can use the following code snippet (In this example, it's based on data "close"):

svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 3.5)
    .style("fill", function(d){
       if (d.close < 100)
           return "red";
       if (d.close < 200)
           return "brown";
       if (d.close < 300)
           return "green";
       if (d.close < 400)
           return "blue";
       if (d.close < 500)
           return "yellow" ;  
       if (d.close < 600)
           return "pink" ;       
       if (d.close < 700)
           return "orange" ;  
    })

To implement this in Angular, you need to create a directive...

UPDATE I have included a div for displaying tooltip as shown below:

<div id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
    <div id="ttclose"></div>
    <div id="ttdate"></div>
</div>

Then, during the move event, you can show and set values like this:

.on("mouseover", function () {
                return d3.select("#mytooltip").style("visibility", "visible"); //displaying the tooltip
            })
                .on("mousemove", function (d) {
                console.log()
                d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
                d3.select("#mytooltip").select("#ttdate").text(function () {
                    return d.date; //setting date values in tooltip
                });
                d3.select("#mytooltip").select("#ttclose").text(function () {
                    return d.close; //setting date values in tooltip
                });
                return;
            })
                .on("mouseout", function () {
                return d3.select("#mytooltip").style("visibility", "hidden"); //hiding the tooltip
            });

You can find the complete working code here

I hope this explanation is helpful!

Customizing line charts with D3.js and AngularJS for ultimate visual impact

Answer №1

Similar questions

What is the best way to toggle DOM classes in React using Material-UI components?

Updating cluetip content post webpage loading

Struggling to deserialize JSON information into a Dictionary with key and value pairs of strings

The file reader feature is currently experiencing issues on both Chrome and Internet Explorer browsers

Rating of displaying an undefined value (NaN)

Encountering an issue when transferring data between controllers utilizing a demo service

Tips for altering the appearance of a button when moving to a related page

Encountered an issue while attempting to include multiple JavaScript sources. Please review your configuration settings for the javascripts.join

How to resolve CORS error when using custom request header in Django with JavaScript and redirecting to OPTIONS request?

Select objects from an array that are contained within another array of objects

Obtaining Input Field Value in Angular Using Code

"Troubleshooting Nextjs in a Production Environment: Tips for Resolving Local Debugging Issues When

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

Tips for implementing a nested ng-repeat with nested JSON array data triggered by a button click

Guide on updating a single element in a Firebase array

Guide to saving information to a file using angularJS

Switch the view to a grid layout upon clicking

I would greatly appreciate any recommendations on how to troubleshoot and

Adjust speed on various HTML5 video players

How to have multiple versions of grunt coexisting on a single machine