Skip to content

Instantly share code, notes, and snippets.

@greenmna

greenmna/.block

Last active April 5, 2018 16:04
Show Gist options
  • Save greenmna/846182faa6e41de5aec62d25fc05f732 to your computer and use it in GitHub Desktop.
Save greenmna/846182faa6e41de5aec62d25fc05f732 to your computer and use it in GitHub Desktop.
Download ZIP
Bubbles-sizes-me
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Continental Density People/Square Mile</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script src="index.js"></script>
<style>
.bubbleChart {
min-width: 400px;
max-width: 800px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg{
background: #dbfefc;
}
</style>
</head>
<body style="background: #FFFFFF">
<div class="bubbleChart"/>
</body>
</html>
Raw
index.js
var salmonella_data=[]
d3.csv("Salmonella_data.csv", function(data){
data.forEach(function(d){
//console.log(d)
salmonella_data.push({"Isolate": d.Isolate, "Source": d.Source, "Serotype": d.Serotype, "AMR Phenotype": d.AMR_Phenotype})})
//console.log(salmonella_data)
})
console.log(salmonella_data)
$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
//container: => use @default
size: 600,
//viewBoxSize: => use @default
innerRadius: 600 / 3,
//outerRadius: => use @default
radiusMin: 40,
//radiusMax: 100,
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
data: {
items: [
{text: "Asia", count: "242"},
{text: "Africa", count: "89"},
{text: "Europe", count: "192"},
{text: "North America", count: "49"},
{text: "South America", count: "57"},
{text: "Australia", count: "12"},
{text: "World", count: "118"},
{text: "Antarctica", count: "0"},
],
eval: function (id) {return id.Isolate},
eval: function (place) {return place.Source},
eval: function (type) {return type.Serotype},
eval: function (res) {return res.AMR_Phenotype},
eval: function (item) {return item.count;},
classed: function (item) {return item.text.split(" ").join("");}
},
plugins: [
{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
//"font-weight": "700",
"text-anchor": "middle",
"fill": "black"
},
attr: {dy: "65px"},
centralClick: function() {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: {count: true},
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "black"
},
attr: {
dy: "0px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
{// Line #1
textField: "text",
classed: {text: true},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "black"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
}
],
centralFormat: [
{// Line #0
style: {"font-size": "50px"},
attr: {}
},
{// Line #1
style: {"font-size": "30px"},
attr: {dy: "40px"}
}
]
}
}]
});
});
Raw
Salmonella_data.csv
Isolate Source Serotype AMR Phenotype MLST rMLST cgMLST wgMLST Count
HJ1 Muddy Creek Give - 654 New 80760 118467 10
HJ2 Muddy Creek Give - 654 New 80760 94902 20
HJ3 Pleasant Run Uganda Strep Sulf Tet 684 8441 80845 94997 30
HJ4 Pleasant Run Uganda - 684 8441 70491 94903 40
HJ5 Cook's Creek Rt. 11 Litchfield - 214 7970 80915 95074 50
HJ6 Cook's Creek Rt. 11 Schwarzengrund - 96 1430 80849 95001
HJ7 Pleasant Run Muenster Strep Sulf Tet 321 3730 80796 94943
HJ8 Pleasant Run Muenster Strep Sulf Tet 321 3730 80796 94954
HJ9 Cook's Creek Rt. 704 Mbandaka - 413 3668 80794 94941
HJ10 Muddy Creek Anatum Tet 64 3700 80537 94650
HJ11 Cook's Creek Rt. 704 Schwarzengrund - 96 1430 80539 94651
HJ12 Cook's Creek Rt. 704 Senftenberg - 14 7973 80536 94654
HJ13 Cook's Creek Rt. 11 Hadar Amp Gent Strep Tet 33 3764 80533 94647
HJ14 Cook's Creek Rt. 11 Hadar Amp Gent Strep Tet 33 3764 80527 94646
HJ15 Cook's Creek Rt. 11 Hadar Amp Gent Strep Tet 33 3764 80538 94653
HJ16 Poultry Litter Cerro - 367 New 80542 118418
HJ17 Poultry Litter Typhimurium Gent Strep Sulf Tet 19 1369 80529 94648
HJ18 Poultry Litter Typhimurium Gent Strep Sulf Tet 19 1369 80535 94652
HJ19 Poultry Litter Typhimurium Gent Strep Sulf Tet 19 1369 80530 94655
HJ20 Poultry Litter Typhimurium Gent Strep Sulf Tet 19 1369 80534 94642
HJ21 Cook's Creek Rt. 11 Typhimurium - 19 1369 80528 94643
HJ22 Cook's Creek Rt. 704 Muenchen - 112 60549 80532 118420
HJ23 Cook's Creek Rt. 704 Muenchen - 112 60549 80526 94644
HJ27 Cook's Creek Rt. 704 Cerro - 367 New 101373 124055
HJ28 Cook's Creek Rt. 704 Cerro - 367 New 101373 124080
HJ29 Cook's Creek Rt. 704 Anatum - 64 3700 11895 124504
HJ30 Cook's Creek Park Braenderup - 22 26853 4601 124041
HJ31 Cook's Creek Park Braenderup - 22 26853 101420 124092
HJ32 Cook's Creek Park Braenderup - 22 26853 4601 132745
HJ33 Muddy Creek Montevideo - 138 8182 101411 124094
HJ38 Cook's Creek Park Typhimurium - - - - -
HJ39 Cook's Creek Park Typhimurium - - - - -
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment