Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://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">
#svg-handgun {
display: none;
}
#sliderDiv {
margin:10px;
margin-top:30px;
height:15px;
width:350px;
}
svg {
overflow:none;
padding:10px;
float:left;
width:450px;
height:450px;
}
text {
fill:orange;
text-anchor:left;
font-size:12px;
font-family:sans-serif,Helvetica,Arial;
font-weight:bold;
}
.iconPlain {
fill:white;
}
.iconSelected {
fill:orange;
}
rect {
fill:#555555;
}
</style>
</head>
<body>
<script>
//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");
var gun = "";
//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("fill", "#f2f2f2")
// .attr("stroke", "#b7b7b7")
// .attr("stroke-width", "0.5px")
.attr("d", "M-7.88721441,-52.9064162 L-1.70226973,-52.8982385 L-1.71139247,-53 L1.34688104,-52.8834911 C1.34688104,-52.8834911 1.49878159,-52.8298998 1.56802733,-52.7743329 C1.63727308,-52.7187661 1.68657715,-52.5572111 1.68657715,-52.5572111 C1.68657715,-52.5572111 1.73721066,-52.5482294 1.8350624,-52.5482294 C1.93291413,-52.5482294 2.04481672,-52.6383447 2.04481672,-52.6383447 C2.04481672,-52.6383447 2.07546272,-52.6619818 2.16105147,-52.6051056 C2.24664022,-52.5482294 2.16923443,-52.4100589 2.16923443,-52.4100589 C2.16923443,-52.4100589 1.93930922,-52.1276305 1.93930922,-51.892063 C1.93930922,-51.6564954 1.96362889,-51.5861353 2.06643166,-51.4939527 C2.16923443,-51.4017701 2.51174988,-51.3774667 2.51174988,-51.3774667 C2.51174988,-51.3774667 2.78032068,-51.3134236 2.88376525,-51.2583851 C2.98720982,-51.2033466 3,-51.1567614 3,-51.1160568 C3,-51.0753522 2.98237339,-51.0323505 2.90267546,-51.0080242 C2.82297753,-50.983698 2.15023254,-50.9901069 2.15023254,-50.9901069 C2.15023254,-50.9901069 1.7559375,-50.942465 1.66198242,-50.8259791 C1.56802733,-50.7094932 1.51097581,-50.684294 1.47418686,-50.4448903 C1.4373979,-50.2054866 1.47189471,-50.1156241 1.47189471,-50.1156241 L1.38834597,-50.1150957 L2.07454586,-48.2876612 C2.07454586,-48.2876612 2.27538373,-47.9903706 2.27538373,-47.6529267 C2.27538373,-47.3154828 2.10090554,-47.1413626 2.10090554,-47.1413626 L1.60711045,-47.1413626 L1.60711045,-47.000114 L-0.676717687,-47.000114 C-0.676717687,-47.000114 -0.725242295,-46.9950374 -0.725242295,-47.0526486 C-0.725242295,-47.1102599 -0.648363702,-47.1635296 -0.648363702,-47.1635296 C-0.648363702,-47.1635296 -0.712245824,-47.2603294 -0.632800028,-47.4095949 C-0.553354231,-47.5588605 -0.481289145,-47.6387536 -0.481289145,-47.7365411 C-0.481289145,-47.8343286 -0.799874584,-49.4320302 -0.799874584,-49.4320302 C-0.799874584,-49.4320302 -0.809593285,-49.554948 -0.879343302,-49.6693895 C-0.94909332,-49.783831 -1.25213801,-49.7530958 -1.25213801,-49.7530958 C-1.25213801,-49.7530958 -2.71872208,-49.7479273 -2.76112679,-49.9120781 C-2.8035315,-50.0762288 -2.68750305,-50.2691622 -2.78381904,-50.5741021 C-2.88013504,-50.8790421 -2.98117286,-51.2692504 -3.74179874,-51.2692504 L-7.44870584,-51.2692504 C-7.44870584,-51.2692504 -7.52551369,-51.2405826 -7.59501158,-51.3672676 C-7.66450946,-51.4939527 -7.98027555,-52.2649971 -7.98027555,-52.2649971 C-7.98027555,-52.2649971 -8.02238228,-52.5277393 -7.98355332,-52.6660477 C-7.94472436,-52.804356 -7.88721441,-52.9064162 -7.88721441,-52.9064162 Z");
//background rectangle
svgDoc.append("rect").attr("width",100).attr("height",100);
//specify the number of columns and rows for pictogram layout
var numCols = 7;
var numRows = 12;
//padding for the grid
var xPadding = 14;
var yPadding = 60;
//horizontal and vertical spacing between the icons
var hBuffer = 7;
var wBuffer = 12;
//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: numCols*numRows,
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";
}
});
}
});
</script>
</body>