Built with blockbuilder.org
forked from lydiawawa's block: group bar
forked from GerardoFurtado's block: group bar
license: mit |
Built with blockbuilder.org
forked from lydiawawa's block: group bar
forked from GerardoFurtado's block: group bar
s_category | drug_cat | |
---|---|---|
4 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
4 | 1 | |
3 | 1 | |
4 | 6 | |
3 | 1 | |
4 | 1 | |
3 | 6 | |
2 | 1 | |
2 | 1 | |
4 | 4 | |
2 | 1 | |
4 | 2 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
5 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
4 | 1 | |
4 | 1 | |
3 | 1 | |
2 | 2 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
5 | 1 | |
4 | 5 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 1 | |
3 | 2 | |
2 | 2 | |
2 | 2 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 3 | |
3 | 1 | |
5 | 1 | |
2 | 1 | |
5 | 6 | |
4 | 3 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
4 | 1 | |
3 | 1 | |
2 | 2 | |
3 | 1 | |
5 | 6 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 2 | |
3 | 4 | |
3 | 5 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 2 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
4 | 1 | |
3 | 1 | |
5 | 6 | |
3 | 1 | |
2 | 1 | |
3 | 2 | |
4 | 1 | |
4 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
4 | 1 | |
2 | 1 | |
4 | 3 | |
5 | 6 | |
2 | 1 | |
5 | 6 | |
5 | 4 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 3 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
2 | 1 | |
5 | 6 | |
4 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 3 | |
2 | 2 | |
2 | 1 | |
4 | 2 | |
2 | 2 | |
5 | 6 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 2 | |
2 | 2 | |
3 | 1 | |
3 | 1 | |
4 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
5 | 5 | |
3 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
5 | 6 | |
2 | 2 | |
2 | 1 | |
3 | 4 | |
2 | 3 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 2 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 3 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 2 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
5 | 1 | |
2 | 2 | |
2 | 1 | |
4 | 3 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
4 | 5 | |
2 | 1 | |
2 | 2 | |
2 | 2 | |
2 | 1 | |
2 | 6 | |
2 | 1 | |
2 | 1 | |
4 | 2 | |
5 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
5 | 4 | |
4 | 6 | |
2 | 1 | |
3 | 2 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
4 | 2 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 1 | |
5 | 4 | |
2 | 3 | |
5 | 6 | |
3 | 3 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
2 | 1 | |
3 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 4 | |
3 | 2 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 2 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 3 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 3 | |
2 | 1 | |
3 | 1 | |
5 | 6 | |
4 | 2 | |
2 | 1 | |
4 | 1 | |
3 | 1 | |
2 | 1 | |
4 | 6 | |
3 | 1 | |
3 | 3 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 6 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
4 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 2 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
4 | 3 | |
3 | 2 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 2 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 3 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 2 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
5 | 6 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 4 | |
3 | 1 | |
2 | 1 | |
3 | 2 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
4 | 1 | |
4 | 1 | |
3 | 2 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 5 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
5 | 3 | |
3 | 1 | |
5 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 6 | |
5 | 3 | |
3 | 2 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
4 | 3 | |
2 | 1 | |
3 | 1 | |
3 | 3 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 2 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
2 | 1 | |
5 | 6 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 1 | |
3 | 2 | |
2 | 1 | |
5 | 6 | |
2 | 1 | |
5 | 6 | |
3 | 4 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
4 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 2 | |
2 | 1 | |
4 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
4 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
3 | 2 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
4 | 1 | |
3 | 1 | |
5 | 6 | |
3 | 1 | |
4 | 1 | |
2 | 2 | |
5 | 6 | |
3 | 1 | |
2 | 1 | |
4 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 1 | |
2 | 1 | |
2 | 2 | |
3 | 5 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 3 | |
5 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 2 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 6 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
4 | 3 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
5 | 5 | |
5 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 2 | |
3 | 1 | |
5 | 1 | |
4 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 2 | |
2 | 1 | |
2 | 3 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 2 | |
2 | 1 | |
2 | 3 | |
3 | 1 | |
2 | 1 | |
3 | 2 | |
2 | 1 | |
2 | 1 | |
2 | 3 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 6 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
5 | 1 | |
3 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
2 | 1 | |
2 | 1 | |
3 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 | |
5 | 1 | |
2 | 1 | |
2 | 1 |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Untitled Document</title> | |
<!-- Bootstrap --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> | |
<link rel="shortcut icon" href="icons8-bookmark-40.png"> | |
<!-- Custom styling --> | |
<link rel="stylesheet" href="style.css"> | |
<!-- JS libraries --> | |
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<div class="col-md-9" id="drugBar-area"></div> | |
<!-- Custom JS --> | |
<script src="main.js"></script> | |
</body> | |
</html> |
function drugBarGroup(chartArea){ | |
d3.select('#drugBar-area').html(''); | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x0 = d3.scaleBand() | |
.rangeRound([0, width]).padding(0.2); | |
var x1 = d3.scaleBand(); | |
var y = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom() | |
.scale(x0) | |
.tickSize(0); | |
var yAxis = d3.axisLeft() | |
.scale(y); | |
var color = d3.scaleOrdinal() | |
.range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]); | |
var svg = d3.select('body').append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("drug1.csv", function(error, data) { | |
if (error) throw error; | |
// Format the data | |
data.forEach(function(d) { | |
d.s_category = d.s_category; | |
d.drug_cat = d.drug_cat; | |
}); | |
var categoriesNames = data.map(function(d) { return d.drug_cat; }).sort(function(a,b){return a - b}); | |
var rateNames = data.map(function(d) { return d.s_category; }); | |
x0.domain(categoriesNames); | |
x1.domain(rateNames).rangeRound([0, x0.bandwidth()]); | |
const nestedData = d3.nest() | |
.key(function(d){return d.drug_cat}) | |
.key(function(d){return d.s_category}) | |
.rollup(function(leaves) { return leaves.length; }) | |
.entries(data); | |
y.domain([0, d3.max(nestedData, function(s_category) { | |
return d3.max(s_category.values, | |
function(d) { | |
return d.value; }); })]); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.style('opacity','0') | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.style('font-weight','bold') | |
.text("Value"); | |
svg.select('.y').transition().duration(500).delay(1300).style('opacity','1'); | |
var slice = svg.selectAll(".slice") | |
.data(nestedData) | |
.enter().append("g") | |
.attr("class", "g") | |
.attr("transform",function(d) { return "translate(" + x0(d.key) + ",0)"; }); | |
slice.selectAll("rect") | |
.data(function(d) { return d.values; }) | |
.enter().append("rect") | |
.attr("width", x1.bandwidth()) | |
.attr("x", function(d) { return x1(d.key); }) | |
.style("fill", function(d) { return color(d.key) }) | |
.attr("y", function(d) { return y(0); }) | |
.attr("height", function(d) { return height - y(0); }) | |
.on("mouseover", function(d) { | |
d3.select(this).style("fill", d3.rgb(color(d.key)).darker(2)); | |
}) | |
.on("mouseout", function(d) { | |
d3.select(this).style("fill", color(d.key)); | |
}); | |
slice.selectAll("rect") | |
.transition() | |
.delay(function (d) {return Math.random()*1000;}) | |
.duration(1000) | |
.attr("y", function(d) { return y(d.value); }) | |
.attr("height", function(d) { return height - y(d.value); }); | |
}); | |
} | |
drugBarGroup("#drugBar-area"); |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} |