Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Created January 25, 2019 15:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save romsson/7eb8dba335c702707bd2311bd75a28a7 to your computer and use it in GitHub Desktop.
Save romsson/7eb8dba335c702707bd2311bd75a28a7 to your computer and use it in GitHub Desktop.
Download ZIP
multiple coordinated scatterplots
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="main">
</div>
<script>
var margin = {top: 20, right: 10, bottom: 50, left: 50};
var width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
function scatterplot(el, data, x, y, w, h, var_x, var_y, var_r, var_color) {
var xScale = d3.scaleLinear().domain(d3.extent(data, function(d) {
return d[var_x]
}))
.range([0, w])
var yScale = d3.scaleLinear().domain(d3.extent(data, function(d) {
return d[var_y]
}))
.range([0, h])
var r = d3.scaleSqrt().domain(d3.extent(data, function(d) {
return d[var_r]
}))
.range([5, 10])
var color = d3.scaleOrdinal(d3.schemeCategory20)
el.append("div")
.style("float", "left")
.append("svg")
.attr("width", w)
.attr("height", h)
.append('g')
// .attr("transform", "translate(" + x + "," + y + ")")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", function(d) { return r(d[var_r]); })
.attr("cx", function(d) { return xScale(d[var_x]); })
.attr("cy", function(d) { return yScale(d[var_y]); })
.attr("fill", function(d) { return color(d[var_color]); })
.attr("stroke", "black")
.on("mouseenter", function(d) {
d3.select("body").selectAll("circle")
.attr("opacity", function(e) {
return e === d ? 1: .1;
})
})
}
d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/d6c4f6fc5791199f6aa2453a9b3270dbc5eefb4e/data/iris.csv", function(error, raw) {
raw.forEach(function(d) {
d.sepal_length = +d.sepal_length;
d.sepal_width = +d.sepal_width;
d.petal_length = +d.petal_length;
d.petal_width = +d.petal_width;
})
scatterplot(d3.select("#main"), raw, 0, 0, width/2, height/2, "sepal_width", "sepal_length", "petal_width", "species");
scatterplot(d3.select("#main"), raw, width/2, 0, width/2, height/2, "petal_length", "petal_width", "petal_width", "species");
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment