Skip to content

Instantly share code, notes, and snippets.

@thole

thole/index.html

Last active October 21, 2018 18:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thole/e532c7939dc37c6cb55c to your computer and use it in GitHub Desktop.
Save thole/e532c7939dc37c6cb55c to your computer and use it in GitHub Desktop.
Download ZIP
isotype
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="960" height="500">
<defs>
<path
d="m 137.36691,362.90977 c -6.6,-0.32462 -39.6134,-0.62303 -73.363118,-0.66312 C 28.492278,362.20445 2.256528,361.78962 1.728841,361.26193 1.222305,360.75539 0.880715,349.71576 0.960334,336.42505 1.039164,323.26627 0.972904,308.9 0.813089,304.5 c -0.515665,-14.19739 0.57978,-36.21248 2.214189,-44.49841 2.491584,-12.63153 10.062994,-22.49237 21.121568,-27.50826 7.970842,-3.61538 17.341166,-4.30905 67.718064,-5.01307 25.575,-0.35741 46.6218,-0.77098 46.77067,-0.91905 0.21833,-0.21716 -0.75856,-10.67439 -2.05223,-21.96826 -0.43867,-3.82972 1.96733,-2.48764 5.63099,3.141 5.59458,8.59518 18.57603,17.56509 31.47664,21.74969 11.854,3.8451 31.36922,3.56067 44.1013,-0.64278 10.43149,-3.44391 24.31403,-13.66736 30.07263,-22.14624 1.3919,-2.0494 3.33688,-3.68398 4.38809,-3.68779 2.03671,-0.007 2.04171,-1.24183 -0.078,19.24317 l -0.59499,5.75 22.89245,0.14911 c 75.7852,0.49365 79.438,0.73767 90.33632,6.03496 8.98518,4.36737 14.13003,9.44905 17.94408,17.72373 3.83476,8.31962 4.78111,13.99102 5.52189,33.0922 0.73754,19.01751 1.08985,76.83365 0.47196,77.45154 -0.71478,0.71479 -237.39425,1.14622 -251.38179,0.45823 z m 72.5,-8.93827 c 0,-0.89464 -1.82996,-3.90821 -6.3587,-10.4715 -3.29873,-4.78068 -25.6413,-40.3747 -25.6413,-40.84923 0,-0.28839 -1.9125,-3.37773 -4.25,-6.86518 -2.3375,-3.48745 -5.11475,-7.9034 -6.17166,-9.81321 -1.05692,-1.90981 -2.76193,-4.59738 -3.78891,-5.97238 -4.9448,-6.62049 -15.16045,-22.35931 -19.33834,-29.79377 l -4.66078,-8.29378 -32.39515,0.25376 c -17.81734,0.13956 -32.395159,0.5827 -32.395159,0.98475 0,0.40206 0.484561,1.03048 1.076803,1.39651 1.301046,0.80409 35.707366,52.83893 42.947726,64.95253 1.31495,2.2 6.50028,10.3 11.52296,18 5.02267,7.7 11.02847,16.97811 13.34621,20.61802 l 4.21408,6.61802 30.94611,0.12335 c 20.27474,0.0808 30.94611,-0.22536 30.94611,-0.88789 z m -26,-126.91847 c -8.86694,-1.61813 -15.22252,-4.04964 -22.59357,-8.64382 -11.1166,-6.92867 -15.30277,-11.50942 -19.57826,-21.42364 -4.70709,-10.91504 -6.6085,-20.71482 -7.75824,-39.98557 -0.50863,-8.525 -1.72542,-26.37557 -2.70398,-39.66793 -2.90831,-39.505103 -0.48556,-54.315468 11.34854,-69.374082 10.99516,-13.991078 27.01696,-21.101091 50.95075,-22.610477 20.26427,-1.277968 37.00341,4.467635 50.1519,17.214321 13.98579,13.558403 19.47029,36.240446 17.03188,70.438168 -0.49021,6.875 -1.08687,13.85 -1.3259,15.5 -0.23904,1.65 -1.15721,12.225 -2.04038,23.5 -0.88316,11.275 -2.01269,23.14723 -2.51006,26.38272 -1.10975,7.21924 -7.09196,20.23871 -12.50089,27.20649 -7.05327,9.08601 -19.20555,17.19863 -29.55204,19.72835 -7.92414,1.93745 -22.8912,2.83562 -28.91975,1.73547 z"
id="sv"/>
<path
d="m 137.36691,362.90977 c -6.6,-0.32462 -39.6134,-0.62303 -73.363118,-0.66312 C 28.492278,362.20445 2.256528,361.78962 1.728841,361.26193 1.222305,360.75539 0.880715,349.71576 0.960334,336.42505 1.039164,323.26627 0.972904,308.9 0.813089,304.5 c -0.515665,-14.19739 0.57978,-36.21248 2.214189,-44.49841 2.491584,-12.63153 10.062994,-22.49237 21.121568,-27.50826 7.970842,-3.61538 17.341166,-4.30905 67.718064,-5.01307 25.575,-0.35741 46.6218,-0.77098 46.77067,-0.91905 0.21833,-0.21716 -0.75856,-10.67439 -2.05223,-21.96826 -0.43867,-3.82972 1.96733,-2.48764 5.63099,3.141 5.59458,8.59518 18.57603,17.56509 31.47664,21.74969 11.854,3.8451 31.36922,3.56067 44.1013,-0.64278 10.43149,-3.44391 24.31403,-13.66736 30.07263,-22.14624 1.3919,-2.0494 3.33688,-3.68398 4.38809,-3.68779 2.03671,-0.007 2.04171,-1.24183 -0.078,19.24317 l -0.59499,5.75 22.89245,0.14911 c 75.7852,0.49365 79.438,0.73767 90.33632,6.03496 8.98518,4.36737 14.13003,9.44905 17.94408,17.72373 3.83476,8.31962 4.78111,13.99102 5.52189,33.0922 0.73754,19.01751 1.08985,76.83365 0.47196,77.45154 -0.71478,0.71479 -237.39425,1.14622 -251.38179,0.45823 z m 46.5,-135.85674 c -8.86694,-1.61813 -15.22252,-4.04964 -22.59357,-8.64382 -11.1166,-6.92867 -15.30277,-11.50942 -19.57826,-21.42364 -4.70709,-10.91504 -6.6085,-20.71482 -7.75824,-39.98557 -0.50863,-8.525 -1.72542,-26.37557 -2.70398,-39.66793 -2.90831,-39.505103 -0.48556,-54.315468 11.34854,-69.374082 10.99516,-13.991078 27.01696,-21.101091 50.95075,-22.610477 20.26427,-1.277968 37.00341,4.467635 50.1519,17.214321 13.98579,13.558403 19.47029,36.240446 17.03188,70.438168 -0.49021,6.875 -1.08687,13.85 -1.3259,15.5 -0.23904,1.65 -1.15721,12.225 -2.04038,23.5 -0.88316,11.275 -2.01269,23.14723 -2.51006,26.38272 -1.10975,7.21924 -7.09196,20.23871 -12.50089,27.20649 -7.05327,9.08601 -19.20555,17.19863 -29.55204,19.72835 -7.92414,1.93745 -22.8912,2.83562 -28.91975,1.73547 z"
id="ag"/>
</defs>
</svg>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("svg")
var data = [{"type":"sv"},{"type":"sv"},{"type":"sv"},{"type":"sv"},{"type":"sv"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},{"type":"ag"},
{"type":"ag"},{"type":"ag"},{"type":"ag","status":"off"},{"type":"ag","status":"off"},{"type":"ag","status":"off"},{"type":"ag","status":"off"},{"type":"ag","status":"off"},{"type":"ag","status":"off"},{"type":"ag","status":"off"},{"type":"ag","status":"off"}]
svg.selectAll('g')
.data(data)
.enter()
.append("g")
.attr("transform",function(d,i){ return "translate(" + ((i * 33) % 264) + "," + ((Math.floor((i * 33) / 264)) * 33) + "),scale(0.075)"})
.append("use")
.attr("xlink:href",function(d){ return "#" + d.type })
.style("fill","steelblue")
.style("fill-opacity",function(d,i){ return d.status === "off" ? 0.3 : 1.0})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment