Built with blockbuilder.org
Last active
October 7, 2016 03:44
-
-
Save jermspeaks/25f4772e1b65b5d12997c351ffa491ea to your computer and use it in GitHub Desktop.
Gun Pictogram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment