Skip to content

Instantly share code, notes, and snippets.

@justinbowes

justinbowes/.block

Last active January 14, 2020 08:49
Show Gist options
  • Save justinbowes/0af47cb722ae6b4c8bc653218cd537d8 to your computer and use it in GitHub Desktop.
Save justinbowes/0af47cb722ae6b4c8bc653218cd537d8 to your computer and use it in GitHub Desktop.
Download ZIP
pictogram scratch
Raw
.block
license: mit
Raw
index.html
<!doctype html>
<html>
<head>
<!--demonstration of using the svg 'use' element to create a pictogram-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="https://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:300px;
}
svg {
overflow:none;
padding:10px;
float:left;
width:400px;
height:400px;
}
text {
fill:#303034;
text-anchor:left;
font-size:6px;
font-family:sans-serif,Helvetica,Arial;
font-weight:light;
}
.iconPlain {
fill:none;
}
.iconS1 {
fill:#dbff9e;
}
.iconS2 {
fill:#76b900;
}
rect {
fill:#ffffff;
}
</style>
</head>
<body>
<script>
$ = jQuery;
//placeholder div for jquery slider
var controls = d3.select("body").append("div");
var controlCount = 2;
for (var i = 0; i < controlCount; ++i) {
controls.append("div").attr("class","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") */
.append('g').attr(
'transform',
'translate(0,0) scale(0.020000, 0.020000)')
.attr('stroke', 'none')
.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");
*/
.append('path').attr('d', "M 6.4082031 0 C 6.0999199 -0.00329128 5.7948427 0.010297011 5.5644531 0.041015625 C 4.5068551 0.1770552 3.4055744 0.62099161 2.5761719 1.2441406 C 2.1022276 1.5995989 1.4390344 2.288714 1.140625 2.7363281 C -0.28998471 4.8778543 -0.3810144 7.7479727 0.90039062 10.130859 C 1.9887072 12.1539 3.8482999 13.569506 6.046875 14.039062 C 6.6700239 14.175103 8.0618418 14.189278 8.6367188 14.066406 C 10.923061 13.579297 12.687545 12.017441 13.416016 9.8320312 C 13.683706 9.0333472 13.744141 8.6250671 13.744141 7.6289062 C 13.744141 6.6678525 13.70476 6.3436059 13.476562 5.5449219 C 12.647159 2.6529812 10.186835 0.47110085 7.2773438 0.05859375 C 7.0294006 0.023486763 6.7164863 0.00329128 6.4082031 0 z M 27.994141 0.83007812 C 27.751134 0.83336941 27.506577 0.86140202 27.322266 0.9140625 C 25.834607 1.3397348 24.953213 2.4409766 24.667969 4.2226562 C 24.584595 4.7580379 24.611477 5.8292229 24.716797 6.2636719 C 24.892332 6.9526465 25.19793 7.5016293 25.671875 7.9667969 C 26.027332 8.3178667 26.132798 8.3923423 26.470703 8.5722656 C 27.365931 9.0374332 28.445271 8.9150549 29.458984 8.2304688 C 30.516583 7.5107754 31.119041 6.0317781 31.048828 4.3203125 C 31.009337 3.420696 30.851503 2.8624438 30.460938 2.265625 C 30.013324 1.5810389 29.344743 1.0720193 28.660156 0.89648438 C 28.478039 0.84821227 28.237147 0.82678684 27.994141 0.83007812 z M 19.666016 0.90039062 C 19.444403 0.89216242 19.220216 0.89602688 19.046875 0.91796875 C 18.866951 0.93991062 18.55538 1.0157236 18.353516 1.0859375 C 17.225704 1.4721144 16.373135 2.3853779 16.087891 3.5175781 C 16.013291 3.8291527 16.005891 3.9642102 16.023438 4.5566406 C 16.058544 5.4474804 16.184642 5.9572 16.583984 6.7734375 C 17.066706 7.7564331 17.772643 8.4408361 18.597656 8.7304688 C 18.843406 8.8182368 18.970985 8.8300781 19.519531 8.8300781 C 20.090019 8.8300781 20.199711 8.818699 20.550781 8.7089844 C 21.498671 8.4193525 22.236461 7.812282 22.679688 6.9609375 C 22.947378 6.4474979 23.038581 6.0444926 23.042969 5.390625 C 23.047357 4.003899 22.495271 2.6398263 21.560547 1.7226562 C 21.178759 1.3452561 20.669354 1.0506581 20.265625 0.96289062 C 20.105449 0.92997782 19.887628 0.90861883 19.666016 0.90039062 z M 35.599609 4.09375 C 35.320948 4.0855218 35.043927 4.1011297 34.857422 4.140625 C 33.339045 4.4565879 31.939453 6.3476595 31.939453 8.0898438 C 31.939453 8.5988951 32.004709 8.8844172 32.228516 9.3320312 C 32.399662 9.6787129 32.829557 10.178537 33.154297 10.402344 C 34.229449 11.13959 35.674293 11.182633 36.701172 10.498047 C 37.232165 10.146977 37.845207 9.4189611 38.1875 8.734375 C 38.521016 8.0717306 38.701049 7.1813345 38.613281 6.6152344 C 38.507961 5.9482017 38.272242 5.4909911 37.767578 4.9863281 C 37.499887 4.7186375 37.346223 4.6091533 37.021484 4.4511719 C 36.797676 4.3414625 36.494425 4.2187007 36.349609 4.1835938 C 36.158715 4.1331275 35.878271 4.1019782 35.599609 4.09375 z M 41.765625 9.3847656 C 41.553269 9.387097 41.33698 9.4167045 41.123047 9.4726562 C 39.863583 9.8017843 38.811599 10.946727 38.517578 12.302734 C 38.438591 12.675746 38.446902 13.381834 38.539062 13.728516 C 38.648769 14.136634 38.890031 14.571188 39.162109 14.847656 C 40.483011 16.18611 42.875848 15.452703 43.828125 13.412109 C 44.100204 12.837233 44.15625 12.566459 44.15625 11.908203 C 44.15185 11.412317 44.139502 11.297952 44.042969 11.021484 C 43.889367 10.587035 43.731521 10.326742 43.4375 10.037109 C 43.009634 9.6059517 42.402693 9.3777716 41.765625 9.3847656 z M 23.183594 9.9804688 C 20.559346 10.177946 18.515858 10.69223 16.59375 11.626953 C 14.65409 12.574842 13.099528 14.190122 11.998047 16.40625 C 10.685923 19.052439 10.300679 21.978181 10.923828 24.523438 C 11.406549 26.476264 12.565248 27.998673 14.175781 28.792969 C 14.899863 29.152815 15.557129 29.333675 16.601562 29.460938 C 19.041499 29.754959 21.134523 30.478089 22.701172 31.566406 C 23.991353 32.466022 24.913207 33.652238 25.347656 34.96875 C 25.725056 36.109726 25.79501 37.706605 25.509766 38.794922 C 25.167472 40.128987 24.607089 41.238978 22.28125 45.214844 C 21.342138 46.825377 20.582528 48.392103 20.240234 49.445312 C 19.854057 50.634562 19.857984 51.930128 20.261719 52.939453 C 20.937529 54.615812 22.520831 55.698264 24.837891 56.0625 C 25.518089 56.16782 27.213493 56.16782 27.990234 56.0625 C 29.210202 55.891353 30.315896 55.654942 30.996094 55.417969 C 34.164499 54.298934 36.933175 50.811033 39.070312 45.242188 C 40.470205 41.591061 41.532831 36.973903 41.962891 32.642578 C 42.116484 31.119813 42.142578 30.588344 42.142578 28.824219 C 42.142578 26.871392 42.120286 26.556574 41.896484 25.117188 C 41.321607 21.417789 40.495741 18.933776 39.201172 16.976562 C 38.700897 16.22615 38.33698 15.777903 37.6875 15.132812 C 36.318323 13.759251 34.633825 12.67575 32.224609 11.609375 C 30.227899 10.727312 28.63914 10.297037 26.537109 10.064453 C 25.940291 9.9986275 23.701422 9.9409734 23.183594 9.9804688 z ")
//background rectangle
svgDoc.append("rect").attr("width",100).attr("height",100);
//specify the number of columns and rows for pictogram layout
var numCols = 20;
var numRows = 10;
//padding for the grid
var xPadding = 5;
var yPadding = 15;
//horizontal and vertical spacing between the icons
var hBuffer = 8;
var wBuffer = 4;
//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('transform', $('#iconCustom').attr('transform'))
.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);
var v = [];
function update(d) {
var sum = 0;
for (var i = 0; i < v.length; ++i) {
sum += v[i];
if (d < sum) {
console.log(d, i, "iconS" + (i + 1))
return "iconS" + (i + 1);
}
}
return "iconPlain";
}
function formatValue() {
return `2018: ${v[0]}\n2019: ${v[1]}k`;
}
//create a jquery slider to control the pictogram
$( ".sliderDiv" ).each(function(index, slider) {
$(slider).slider({
orientation: "horizontal",
min: 0,
max: numCols*numRows,
value: 0,
slide: function( event, ui ) {
var value = v[index] = ui.value;
d3.select("#txtValue").text(formatValue());
d3.selectAll("use").attr("class",function(d,i){
return update(d);
});
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment