Built with blockbuilder.org
Last active
April 24, 2018 14:24
-
-
Save greenmna/58a26dc56edbe1c2592bb62b78b4c1bd to your computer and use it in GitHub Desktop.
Bubble attempt Mambo #5
This file contains 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
license: mit |
This file contains 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
Isolate | Source | Serotype | AMR_Phenotype | gene_number | |
---|---|---|---|---|---|
HJ1 | Muddy Creek | Give | - | 0 | |
HJ2 | Muddy Creek | Give | - | 0 | |
HJ3 | Pleasant Run | Uganda | Strep Sulf Tet | 0 | |
HJ4 | Pleasant Run | Uganda | - | 0 | |
HJ5 | Cook's Creek Rt. 11 | Litchfield | - | 0 | |
HJ6 | Cook's Creek Rt. 11 | Schwarzengrund | - | 0 | |
HJ7 | Pleasant Run | Muenster | Strep Sulf Tet | 4 | |
HJ8 | Pleasant Run | Muenster | Strep Sulf Tet | 4 | |
HJ9 | Cook's Creek Rt. 704 | Mbandaka | - | 0 | |
HJ10 | Muddy Creek | Anatum | Tet | 1 | |
HJ11 | Cook's Creek Rt. 704 | Schwarzengrund | - | 0 | |
HJ12 | Cook's Creek Rt. 704 | Senftenberg | - | 0 | |
HJ13 | Cook's Creek Rt. 11 | Hadar | Amp Gent Strep Tet | 6 | |
HJ14 | Cook's Creek Rt. 11 | Hadar | Amp Gent Strep Tet | 6 | |
HJ15 | Cook's Creek Rt. 11 | Hadar | Amp Gent Strep Tet | 6 | |
HJ16 | Poultry Litter | Cerro | - | 0 | |
HJ17 | Poultry Litter | Typhimurium | Gent Strep Sulf Tet | 6 | |
HJ18 | Poultry Litter | Typhimurium | Gent Strep Sulf Tet | 6 | |
HJ19 | Poultry Litter | Typhimurium | Gent Strep Sulf Tet | 6 | |
HJ20 | Poultry Litter | Typhimurium | Gent Strep Sulf Tet | 6 | |
HJ21 | Cook's Creek Rt. 11 | Typhimurium | - | 6 | |
HJ22 | Cook's Creek Rt. 704 | Muenchen | - | 0 | |
HJ23 | Cook's Creek Rt. 704 | Muenchen | - | 0 | |
HJ24 | Pleasant Run | Montevideo | - | 0 | |
HJ25 | Pleasant Run | Montevideo | Strep | 0 | |
HJ26 | Muddy Creek | Senftenberg | - | 0 | |
HJ27 | Cook's Creek Rt. 704 | Cerro | - | 0 | |
HJ28 | Cook's Creek Rt. 704 | Cerro | - | 0 | |
HJ29 | Cook's Creek Rt. 704 | Anatum | - | 0 | |
HJ30 | Cook's Creek Park | Braenderup | - | 0 | |
HJ31 | Cook's Creek Park | Braenderup | - | 0 | |
HJ32 | Cook's Creek Park | Braenderup | - | 0 | |
HJ33 | Muddy Creek | Montevideo | - | 0 | |
HJ38 | Cook's Creek Park | Typhimurium | - | 0 | |
HJ39 | Cook's Creek Park | Typhimurium | - | 0 |
This file contains 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> | |
<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> | |
<script> | |
var svg = d3.select("body").append("svg") | |
.attr("width", 1280) | |
.attr("height", 720) | |
.attr("id", "chart"); | |
var bubbleChart = function (){ | |
var width = 1280 | |
height = 720; | |
function chart (selection){ | |
tooltip = d3.select("body") | |
.append("div") | |
.style("position", "absolute") | |
.style("visibility", "visible") | |
.style("color", "white") | |
.style("padding", "8px") | |
.style("background-color", "#626D71") | |
.style("border-radius", "6px") | |
.style("text-align", "center") | |
.style("font-family", "monospace") | |
.style("width", "100px") | |
.text(""); | |
} | |
chart.width = function (value) { | |
if (!arguments.length) {return width;} | |
width = value; | |
return chart; | |
} | |
chart.height = function (value){ | |
if (!arguments.length){return height;} | |
height = value | |
return chart; | |
} | |
return chart; | |
} | |
d3.csv("BIO583_Salmonella_data.csv", function (error, data) { | |
if (error) { | |
console.error("Error getting or parsing the data"); | |
throw error; | |
} | |
//var data = BIO583_Salmonella_data | |
var chart = bubbleChart().width(1280).height(720); | |
d3.select("#chart").data(data).call(chart) | |
/*var div = d3.select("body") | |
.selectAll("div") | |
.data(data) | |
.enter().append("div");*/ | |
function ticked (e) { | |
node.attr("cx", function (d) { return d.x; }) | |
.attr("cy", function (d) { return d.y; }) | |
} | |
var simulation = d3.forceSimulation(data) | |
.force("charge", d3.forceManyBody().strength([-100])) | |
.force("x", d3.forceX()) | |
.force("y", d3.forceY()) | |
.on("tick", ticked); | |
var scaleRadius = d3.scaleLinear() | |
.domain([d3.min(data, function (d) {return +d.gene_number}), | |
d3.max(data, function (d) {return +d.gene_number})]) | |
.range([10,22]) | |
var colorCircles = d3.scaleOrdinal(d3.schemeCategory20); | |
var node = svg.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle") | |
.attr("r", function (d) {return scaleRadius(d.gene_number)}) | |
.style("fill", function (d) {return colorCircles(d.Serotype)}) | |
.attr("transform", "translate(" + [800 / 2, 480 / 2] + ")") | |
.on("mouseover", function(d) { | |
tooltip.html(d.Isolate +"<br>"+ d.Serotype+"<br>"+d.gene_number); | |
return tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", function () { | |
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left", (d3.event.pageX+10)+"px"); | |
}) | |
.on("mouseout", function () {return tooltip.style("visibility", "hidden");}); | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment