D3 Examples - Nails And Strings

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle{
    fill:#e0e0e0;
}
</style>
<body>
<section style="display:block;">
Design: <select onchange="changeArt(this)"></select>
</section>
​
<svg width="960" height="480">
<rect x="0" y="0" width="960" height="480"></rect>
<g id="strings"></g>
<g id="nails"></g>
</svg>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="sArt.js"> </script>
<script src="string designs.js"> </script>
<script>
function changeArt(t){
    d3.select("#nails").html('');
    d3.select("#strings").html('');
    sArt(sA[t.options[t.selectedIndex].value]);
}
​
d3.select("select").selectAll("option")
    .data(sA.map(function(d){ return d.name;}))
    .enter().append("option").attr("value",function(d,i){ return i;})
    .text(function(d){return d;});        
    
sArt(sA[0]);
​
</script>
</body>
</html>
​
    