Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created April 21, 2019 10:02
Show Gist options
  • Save GerardoFurtado/80ba2580f758a64046c3e6f513203cd2 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/80ba2580f758a64046c3e6f513203cd2 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
drug.json
[
{
"s_category": 1,
"count": 0,
"drug_cat": 1
},
{
"s_category": 1,
"count": 0,
"drug_cat": 2
},
{
"s_category": 1,
"count": 0,
"drug_cat": 3
},
{
"s_category": 1,
"count": 0,
"drug_cat": 4
},
{
"s_category": 1,
"count": 0,
"drug_cat": 5
},
{
"s_category": 1,
"count": 0,
"drug_cat": 6
},
{
"s_category": 2,
"count": 367,
"drug_cat": 1
},
{
"s_category": 2,
"count": 35,
"drug_cat": 2
},
{
"s_category": 2,
"count": 8,
"drug_cat": 3
},
{
"s_category": 2,
"count": 1,
"drug_cat": 4
},
{
"s_category": 2,
"count": 1,
"drug_cat": 5
},
{
"s_category": 2,
"count": 1,
"drug_cat": 6
},
{
"s_category": 3,
"count": 223,
"drug_cat": 1
},
{
"s_category": 3,
"count": 24,
"drug_cat": 2
},
{
"s_category": 3,
"count": 4,
"drug_cat": 3
},
{
"s_category": 3,
"count": 4,
"drug_cat": 4
},
{
"s_category": 3,
"count": 2,
"drug_cat": 5
},
{
"s_category": 3,
"count": 2,
"drug_cat": 6
},
{
"s_category": 4,
"count": 29,
"drug_cat": 1
},
{
"s_category": 4,
"count": 5,
"drug_cat": 2
},
{
"s_category": 4,
"count": 9,
"drug_cat": 3
},
{
"s_category": 4,
"count": 1,
"drug_cat": 4
},
{
"s_category": 4,
"count": 2,
"drug_cat": 5
},
{
"s_category": 4,
"count": 3,
"drug_cat": 6
},
{
"s_category": 5,
"count": 37,
"drug_cat": 1
},
{
"s_category": 5,
"count": 1,
"drug_cat": 2
},
{
"s_category": 5,
"count": 3,
"drug_cat": 3
},
{
"s_category": 5,
"count": 3,
"drug_cat": 4
},
{
"s_category": 5,
"count": 2,
"drug_cat": 5
},
{
"s_category": 5,
"count": 26,
"drug_cat": 6
}
]
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.json("drug.json", function(error, data) {
var categoriesNames = data.map(function(d) { return d.s_category; });
var rateNames = data.map(function(d) { return d.drug_cat; });
console.log(categoriesNames);
x0.domain(categoriesNames);
x1.domain(rateNames).rangeRound([0, x0.bandwidth()]);
const nestedData = d3.nest()
.key(function(d){return d.s_category})
.entries(data);
y.domain([0, d3.max(nestedData, function(s_category) {
return d3.max(s_category.values,
function(d) {
return d.count; }); })]);
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.drug_cat); })
.style("fill", function(d) { return color(d.drug_cat) })
.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.drug_cat)).darker(2));
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.drug_cat));
});
slice.selectAll("rect")
.transition()
.delay(function (d) {return Math.random()*1000;})
.duration(1000)
.attr("y", function(d) { return y(d.count); })
.attr("height", function(d) { return height - y(d.count); });
});
}
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