Old school D3 from simpler times

All examples By author By category About

jermspeaks

Full window Github gist

Gun Pictogram

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>

https://d3js.org/d3.v3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js

https://cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.min.js