Skip to content

Instantly share code, notes, and snippets.

@alansmithy alansmithy/.block

Last active May 22, 2017
What would you like to do?
Illustrator artwork
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
<svg width="580" height=400>
<!--paste your illustrator artwork here-->
<g id="circles">
<circle id="circle10" cx="37.5" cy="84" r="28.1"/>
<circle id="circle9" cx="93.6" cy="84" r="28.1"/>
<circle id="circle8" cx="149.7" cy="84" r="28.1"/>
<circle id="circle7" cx="205.8" cy="84" r="28.1"/>
<circle id="circle6" cx="261.9" cy="84" r="28.1"/>
<circle id="circle5" cx="318.1" cy="84" r="28.1"/>
<circle id="circle4" cx="374.2" cy="84" r="28.1"/>
<circle id="circle3" cx="430.3" cy="84" r="28.1"/>
<circle id="circle2" cx="486.4" cy="84" r="28.1"/>
<circle id="circle1" cx="542.5" cy="84" r="28.1"/>
<text id="title" transform="matrix(1 0 0 1 9.4141 31)" class="st0 st1">This is my title</text>
// Feel free to change or delete any of the code you see in this editor!
var svg ="svg");
var circles = svg.selectAll("circle");
var myData=[30,21,150,14,31,33,11,254,100,52];
//select everything of a certain type
return myData[i]/100;
//select a specific thing"#circle3").attr("fill","red");
//add interactivity
var myid ="id")"#title").text("Just moused over "+myid)
circles.on("mouseout",function(d,i){"r",10)"#title").text("This is my title")
return 100+myData[i]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.