<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
<style>
#value{
font-size: 60px;
}
</style>
</head>
<body>
<div id="selector"></div>
<div id="resistor-svg">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="301.125"
height="100"
id="svg6832">
<defs
id="defs6834" />
<metadata
id="metadata6837">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0.59375,1.2269071)"
id="layer1">
<path
d="m 103.50887,82.895365 c -3.44233,3.53541 -15.908457,11.33708 -25.783597,11.33708 -21.68805,0 -39.269681,-20.57787 -39.269681,-45.96194 0,-25.38408 17.581631,-45.9619499 39.269681,-45.9619499 9.85138,0 22.307087,7.7787099 25.758677,11.3116699 3.45157,3.53296 44.58574,2.83042 44.58574,2.83042 0,0 41.13417,0.70254 44.58575,-2.83042 3.45159,-3.53296 15.90729,-11.3116699 25.75868,-11.3116699 21.68804,0 39.26968,20.5778699 39.26968,45.9619499 0,25.38407 -17.58164,45.96194 -39.26968,45.96194 -9.87515,0 -22.34127,-7.80167 -25.7836,-11.33708 -3.44233,-3.53537 -44.56083,-2.55248 -44.56083,-2.55248 0,0 -41.1185,-0.98289 -44.56082,2.55248 z"
id="path6885"
style="fill:#ffeeaa;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1" />
<rect
width="300"
height="100"
x="-5.7328702e-07"
y="-1.2269071"
id="rect6840"
style="fill:none;stroke:none" />
<path
d="m 112.95176,15.660605 0,65.25 c 5.04501,-0.42149 11.28516,-0.59113 17.1875,-0.65625 l 0,-63.84375 c -5.90862,-0.10379 -12.13579,-0.29767 -17.1875,-0.75 z"
id="band1"
style="fill:#000000;stroke:none" />
<path
d="m 148.07676,16.441855 c 0,0 -3.50537,0.0624 -8.34375,0.0625 l 0,63.75 c 4.84078,0.0324 8.34375,0.0937 8.34375,0.0937 0,0 3.71767,-0.0635 8.8125,-0.0937 l 0,-63.75 c -5.09697,0.004 -8.8125,-0.0625 -8.8125,-0.0625 z"
id="band2"
style="fill:#000000;stroke:none" />
<path
d="m 184.42051,15.535605 c -4.87298,0.49427 -11.14106,0.72107 -17.15625,0.84375 l 0,63.90625 c 6.01861,0.0837 12.28871,0.28321 17.15625,0.75 l 0,-65.5 z"
id="band3"
style="fill:#000000;stroke:none" />
<path
d="m 218.42051,2.3168551 c -2.63877,0 -5.46062,0.55238 -8.25,1.4375 l 0,89.0312499 c 2.78715,0.88386 5.61125,1.4375 8.25,1.4375 3.0786,0 6.06293,-0.43459 8.9375,-1.21875 l 0,-89.4687499 c -2.87457,-0.78416 -5.8589,-1.21875 -8.9375,-1.21875 z"
id="rect6883"
style="fill:#c8ab37;fill-opacity:0.4879227;stroke:none" />
<path
d="m 103.50887,82.895365 c -3.44233,3.53541 -15.908457,11.33708 -25.783597,11.33708 -21.68805,0 -39.269681,-20.57787 -39.269681,-45.96194 0,-25.38408 17.581631,-45.9619499 39.269681,-45.9619499 9.85138,0 22.307087,7.7787099 25.758677,11.3116699 3.45157,3.53296 44.58574,2.83042 44.58574,2.83042 0,0 41.13417,0.70254 44.58575,-2.83042 3.45159,-3.53296 15.90729,-11.3116699 25.75868,-11.3116699 21.68804,0 39.26968,20.5778699 39.26968,45.9619499 0,25.38407 -17.58164,45.96194 -39.26968,45.96194 -9.87515,0 -22.34127,-7.80167 -25.7836,-11.33708 -3.44233,-3.53537 -44.56083,-2.55248 -44.56083,-2.55248 0,0 -41.1185,-0.98289 -44.56082,2.55248 z"
id="path6842"
style="fill:none;stroke:#c8ab37;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1" />
<path
d="m 89.889263,5.1918551 0,86.1249999 c 6.13115,-2.59035 11.538347,-6.26318 13.624997,-8.40625 0.29881,-0.30689 0.90368,-0.60135 1.71875,-0.84375 l 0,-67.625 c -0.83138,-0.24834 -1.44679,-0.50214 -1.75,-0.8125 -2.08924,-2.13849 -7.480997,-5.8545399 -13.593747,-8.4374999 z"
id="rect6901"
style="fill:#ff6600;fill-opacity:0.10476607;stroke:none" />
<path
d="m 204.51426,5.9731051 c -5.38029,2.50588 -9.95465,5.7226199 -11.84375,7.6562499 -0.38069,0.38966 -1.24576,0.70676 -2.4375,1 l 0,67.25 c 1.17658,0.28596 2.02939,0.64421 2.40625,1.03125 1.88475,1.93572 6.48632,5.11219 11.875,7.625 l 0,-84.5624999 z"
id="rect6906"
style="fill:#ff6600;fill-opacity:0.10476607;stroke:none" />
<path
d="m 55.023013,58.430615 c 0,0 -8.39286,-10.44642 -6.60714,-24.28571 2.743,-21.25829 20.26647,-27.1740599 23.92857,-28.2142899 3.6621,-1.04023 6.7206,-0.78244 9.1415,1.84327 3.40926,3.6976999 1.65857,9.2352399 -0.92721,11.7281599 -2.58578,2.49292 -11.36358,-0.92349 -20.00001,13.21429 -8.5764,14.03953 -5.53571,25.71428 -5.53571,25.71428 z"
id="path6899"
style="fill:#ffffff;fill-opacity:0.63285068;stroke:none" />
<path
d="m 96.582683,15.976305 c 3.678507,0.97429 8.136817,2.78393 12.175677,3.5049 9.49009,1.69405 19.03934,1.74408 31.9012,1.90301 12.86186,0.15893 37.93386,-0.56475 45.19164,-1.5765 8.21647,-1.1454 14.40744,-3.54555 16.51959,-4.78029 2.11214,-1.23474 6.27557,-2.55777 5.57333,2.46937 -0.65564,4.69362 -7.77747,8.37183 -14.16489,10.18292 -6.76809,1.91903 -32.57477,3.94899 -47.46448,3.96664 -14.88971,0.0177 -33.30657,-0.49238 -41.57162,-3.3749 -5.331947,-1.85957 -18.114037,-5.56853 -17.103877,-10.6193 1.01015,-5.05076 5.26492,-2.65014 8.94343,-1.67585 z"
id="path7438"
style="fill:#ffffff;fill-opacity:0.35748794;stroke:none" />
<path
d="m 54.514263,11.419535 c -7.85973,8.40455 -14.0625,19.42376 -14.0625,32.86607 0,25.38407 17.5932,45.9375 39.28125,45.9375 9.87514,0 22.338917,-7.77709 25.781247,-11.3125 3.44232,-3.53537 44.5625,-2.5625 44.5625,-2.5625 0,0 41.12017,-0.97287 44.5625,2.5625 3.44233,3.53541 15.9061,11.3125 25.78125,11.3125 16.67025,0 30.89496,-12.15965 36.59375,-29.3125 -7.22594,8.97367 -17.95009,14.6875 -29.9375,14.6875 -9.90733,0 -22.42145,-7.12426 -25.875,-10.34375 -3.45354,-3.21945 -44.71875,-2.3125 -44.71875,-2.3125 0,0 -41.23397,-0.90695 -44.6875,2.3125 -3.45355,3.21949 -15.967687,10.34375 -25.874997,10.34375 -21.75871,0 -39.40625,-18.75924 -39.40625,-41.875 0,-8.66841 3.75198,-15.6235 8,-22.30357 z"
id="path6913"
style="fill:#ff6600;fill-opacity:0.17391304;stroke:none" />
<path
d="m -0.08249542,43.955835 41.31801542,0 c 0,0 1.718604,0.12989 1.718604,5.1986 0,5.06871 -1.718604,5.51568 -1.718604,5.51568 l -41.31801542,0 z"
id="rect7440"
style="fill:#e6e6e6;fill-opacity:1;stroke:#b3b3b3;stroke-width:0.99999994" />
<path
d="m 300.03794,43.955835 -44.71236,0 c 0,0 -1.85979,0.12989 -1.85979,5.1986 0,5.06871 1.85979,5.51568 1.85979,5.51568 l 44.71236,0 z"
id="path7445"
style="fill:#e6e6e6;fill-opacity:1;stroke:#b3b3b3;stroke-width:0.99999994" />
</g>
</svg>
</div>
<div id="value"></div>
<script type='text/javascript'>
var w = 300,
h = 300;
//var colors = ['black', 'brown', 'red', 'orange', 'green', 'blue', 'grey', 'white'];
var colors = ['black', '#8c310d', 'red', '#ff7100', 'yellow', 'green', 'blue', 'violet', 'grey', 'white'];
var colorNames = ['Noir', 'Brun', 'Rouge', 'Orange', 'Jaune', 'Vert', 'Bleu', 'Violet', 'Gris', 'Blanc'];
var data = d3.transpose([colors, colors, colors]);
var colorW = w/3;
colorH = h/colors.length;
var svg = d3.select('#selector')
.append('svg')
.attr({width: w, height: h});
var value = [0, 0, 0];
svg.selectAll('g.band')
.data(data)
.enter().append('g')
.classed('band', true)
.attr({transform: 'translate('+0+','+0+')'})
.selectAll('rect.color')
.data(function(d, i){return d;})
.enter().append('rect')
.classed('color', true)
.attr({
width: colorW,
height: colorH,
x: function(d, i, pI){return i*colorW;},
y: function(d, i, pI){return pI*colorH;}
})
.style({
fill: function(d, i){return d;},
stroke: '#eee',
'stroke-width': '4px'
})
.on('click', function(d, i, a){
value[i] = colors.indexOf(d);
var zeros = d3.range(value[2]).map(function(){return 0;}).join('');
var resistorValue = d3.format('s')(parseFloat(value[0] + '' + value[1] + zeros)) + 'ohms';
d3.select('#value').text(resistorValue);
d3.select('#band' + (i+1)).style({fill: d});
})
.on('mousedown', function(d, i){d3.select(this).style({stroke: 'black'});})
.on('mouseup', function(d, i){d3.select(this).style({stroke: '#eee'});});
</script>
</body>
</html>