Skip to content

Instantly share code, notes, and snippets.

@guillaumechaumet

guillaumechaumet/index.html

Last active July 4, 2017 14:41
Show Gist options
  • Save guillaumechaumet/13e4e9d64e879fd3a27aa7ebf03e6259 to your computer and use it in GitHub Desktop.
Save guillaumechaumet/13e4e9d64e879fd3a27aa7ebf03e6259 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<style>
.domain {
display: none;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
margin = {top: 20, right: 30, bottom: 30, left: 40};
var idleTimeout, idleDelay = 350;
var x_domain = [d3.min(plotdata,function(d) { return d.x; }),d3.max(plotdata, function(d) { return d.x; })],
y_domain = [d3.min(plotdata,function(d) { return d.y; }),d3.max(plotdata, function(d) { return d.y; })];
var color = d3.scaleOrdinal(d3.schemeCategory10);
var idleTimeout, idleDelay = 350;
var x = d3.scaleLinear()
.domain(x_domain).nice()
.range([0, width]);
var y = d3.scaleLinear()
.domain(y_domain).nice()
.range([height, 0]);
var xAxis = d3.axisBottom(x)
.ticks(10);
var yAxis = d3.axisLeft(y)
.ticks(10);
var brush = d3.brush().on("end", brushended);
svg.append("g").attr("class", "brush").call(brush).append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function brushended() {
var s = d3.event.selection;
if (!s) {
if (!idleTimeout)
return idleTimeout = setTimeout(idled, idleDelay);
x.domain(x_domain);
y.domain(y_domain);
} else {
x.domain([s[0][0], s[1][0]].map(x.invert, x));
y.domain([s[1][1], s[0][1]].map(y.invert, y));
svg.select(".brush").call(brush.move, null);
}
zoom();
}
function idled() {
idleTimeout = null;
}
function zoom() {
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").transition(t)
.attr("cx", function(d) {
return x(d.x);
})
.attr("cy", function(d) {
return y(d.y);
});
svg.selectAll(".levelLine").transition(t)
.attr("d", d3.geoPath());
}
var container = svg2.append("g");
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.attr("transform", "rotate(90)")
.style("text-anchor", "end")
.style("font-size","15px");
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
.append("text")
.attr("class", "label")
// .attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("font-size","15px")
.style("text-anchor", "end");
svg.select(".axis--x")
.selectAll("text") // To rotate the texts on x axis. Translate y position a little bit to prevent overlapping on axis line.
.style("font-size","12px");
svg.select(".axis--y")
.selectAll("text")
.style("font-size","12px");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.insert("g", "g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("class","levelLine")
.selectAll("path")
.data(d3.contourDensity()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
.size([width, height])
.bandwidth(40)
(plotdata))
.enter().append("path")
.attr("d", d3.geoPath());
svg.selectAll(".dot")
.data(plotdata)
.enter().append("circle")
.attr("class", "dot")
.style("stroke-opacity", 0.1)
.attr("r",2)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.on("click", function() {})
.style("fill", function(d) { return color(d.species); });
var plotdata=[
{
"x": 10.0638,
"y": 83.2378,
"species": "aa"
},
{
"x": 61.5313,
"y": 100.8635,
"species": "cc"
},
{
"x": 175.9938,
"y": 177.6713,
"species": "cc"
},
{
"x": 122.9072,
"y": 35.5814,
"species": "aa"
},
{
"x": 68.9621,
"y": 51.2496,
"species": "cc"
},
{
"x": 129.5638,
"y": 86.8328,
"species": "aa"
},
{
"x": 28.5209,
"y": 101.1107,
"species": "cc"
},
{
"x": 163.2531,
"y": 74.564,
"species": "aa"
},
{
"x": 179.9356,
"y": 84.8313,
"species": "bb"
},
{
"x": 154.6098,
"y": 24.6736,
"species": "bb"
},
{
"x": 156.2002,
"y": 21.633,
"species": "bb"
},
{
"x": 162.9908,
"y": 175.8232,
"species": "bb"
},
{
"x": 110.5722,
"y": 69.717,
"species": "cc"
},
{
"x": 6.2298,
"y": 56.9771,
"species": "bb"
},
{
"x": 65.9928,
"y": 124.9609,
"species": "cc"
},
{
"x": 39.7739,
"y": 46.9871,
"species": "bb"
},
{
"x": 140.4823,
"y": 47.4213,
"species": "aa"
},
{
"x": 158.2868,
"y": 80.5202,
"species": "cc"
},
{
"x": 34.7401,
"y": 126.6707,
"species": "cc"
},
{
"x": 164.9154,
"y": 3.7471,
"species": "aa"
},
{
"x": 109.9046,
"y": 161.4636,
"species": "aa"
},
{
"x": 0.6448,
"y": 105.922,
"species": "cc"
},
{
"x": 177.2637,
"y": 6.8354,
"species": "bb"
},
{
"x": 176.3663,
"y": 172.7568,
"species": "aa"
},
{
"x": 112.4123,
"y": 130.6178,
"species": "aa"
},
{
"x": 128.7579,
"y": 153.1678,
"species": "bb"
},
{
"x": 4.7477,
"y": 21.5123,
"species": "bb"
},
{
"x": 135.3473,
"y": 76.5698,
"species": "aa"
},
{
"x": 129.9798,
"y": 117.3655,
"species": "aa"
},
{
"x": 139.0381,
"y": 26.8565,
"species": "cc"
},
{
"x": 50.3547,
"y": 130.5945,
"species": "cc"
},
{
"x": 18.0158,
"y": 71.8444,
"species": "cc"
},
{
"x": 69.3483,
"y": 39.2447,
"species": "aa"
},
{
"x": 57.252,
"y": 33.7148,
"species": "aa"
},
{
"x": 96.9298,
"y": 103.8405,
"species": "aa"
},
{
"x": 177.7579,
"y": 148.6714,
"species": "aa"
},
{
"x": 37.3398,
"y": 98.4533,
"species": "cc"
},
{
"x": 42.6322,
"y": 174.0188,
"species": "bb"
},
{
"x": 42.3216,
"y": 41.0024,
"species": "cc"
},
{
"x": 133.0271,
"y": 49.8236,
"species": "aa"
},
{
"x": 164.5657,
"y": 5.1517,
"species": "aa"
},
{
"x": 148.4046,
"y": 98.2258,
"species": "bb"
},
{
"x": 49.4604,
"y": 136.0554,
"species": "cc"
},
{
"x": 160.4656,
"y": 131.1775,
"species": "cc"
},
{
"x": 38.6944,
"y": 11.3958,
"species": "cc"
},
{
"x": 20.9141,
"y": 153.8463,
"species": "bb"
},
{
"x": 142.2279,
"y": 138.4201,
"species": "bb"
},
{
"x": 105.3567,
"y": 143.0803,
"species": "aa"
},
{
"x": 109.9717,
"y": 96.5628,
"species": "cc"
},
{
"x": 133.7485,
"y": 79.8623,
"species": "bb"
},
{
"x": 153.9399,
"y": 136.7833,
"species": "aa"
},
{
"x": 105.2258,
"y": 145.9854,
"species": "aa"
},
{
"x": 25.944,
"y": 77.981,
"species": "bb"
},
{
"x": 15.0307,
"y": 14.2917,
"species": "aa"
},
{
"x": 57.9839,
"y": 146.9822,
"species": "aa"
},
{
"x": 7.2648,
"y": 68.2375,
"species": "bb"
},
{
"x": 87.9369,
"y": 38.1489,
"species": "aa"
},
{
"x": 133.8609,
"y": 126.2052,
"species": "cc"
},
{
"x": 122.1457,
"y": 27.7759,
"species": "aa"
},
{
"x": 25.8971,
"y": 15.9262,
"species": "bb"
},
{
"x": 134.477,
"y": 107.9085,
"species": "bb"
},
{
"x": 134.4256,
"y": 137.8917,
"species": "cc"
},
{
"x": 130.6358,
"y": 173.3223,
"species": "aa"
},
{
"x": 20.1454,
"y": 124.3592,
"species": "cc"
},
{
"x": 14.4046,
"y": 125.9433,
"species": "bb"
},
{
"x": 93.4873,
"y": 140.4053,
"species": "cc"
},
{
"x": 113.0393,
"y": 99.4386,
"species": "cc"
},
{
"x": 49.1815,
"y": 41.9207,
"species": "bb"
},
{
"x": 167.8278,
"y": 19.9772,
"species": "aa"
},
{
"x": 88.0679,
"y": 14.6782,
"species": "bb"
},
{
"x": 103.8538,
"y": 87.1004,
"species": "bb"
},
{
"x": 49.6347,
"y": 0.6613,
"species": "bb"
},
{
"x": 176.136,
"y": 107.0137,
"species": "aa"
},
{
"x": 119.8175,
"y": 8.3927,
"species": "bb"
},
{
"x": 57.2894,
"y": 106.6739,
"species": "bb"
},
{
"x": 85.5562,
"y": 146.3251,
"species": "aa"
},
{
"x": 95.712,
"y": 89.3752,
"species": "cc"
},
{
"x": 62.4735,
"y": 16.8539,
"species": "bb"
},
{
"x": 123.7885,
"y": 94.4542,
"species": "aa"
}
];
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment