Skip to content

Instantly share code, notes, and snippets.

@gabrielflorit

gabrielflorit/circles.html

Created August 21, 2012 03:40
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 gabrielflorit/3411313 to your computer and use it in GitHub Desktop.
Save gabrielflorit/3411313 to your computer and use it in GitHub Desktop.
Download ZIP
3 circles
Raw
circles.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>livecoding</title>
<link rel="stylesheet" href="http://livecoding.io/static/css/iframe.css">
<style>
</style>
</head>
<body>
<h1>Hello! This is a graphic! Try:</h1>
<ul>
<li>adding another circle</li>
<li>making all the circles the same radius</li>
<li>coloring all the circles red</li>
<li>coloring all the circles olive green</li>
</ul>
<svg></svg>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://livecoding.io/static/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="http://livecoding.io/static/js/libs/d3.v2.min.js"></script>
<script>
$(function() {
var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
svg
.attr('width', width)
.attr('height', height);
svg.selectAll('circle')
.data([64, 128, 256])
.enter().append('circle')
.attr('cy', 128)
.attr('cx', String)
.attr('r', Math.sqrt);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment