Skip to content

Instantly share code, notes, and snippets.

@alansmithy alansmithy/.block

Last active May 22, 2017
Embed
What would you like to do?
Illustrator artwork
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<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"/>
</g>
<text id="title" transform="matrix(1 0 0 1 9.4141 31)" class="st0 st1">This is my title</text>
</svg>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("svg");
var circles = svg.selectAll("circle");
var myData=[30,21,150,14,31,33,11,254,100,52];
//select everything of a certain type
circles
.attr("opacity",function(d,i){
return myData[i]/100;
})
.attr("r",10)
//select a specific thing
d3.select("#circle3").attr("fill","red");
//add interactivity
circles.on("mouseover",function(d,i){
d3.select(this).attr("r",20)
var myid = d3.select(this).attr("id")
d3.select("#title").text("Just moused over "+myid)
});
circles.on("mouseout",function(d,i){
d3.select(this).attr("r",10)
d3.select("#title").text("This is my title")
});
//animate
circles
.transition()
.duration(1000)
.ease(d3.easeBounce)
.attr("cy",function(d,i){
return 100+myData[i]
})
</script>
</body>
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.