Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (122 sloc) 3.93 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<script type="text/javascript">
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Width and height
var w = 600;
var h = 350;
var padding = 70;
// dataset
var dataset = [
[15, 120], [480, 90], [1250, 50], [1100, 33], [1330, 915],
[4110, 112], [4715, 414], [215, 617], [815, 21], [2120, 818],
[6010, 1510]
];
// create x scale function
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) { return d[0]; })])
.range([padding, w - padding * 2]);
// create y scale function
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) { return d[1]; })])
.range([h - padding, padding]);
// define xAxis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
// define yAxis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// create svg
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) { return xScale(d[0]) })
.attr("cy", function (d) { return yScale(d[1]) })
.attr("r", 10)
.attr("fill", 'cornflowerblue')
.on('mousemove', function (d) {
d3.select(this).attr("fill", "blue").attr("r", 15);
div.html("Value:" + d[0])
.style("opacity", 1)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on('mouseout', function () {
d3.select(this).attr("fill", "cornflowerblue").attr("r", 10);
div.style("opacity", 0);
});
//create text
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) { return d[0] })
.attr("x", function (d) { return xScale(d[0]) })
.attr("y", function (d) { return yScale(d[1]) })
.attr("fill", 'green');
//create xAxis
svg.append('g')
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis)
//create xAxis Label
svg.append("text")
.attr("transform", "translate(" + (w / 2) + " ," + h + ")")
.style("text-anchor", "middle")
.text("X Axis");
//create yAxis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ", 0)")
.call(yAxis);
//Create yAxis Label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", padding / 2)
.attr("x", -(h / 2))
.style("text-anchor", "middle")
.text("Y Axis");
</script>
</body>
</html>
You can’t perform that action at this time.