Ways to include dots in a D3 chart?

Question

Ways to include dots in a D3 chart?

I'm striving to create a graph that includes lines and dots.

Although I have successfully drawn lines and dots with zoom and brush functionalities, the issue arises when I try to zoom in or out - the dots do not adjust accordingly.

Being relatively new to D3 graphs, I have used the following code to plot the dots:

    g.selectAll(".dot")
      .data(dots)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(new Date(d.date)); })
      .attr("cy", function(d) { return y(d.price); })
      .on("mouseover", function(d){
        return tooltip.style("visibility", "visible").html("Expected value is: "+d.expected_value + "<br/>"  + "value : "+d.close +"<br/>"  + "deviation is: "+d.deviation_expected)
      })
      .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
      .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

You can find my progress on this jsfiddle link.

Your assistance would be greatly appreciated.

javascript d3.js

Answer 1

Answer №1

Before delving into visualization, it's crucial to understand some basic features. When dealing with data sets on a graph, such as in the fiddle example, you'll need to plot them across the X and Y axes (e.g., data points or dots). Keep in mind that each set of data has its own domain, so grasp the concept of Domain and range.

d3.scaleLinear() <>

This function creates a continuous scale with a unit domain [0, 1] and a unit range [0, 1], along with the default interpolator and no clamping enabled. Linear scales are ideal for representing continuous quantitative data as they maintain proportional differences. The relationship between a range value y and a domain value x can be expressed as: y = mx + b.

d3.scaleTime() <>

Here, a time scale is constructed with the domain [2000-01-01, 2000-01-02], a unit range [0, 1], the default interpolator, and no clamping enabled.

Understand how domains and ranges map to individual data series.
Explore concepts like brush and zoom and their inverse mapping to the scales.
Practice redrawing plots based on new scales.

** The following code snippet demonstrates the implementation of brushing without considering the scaling for dots. To master this logic, refer to the documentation. Brush Event Example

// JavaScript code showcasing data and dot objects
var data = [{
    "date": "2017-04-22T11:45:00.000Z",
    "total": 731.6047915220261,
    ...
    },
  // Additional data objects here...
];

var dots = [
  {
    "date": "2017-04-22T11:45:00.000Z",
    "total": 731.6047915220261,
    ...
    },
  // More dot objects go here...
];


// Code continuation not displayed for brevity

// End of JavaScript block

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.heading {
  padding-top: 30px;
}

.buttonWidth {
  height: 34px;
  width: 50px;
}

.actiontable {
  width: 36rem;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}
// Additional CSS styles may continue below...

// End of CSS block

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

Answer 2

Before delving into visualization, it's crucial to understand some basic features. When dealing with data sets on a graph, such as in the fiddle example, you'll need to plot them across the X and Y axes (e.g., data points or dots). Keep in mind that each set of data has its own domain, so grasp the concept of Domain and range.

d3.scaleLinear() <>

This function creates a continuous scale with a unit domain [0, 1] and a unit range [0, 1], along with the default interpolator and no clamping enabled. Linear scales are ideal for representing continuous quantitative data as they maintain proportional differences. The relationship between a range value y and a domain value x can be expressed as: y = mx + b.

d3.scaleTime() <>

Here, a time scale is constructed with the domain [2000-01-01, 2000-01-02], a unit range [0, 1], the default interpolator, and no clamping enabled.

Understand how domains and ranges map to individual data series.
Explore concepts like brush and zoom and their inverse mapping to the scales.
Practice redrawing plots based on new scales.

** The following code snippet demonstrates the implementation of brushing without considering the scaling for dots. To master this logic, refer to the documentation. Brush Event Example

// JavaScript code showcasing data and dot objects
var data = [{
    "date": "2017-04-22T11:45:00.000Z",
    "total": 731.6047915220261,
    ...
    },
  // Additional data objects here...
];

var dots = [
  {
    "date": "2017-04-22T11:45:00.000Z",
    "total": 731.6047915220261,
    ...
    },
  // More dot objects go here...
];


// Code continuation not displayed for brevity

// End of JavaScript block

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.heading {
  padding-top: 30px;
}

.buttonWidth {
  height: 34px;
  width: 50px;
}

.actiontable {
  width: 36rem;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}
// Additional CSS styles may continue below...

// End of CSS block

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

Ways to include dots in a D3 chart?

Answer №1

d3.scaleLinear() <>

d3.scaleTime() <>

Similar questions

Adding Data to a Database Using Ajax with PHP

how to handle form submission using JavaScript's return method

Enable users to modify the URL in the window.open() function

Error in Babel-Loader when executing npm run build

Selecting options in table is disrupted by filtering in ng-repeat

When the 'keyup' event is detected, trigger the function only on keyup

TypeError: Unable to access the 'classify' property of an object that has not been defined (please save the ml5.js model first)

Unable to activate function when closing Vuetify v-alert

How to implement a form in PHP that doesn't refresh the page upon submission

Differences between Jquery's Find Method and ID Attribute

Issue with React Testing Library: Attempting to access the 'contents' property of an undefined value in Redux

How can I best fill the HTML using React?

What is causing the question mark symbol to appear at the beginning of my ajax response?

Can Google Charts columns be customized with different colors?

What is the best method to make the first input field the focus in BootStrap?

How does express.route determine the route?

Vue js parent-child communication using event bus fails to function

The MaterialUI table pagination feature is experiencing an issue where the "Next" button is

Filter a nested array in AngularJS and retrieve the parent object as the result

The contrastText property of the MUI React Theme palette is not functioning properly