Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Created March 29, 2014 22:30
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 danharr/9864084 to your computer and use it in GitHub Desktop.
Save danharr/9864084 to your computer and use it in GitHub Desktop.
Download ZIP
Circles clipped in a circle
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>show an axis from loaded CSV</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
var dataset; //Declare global var
var svg = d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
var dataset = [];
for (var i = 0; i < 1000; i++) {
var newNumber = Math.random() * 900;
dataset.push(newNumber);
}
svg.append("clipPath")
.attr("id", "chart-area")
.append("circle")
.attr("cx", 500)
.attr("cy", 500)
.attr("r", 200);
svg.append("g")
.attr("id", "circles")
.attr("clip-path", "url(#chart-area)")
.selectAll(".circles")
.data(dataset)
.enter()
.append("circle")
.classed("circles",true)
.attr("cx",function(d,i) { return d;})
.attr("cy",function(d,i){return i;})
.attr("r",15)
.style("opacity",0.4)
;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment