Reusable scatter plot.
forked from EfratVil's block: Reusable scatter plot
license: mit |
Reusable scatter plot.
forked from EfratVil's block: Reusable scatter plot
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
</head> | |
<body> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<div style="margin-left: 50px; margin-top: 20px;"> | |
<button id="btn1" type="button" class="btn btn-info btn-sm">Change Data</button> | |
<button id="btn2" type="button" class="btn btn-info btn-sm">Change Color</button> | |
</div> | |
<p id="g1"></p> | |
<script> | |
function randomData(samples) { | |
var data = [], | |
random = d3.randomNormal(); | |
for (i = 0; i < samples; i++) { | |
data.push({ | |
x: random(), | |
y: random() | |
}); | |
} | |
return data; | |
} | |
var ds = randomData(200); | |
var chart = "g1"; | |
var margin = { top: 20, right: 20, bottom: 30, left: 50 }; | |
width = 800 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var x = d3.scaleLinear() | |
.range([0, width]); | |
var y = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom(x).ticks(12), | |
yAxis = d3.axisLeft(y).ticks(12); | |
var svg = d3.select("#" + chart).append("svg") | |
.attr("id", chart + "_svg") | |
.attr("data-margin-right", margin.right) | |
.attr("data-margin-left", margin.left) | |
.attr("data-margin-top", margin.top) | |
.attr("data-margin-bottom", margin.bottom) | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
x.domain(d3.extent(ds, function (d) { return d.x; })).nice(); | |
y.domain(d3.extent(ds, function (d) { return d.y; })).nice(); | |
svg.append("g") | |
.attr("class", "x axis ") | |
.attr('id', "axis--x") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr('id', "axis--y") | |
.call(yAxis); | |
svg.selectAll(".dot") | |
.data(ds) | |
.enter().append("circle") | |
.attr("class", "dot") | |
.attr("r", 4) | |
.attr("cx", function (d) { return x(d.x); }) | |
.attr("cy", function (d) { return y(d.y); }) | |
.attr("opacity", 0.5) | |
.style("fill", "#4292c6"); | |
// Change data | |
d3.select("#btn1").on("click", function () { | |
var width = d3.select("#g1_svg").attr("width") - d3.select("#g1_svg").attr("data-margin-left") - d3.select("#g1_svg").attr("data-margin-right"), | |
height = d3.select("#g1_svg").attr("height") - d3.select("#g1_svg").attr("data-margin-top") - d3.select("#g1_svg").attr("data-margin-bottom"); | |
var x = d3.scaleLinear() | |
.range([0, width]); | |
var y = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom(x).ticks(12), | |
yAxis = d3.axisLeft(y).ticks(12); | |
var ds = randomData(200); | |
x.domain(d3.extent(ds, function (d) { return d.x; })).nice(); | |
y.domain(d3.extent(ds, function (d) { return d.y; })).nice(); | |
var t = svg.transition().duration(750); | |
svg.select("#axis--x").transition(t).call(xAxis); | |
svg.select("#axis--y").transition(t).call(yAxis); | |
svg.selectAll(".dot").data(ds) | |
svg.selectAll("circle").transition(t) | |
.attr("cx", function (d) { return x(d.x); }) | |
.attr("cy", function (d) { return y(d.y); }); | |
}); | |
// Change color | |
d3.select("#btn2").on("click", function () { | |
var svg = d3.select("#g1_svg"); | |
if (d3.select("#g1_svg").selectAll('circle').style("fill") =="rgb(66, 146, 198)") | |
{ svg.selectAll('circle') | |
.transition() | |
.duration(750) | |
.ease(d3.easeLinear) | |
.style("fill", "#d6604d"); | |
} | |
else | |
{ svg.selectAll('circle') | |
.transition() | |
.duration(750) | |
.ease(d3.easeLinear) | |
.style("fill", "#4292c6"); | |
} | |
}); | |
</script> | |
</body> |