Skip to content

Instantly share code, notes, and snippets.

@Sokrates86

Sokrates86/.block

Created October 9, 2016 16:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Sokrates86/be74ebd338f422474528859b2742ef7a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Sokrates86/be74ebd338f422474528859b2742ef7a to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!doctype html>
<html>
<head>
<!--demonstration of using the svg 'use' element to create a pictogram-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
#sliderDiv {
margin:10px;
margin-top:30px;
height:15px;
width:350px;
}
svg {
overflow:none;
padding:10px;
float:left;
width:350px;
height:350px;
}
text {
fill:black;
text-anchor:left;
font-size:12px;
font-family:sans-serif,Helvetica,Arial;
font-weight:bold;
}
.iconPlain {
fill:white;
}
.iconSelected {
fill:black;
}
rect {
fill:white;
}
</style>
</head>
<body>
<script>
function pictoGram() {
//placeholder div for jquery slider
d3.select("body").append("div").attr("id","sliderDiv");
//create svg element
var svgDoc=d3.select("body").append("svg").attr("viewBox","0 0 100 100");
//define an icon store it in svg <defs> elements as a reusable component - this geometry can be generated from Inkscape, Illustrator or similar
svgDoc.append("defs")
.append("g")
.attr("id","iconCustom")
.append("path")
.attr("d","M3.5,2H2.7C3,1.8,3.3,1.5,3.3,1.1c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1c0,0.4,0.2,0.7,0.6,0.9H1.1C0.7,2,0.4,2.3,0.4,2.6v1.9c0,0.3,0.3,0.6,0.6,0.6h0.2c0,0,0,0.1,0,0.1v1.9c0,0.3,0.2,0.6,0.3,0.6h1.3c0.2,0,0.3-0.3,0.3-0.6V5.3c0,0,0-0.1,0-0.1h0.2c0.3,0,0.6-0.3,0.6-0.6V2.6C4.1,2.3,3.8,2,3.5,2z");
//background rectangle
svgDoc.append("rect").attr("width",100).attr("height",50);
//specify the number of columns and rows for pictogram layout
var numCols = 10;
var numRows = 1;
//padding for the grid
var xPadding = 10;
var yPadding = 15;
//horizontal and vertical spacing between the icons
var hBuffer = 9;
var wBuffer = 8;
//generate a d3 range for the total number of required elements
var myIndex=d3.range(numCols*numRows);
//text element to display number of icons highlighted
svgDoc.append("text")
.attr("id","txtValue")
.attr("x",xPadding)
.attr("y",yPadding)
.attr("dy",-3)
.text("0" );
//create group element and create an svg <use> element for each icon
svgDoc.append("g")
.attr("id","pictoLayer")
.selectAll("use")
.data(myIndex)
.enter()
.append("use")
.attr("xlink:href","#iconCustom")
.attr("id",function(d) {
return "icon"+d;
})
.attr("x",function(d) {
var remainder=d % numCols;//calculates the x position (column number) using modulus
return xPadding+(remainder*wBuffer);//apply the buffer and return value
})
.attr("y",function(d) {
var whole=Math.floor(d/numCols)//calculates the y position (row number)
return yPadding+(whole*hBuffer);//apply the buffer and return the value
})
.classed("iconPlain",true);
//create a jquery slider to control the pictogram
$( "#sliderDiv" ).slider({
orientation: "horizontal",
min: 0,
max: 10,
value: 0,
slide: function( event, ui ) {
d3.select("#txtValue").text(ui.value);
d3.selectAll("use").attr("class",function(d,i){
if (d<ui.value) {
return "iconSelected";
} else {
return "iconPlain";
}
});
}
});
};
pictoGram();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment