Last active
July 4, 2017 14:41
-
-
Save guillaumechaumet/13e4e9d64e879fd3a27aa7ebf03e6259 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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