Scatter Plot showing that samples from two populations do not overlap.
consider using this in place of two bar charts showing means and some measure of variance in an error bar.
license: gpl-3.0 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 22px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.dot { | |
stroke: #000; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var data = [ | |
{x: 1, y: 0.2}, | |
{x: 1, y: 0.8}, | |
{x: 1, y: 2.1}, | |
{x: 1, y: 1.2}, | |
{x: 1, y: 1.4}, | |
{x: 2, y: 6.2}, | |
{x: 2, y: 6.7}, | |
{x: 2, y: 5.8}, | |
{x: 2, y: 5.3}, | |
{x: 2, y: 4.6} | |
] | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal() | |
.domain(["0", "1", "2"]) | |
.rangeRoundBands([0, width], .1); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var color = d3.scale.category10(); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.tickValues([]) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
data.forEach(function(d) { | |
d.x = +d.x; | |
d.y = +d.y; | |
}); | |
x.domain([1]); | |
y.domain(d3.extent(data, function(d) { return d.y; })).nice(); | |
var widthAdjust = x.rangeBand()/2; | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height) + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("x", width/2) | |
.attr("y", 20) | |
.style("text-anchor", "middle") | |
.text("Samples"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Movement (cm)") | |
svg.selectAll(".dot") | |
.data(data) | |
.enter().append("circle") | |
.attr("class", "dot") | |
.attr("r", 9) | |
.attr("cx", function(d) { return x(1) + widthAdjust; }) | |
.attr("cy", function(d) { return y(d.y); }) | |
.style('fill-opacity', 0.5) | |
.style("stroke", function(d) { return color(d.x); }) | |
.style("fill", function(d) { return color(d.x); }); | |
var legend = svg.selectAll(".legend") | |
.data(color.domain()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; }); | |
legend.append("circle") | |
.attr("cx", width - 9) | |
.attr("cy", 9) | |
.attr("r", 9) | |
.style('fill-opacity', 0.5) | |
.style('stroke', color) | |
.style("fill", color); | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "end") | |
.text(function(d) { | |
if (d == 1) return 'Control Seawater'; | |
return 'Crabwater'; | |
}); | |
</script> |