Skip to content

Instantly share code, notes, and snippets.

@nadinesk
Last active August 23, 2016 18:04
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 nadinesk/a9342ac86e10552e72bb41e0e9374b76 to your computer and use it in GitHub Desktop.
Save nadinesk/a9342ac86e10552e72bb41e0e9374b76 to your computer and use it in GitHub Desktop.
lots of circles?
name value
Locke 32
Reyes 57
Ford 112
Jarrah 293
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart circle {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<svg></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("svg");
data1 = [1,2,3,4,5,]
d3.csv("data.csv", function(error, data) {
// 3. Code here runs last, after the download finishes.
var circle = svg.selectAll("circle")
.data(data);
var circleEnter = circle.enter().append("circle");
circleEnter.attr("cy", 60);
circleEnter.attr("cx", function(d, i) { return i * 100 + 30; });
circleEnter.attr("r", function(d) { return Math.sqrt(d.value); });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment