Created
February 29, 2012 03:06
-
-
Save tomkersten/1937254 to your computer and use it in GitHub Desktop.
Playing around w/ d3.js...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title></title> | |
| <style> | |
| .chart rect { | |
| fill: steelblue; | |
| stroke: white; | |
| } | |
| body {margin: 0;} | |
| </style> | |
| </head> | |
| <body> | |
| <label for="new-content">Add content</label> | |
| <input type="text" id="new-content" value="Testing" /> | |
| <button>Add</button> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <script type="text/javascript" src="dragrect.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| var w = 750, h = 450; | |
| // w = window.innerWidth, | |
| // h = window.innerHeight; | |
| var force = d3.layout.force() | |
| .gravity(0) | |
| .charge(0) | |
| .size([w, h]); | |
| force.start(); | |
| var fill = d3.scale.category20(); | |
| var svg = d3.select("body").append("svg:svg") | |
| .attr("class", "chart") | |
| .attr("width", w) | |
| .attr("height", h); | |
| $('button').click( function() { | |
| // Set up function for this specific circle to be draggable | |
| var drag = d3.behavior.drag().on("drag", move); | |
| var inputData = $("#new-content").val(); | |
| // get out if no data | |
| if ( inputData === '' ) { return; } | |
| $("#new-content").val(''); // clear input field value | |
| // Randomly assign x/y and link input text to data | |
| var data = [{x: Math.floor(Math.random() * w), y: Math.floor(Math.random() * h), text: inputData}]; | |
| // Add a new 'grouping' node | |
| group = svg.append("g").data(data); | |
| // Add a circle to our group | |
| var circle = group.append("circle") | |
| .attr("fill", function() {return fill(Math.floor(Math.random() * 10 + 10));}) | |
| .attr("opacity", function() {return Math.random(); }) | |
| .attr("cx", function(datum) { return datum.x; }) | |
| .attr("cy", function(datum) { return datum.y; }) | |
| .attr("r", "10") | |
| .call(drag); | |
| // Add associated text to our group (next to circle) | |
| var text = group.append("text") | |
| .attr("text-anchor", "right") | |
| .attr("dy", function(datum) { return datum.y + 6; }) | |
| .attr("dx", function(datum) { return datum.x + 12; }) | |
| .text(function(datum) { return datum.text; }); | |
| // Set up function specifically for this group of content | |
| // NOTE: Is this necessary/right? | |
| // (ref'd: http://bl.ocks.org/1629464) | |
| function move(datum) { | |
| circle.attr('cx', d3.event.x); | |
| circle.attr('cy', d3.event.y); | |
| text.attr("dy", function(datum) { return d3.event.y + 6; }) | |
| text.attr("dx", function(datum) { return d3.event.x + 12; }) | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment