Skip to content

Instantly share code, notes, and snippets.

@scresawn

scresawn/.block

Last active April 24, 2018 21:00
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 scresawn/8fec768c5fe0b7d0c83af1d4a05cf6b7 to your computer and use it in GitHub Desktop.
Save scresawn/8fec768c5fe0b7d0c83af1d4a05cf6b7 to your computer and use it in GitHub Desktop.
Download ZIP
Bubble attempt Mambo #5
Raw
.block
license: mit
Raw
BIO583_Salmonella_data.csv
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 9
HJ14 Cook's Creek Rt. 11 Hadar Amp Gent Strep Tet 10
HJ15 Cook's Creek Rt. 11 Hadar Amp Gent Strep Tet 9
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
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-quadtree.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-force.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<button><p id="demo" onclick="myFunction()">Antibiotic Resistance.</p></button>
<script>
var buttonToggled = false;
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;
}
function myFunction(){
buttonToggled = !buttonToggled;
var simulation = d3.forceSimulation([])
console.log("Click!");
svg.selectAll("circle").remove();
d3.selectAll("div").remove();
d3.selectAll(".node").remove();
d3.selectAll(".link").remove();
//svg.remove();
nodes = [];
links = [];
var data = [];
d3.csv("BIO583_Salmonella_data.csv", function (error, data) {
if (error) {
console.error("Error getting or parsing the data");
throw error;
}
console.log('reloading data...');
//var data = BIO583_Salmonella_data
var chart = bubbleChart().width(1280).height(720);
d3.select("#demo").data(data).call(chart)
function ticked (e) {
console.log("tick: ", e);
node.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
}
/*var div = d3.select("body")
.selectAll("div")
.data(data)
.enter().append("div");*/
if (buttonToggled == true) {
console.log("buttonToggled: true")
simulation = d3.forceSimulation(data)
.force("charge", d3.forceManyBody().strength([-40]))
.force("y", d3.forceY().y(function(d) { return 0; }))
.force("x", d3.forceX().x(function(d) { return [d.gene_number * 50]}))
.on("tick", ticked);
}
else {
console.log("buttonToggled: false");
simulation = d3.forceSimulation(data)
.force("charge", d3.forceManyBody().strength([-40]))
.force("y", d3.forceY().y(function(d) { return 0; }))
.force("x", d3.forceX().x(function(d) { return 0; }))
.on("tick", ticked);
}
//d3 forceSimulation help https://github.com/d3/d3-force
//also http://d3indepth.com/force-layout/
var scaleRadius = d3.scaleLinear()
.domain([d3.min(data, function (d) {return +d.gene_number}),
d3.max(data, function (d) {return +d.gene_number})])
.range([11,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");});
});
}
myFunction();
//AGAIN, LINKS ARE DOWN HERE:
//d3 forceSimulation help https://github.com/d3/d3-force
//also http://d3indepth.com/force-layout/
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment