Skip to content

Instantly share code, notes, and snippets.

@balajikvijayan
Last active December 9, 2015 01:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save balajikvijayan/1412be68265ae0315cb5 to your computer and use it in GitHub Desktop.
D3 Intro
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; }
</style>
</head>
<body>
<svg>
</svg>
<script>
var width = 1000;
var height = 1000;
var i = 4;
var svg = d3.select('svg');
for(var i = 0; i < 1200; i++) {
var colors = ["#FF0000", "#00FF00","#0000FF"]
var d = {
x: Math.random() * 700,
y: Math.random() * 1000,
r: Math.random() * 10 + 5,
fill: colors[Math.floor(Math.random() * colors.length)]
};
svg.append("circle")
.datum(d)
}
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.attr("fill", function(d) { return d.fill; })
// var body = d3.select('body');
// var header = body.append('h1').text('Hi Mom')
// .attr('id', 'main')
// .attr('class', 'header')
// body.append("h1").text("1 2 3")
// .attr('class', 'header')
// d3.selectAll(".header").style("color", "blue")
// d3.select("#main").style("color", "red")
// d3.selectAll(".header")
// .style('font-family', 'helvetica')
// document.querySelector('body').append('h1')
// .text('Hi Mom').attr('id', 'main')
// d3.selectAll('body')
// var svg = d3.select("body").append("svg")
// .attr("width", width + margin.left + margin.right)
// .attr("height", height + margin.top + margin.bottom)
// .append("g")
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// // Feel free to change or delete any of the code you see!
// svg.append("rect")
// .attr({x: 100, y: 10, width: width - 200, height: height - 20})
// .style({ fill: "#a72d1a"})
// .transition().duration(3000).ease("bounce")
// .style({ fill: "#5db9e3"})
// console.log("you are now rocking with d3", d3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment