D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
balajikvijayan
Full window
Github gist
D3 Intro
Built with
blockbuilder.org
<!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>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js