Skip to content

Instantly share code, notes, and snippets.

@EfratVil EfratVil/README.md
Last active Aug 12, 2016

Embed
What would you like to do?
Reusable scatter plot

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 * height / width);
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 * height / width);
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.