Skip to content

Instantly share code, notes, and snippets.

@j3py

j3py/YqKImXNCjo.gif

Last active April 24, 2017 02:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save j3py/dcbbe34b63d696ddc49d40d45e6f6bb6 to your computer and use it in GitHub Desktop.
Save j3py/dcbbe34b63d696ddc49d40d45e6f6bb6 to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow Bar Chart of Your Github Language Stats (see comments in JS file) https://bl.ocks.org/j3py
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="rainbowchart.css">
</head>
<body>
<svg width="500" height="400"></svg>
<div class="button">
<a id="toggle" class="regPad btnColors">Turn color wave off</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
<script src="rainbowchart.js"></script>
</body>
</html>
Raw
rainbowchart.css
body {
background-color: #E2E1E8;
}
.bar {
fill: #CAFF0A;
}
.button {
margin: 30px;
height: 60px;
width: 220px;
}
.regPad {
padding: 10px;
color: #FFF;
background-color: #E600FF;
box-shadow: 0px 0px 0px 1px #706F73;
}
.btnColors {
color: #FFF;
background-color: #E8720C;
}
#toggle {
border-radius: 25px;
cursor: pointer;
}
#toggle:hover {
color: #706F73;
background-color: #FFF;
}
.smPad {
padding: 7px;
margin-left: 2px;
box-shadow: 0px 0px 4px 4px #818185;
}
div.tooltip {
position: absolute;
text-align: center;
width: 37px;
height: 37px;
padding: 3%;
font: 12px sans-serif;
background: #606060;
border: 0px;
border-radius: 50px;
pointer-events: none;
}
Raw
rainbowchart.js
var grapher = function(rawData) {
var languages = Object.keys(rawData);
var data = languages.map(function(language) {
return { 'language': language, 'frequency': rawData[language] };
});
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
// Define the div for the tooltip
var tip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
/* set y to scaleLinear() if you prefer, then start domain at 0 */
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLog().rangeRound([height, 0]);
/* ************************************************************ */
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function(d) { return d.language; }));
/* set the beginning of your log scale if you need to */
y.domain([750, d3.max(data, function(d) { return d.frequency; })]);
/* ************************************************** */
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, ''))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.language); })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.frequency); });
var bars = d3.selectAll(".bar");
var count = 0;
var barFun = function() {
var colors = [
"#0C8EE8",
"#E600FF",
"#E8720C",
"#CAFF0A"
];
if (count > 3) {
count = 0;
}
bars.each(function(d, i) {
var self = d3.select(this);
self.transition()
.delay(i*150)
.style("fill", colors[count])
.duration(150)
.ease(d3.easeLinear);
});
count++;
};
barFun();
var barFunInterval;
var turnOnBarFun = function() {
barFunInterval = setInterval(barFun, (data.length * 150) + 150);
return;
}
turnOnBarFun();
bars.each(function(d, i) {
var self = d3.select(this);
self.on('mouseover', function() {
let color = self.style('fill');
self.style('opacity', 0.45);
tip.transition()
.duration(200)
.style("opacity", 1.0);
tip.html(d.language + ":<br/>" + d.frequency + ' bytes')
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 90) + "px")
.style('color', color);
}).on('mouseout', function() {
self.style('opacity', 1.0);
tip.transition()
.duration(500)
.style("opacity", 0);
});
});
var toggle = document.getElementById('toggle');
var tflag = true;
toggle.addEventListener('click', function() {
toggle.classList.toggle('regPad');
toggle.classList.toggle('smPad');
toggle.classList.toggle('btnColors');
if (tflag) {
toggle.innerText = "Turn color wave on";
clearInterval(barFunInterval);
} else {
toggle.innerText = "Turn color wave off";
turnOnBarFun();
}
tflag = tflag ? false : true;
setTimeout(function() {
toggle.classList.toggle('regPad');
toggle.classList.toggle('smPad');
}, 150);
});
};
var respData = {};
/* put in your username instead of "j3py"! */
var urls = ['https://api.github.com/users/j3py/repos'];
/* *************************************** */
var requester = function(url, flag, callback) {
var gitReq = new XMLHttpRequest();
gitReq.onload = function() {
if ((gitReq.status >= 200) && (gitReq.status <= 400)) {
var gitJson = JSON.parse(gitReq.response);
if (flag) {
var langArray = gitJson.map(function(repo) {
return repo.languages_url;
});
langArray.forEach(function(langUrl, i) {
if (i < langArray.length-1) {
return requester(langUrl, false, false);
}
if (i === langArray.length-1) {
return requester(langUrl, false, function(rawData) {
return grapher(rawData);
});
}
});
} else {
var keys = Object.keys(respData);
for (let lang in gitJson) {
if (keys.includes(lang)) {
respData[lang] = respData[lang] + gitJson[lang];
} else {
respData[lang] = gitJson[lang];
}
}
}
if (callback) {
return callback(respData);
}
} else {
return alert('Response status:', gitReq.response);
}
};
gitReq.open('GET', url);
gitReq.send();
};
urls.forEach(function(url) {
requester(url, true, false);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment