I've used NVD3 to make a line chart, where the X axis is Age (30-75), and the Y axis is risk of a heart attack (0-100%), drawing a line showing the risk over the complete age-span of 30-75:
In the HTML:
<nvd3-line-chart
data="riskchartData"
id="riskPrediction"
height="300"
margin="{left:90,top:20,bottom:70,right:20}"
yaxisLabel="My CHD Risk"
xaxisLabel="Age"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true"
showLegend="true"
showControls="true"
color="colorFunction()">
<svg></svg>
</nvd3-line-chart >
In the JS:
$scope.RiskChartRedraw = function(){
risklines = predemo();
$scope.yMaxFunction();
$scope.riskchartData = [
{
"key": "My current risk",
"area": false,
"values": risklines[0],
"color": "red",
}
];
};
I want to add a circle onto this line, showing the user's current age - say, 50:
In the JS:
$scope.age = 50; // user's current age
$scope.risk = .03; // percentile risk of heart attack at current age
d3.select('#riskPrediction svg')
.append('circle')
//.data(circlerisk)
.attr({
fill: 'red',
stroke: 'red',
cx: $scope.age,
cy: $scope.risk,
r: 7
});
... but this bypasses the translation NVD3 makes of the age and risk data values into d3/SVG graph coordinates. How does one align the cx and cy coordinates of the circle, to the point on the linegraph that matches a specific age value?
EDIT: We're inching closer .. adding this at the bottom of the NVD3 section in the HTML above draws a circle that updates with the correct values in realtime:
<svg>
<circle cx="{{agecircle}}" cy="{{riskcircle}}" r="5.656854249492381" style="fill:black;"></circle>
</svg>
... but the values are still not aligned with the line in the chart. Trying to bind this circle to the same values in the dataset is not working:
<circle cx="function(d) { d.x = {{agecircle}}; return x;}" cy="function(d) { d.y = {{riskcircle}}; return y;}" r="8" style="fill:black;"></circle>
Any clues as to what we're missing?
EDIT2: And closer still ..