 Manjunath - 1 year ago 122
Javascript Question

# How to create X and y Intersect chart using d3js?

I have an data which show the performance of user and competency which is y and x axis respectively. Where its scaled from 1 to 10. I want to create an intersection point using d3js but as a beginner im having no idea where to start. Mark R

To create a dot at that point, you simply need to draw a new circle on the point of intersection. Here is a JSFiddle of a VERY simple graph with comments to make it easier to understand. The dots are drawn from `data`. The important piece for you is

``````.append("svg:circle")
.attr("cy", function(d) {
return y(d.y);
})
.attr("cx", function(d, i) {
return x(d.x);
})
.attr("r", 10)
``````

which creates an svg circle, places it on the data point's x and y coordinates, and gives it a radius of 10. A more simplified version which might be easier to use for your application (because I don't know how your data is stored) is to feed in the data manually

``````.append("svg:circle")
.attr("cy", x(5))
.attr("cx", y(6))
.attr("r", 10)
``````

This will create a single data point at 5,6 with a radius of 10. Note that this is using the scaling functions x() and y() to convert the data point 5,6 to pixel values

``````var x = d3.scale.linear()
.domain([0, 10])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 10])
.range([height, 0]);
``````
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download