Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created April 22, 2019 04:00
Show Gist options
  • Save GerardoFurtado/f4c825a5f8c92e87cc5a81591ba1f7c9 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/f4c825a5f8c92e87cc5a81591ba1f7c9 to your computer and use it in GitHub Desktop.
Download ZIP
group bar
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
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.s_category; });
var rateNames = data.map(function(d) { return d.drug_cat; });
x0.domain(categoriesNames);
x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
const nestedData = d3.nest()
.key(function(d){return d.s_category})
.key(function(d){return d.drug_cat})
.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");
Raw
style.css
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment