Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created April 23, 2019 04:57
Show Gist options
  • Save GerardoFurtado/f4b4608bf07588f2b9291ac74c88f82c to your computer and use it in GitHub Desktop.
Save GerardoFurtado/f4b4608bf07588f2b9291ac74c88f82c to your computer and use it in GitHub Desktop.
Download ZIP
group bar with toggle
Raw
.block
license: mit
Raw
README.md
Raw
drug1.csv
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
Raw
index.html
<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>
Raw
main.js
// Define the div for the tooltip
var tooltipdiv = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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);
nestedData.forEach(function(d){
d.values.sort(function(a,b){
return a.value - b.value
});
});
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 cat2 = nestedData.key;
//var sum = d3.sum(data, (d) => d.count);
var slice = svg.selectAll(".slice")
.data(nestedData)
.enter().append("g")
.attr("class", "g")
.attr("transform",function(d) { return "translate(" + x0(d.key) + ",0)"; });
// var cat2 = slice.attr("d", function(d){return d.values});
// console.log(cat2);
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) {
const parentData = d3.select(this.parentNode).datum();
d3.select(this).style("fill", d3.rgb(color(d.key)).darker(2));
tooltipdiv.transition().duration(200).style("opacity", .9);
tooltipdiv.html("<strong>S Category: </strong>" + d.key +"<br>" +"<strong>Drug Category: </strong> " + parentData.key + "<br>" +"<strong>Count: </strong>" + d.value)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.key));
tooltipdiv.transition()
.duration(500)
.style("opacity", 0);
});
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); });
// ======== Grouped bar text ========
/*
let textOnBar = svg.selectAll("text")
.data(function(d) {
return nestedData[0].values.map(function(d) {
return {y(d.value)};
});
});
textOnBar = textOnBar
.enter()
.append("text")
.attr("fill","#fff")
.attr("font-size",11)
.merge(textOnBar);
textOnBar.transition().duration(durations)
.attr("transform", function(d, i) {
let x0 = x1.bandwidth() * i + 7,
y0 = y(d.value) + 8;
return "translate(" + x0 + "," + y0 + ") rotate(90)";
})*/
var textOnBar = svg.selectAll(".text")
.data(function(d) { return d.values; })
.enter()
.append("text")
.attr("class","label")
.attr("x", (function(d) { return xScale(d.key) + xScale.rangeBand() / 2 ; } ))
.attr("y", function(d) { return yScale(d.value) + 1; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
//Legend
var legend = svg.selectAll(".legend")
//console.log(data[0]);
//.data((function(nestedData) { return nestedData.key }))
.data(nestedData[0].values.map(function(d) { return d.key; }).sort(function(a,b){return a - b}))
// .data(nestedData.values.map(function(d) { return d.key; })).reverse()
//console.log(.data(nestedData.values.map(function(d) { return d.key; })).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
.style("opacity","0");
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d); });
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return d; });
legend.transition().duration(600).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
});
}
drugBarGroup("#drugBar-area");
Raw
style.css
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
/*Tool tip*/
div.tooltip {
position: absolute;
text-align: left;
width: 180px;
padding: 3px;
font: 14px sans-serif;
background: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment