Skip to content

Instantly share code, notes, and snippets.

@FrissAnalytics

FrissAnalytics/.block

Last active October 6, 2018 18:22
Show Gist options
  • Save FrissAnalytics/a8de91b7f4660bbccc587e1d87919646 to your computer and use it in GitHub Desktop.
Save FrissAnalytics/a8de91b7f4660bbccc587e1d87919646 to your computer and use it in GitHub Desktop.
Download ZIP
D3 & Font-Awesome
Raw
.block
license: mit
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var icons = ["twitter-square", "facebook-square", "linkedin-square", "youtube-square", "github-square", "google-plus-square"];
function iconClicked(icon){
console.log(icon + " clicked");
}
var defaultStyle = {
padding: "0px 5px 0px 5px",
margin: "5px",
"border-radius": "16px",
"background-color": "white",
"stroke": "none",
"cursor": "pointer"
};
var hoveredStyle = { "background-color": "lightgray" };
var clickedStyle = { "background-color": "gray" };
d3.select("body").selectAll("i").data(icons)
.enter().append("i")
.attr("class", function(d){
return "icon fa fa-5x fa-" + d;
})
.style(defaultStyle)
.on("mouseover", function(){
d3.select(this).style(hoveredStyle);
})
.on("mouseout", function(){
d3.select(this).style(defaultStyle);
})
.on("mousedown", function(d){
d3.select(this).style(clickedStyle);
iconClicked(d);
})
.on("mouseup", function(){
d3.select(this).style(hoveredStyle);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment