Last active
December 18, 2015 13:48
-
-
Save milkbread/5792150 to your computer and use it in GitHub Desktop.
HTML: D3-tutorial 1 - basics
This file contains 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
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| #text{ | |
| font-size:24; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>This is a tutorial!</h1> | |
| <text id=sub1>sub1</text> | |
| <text class=sub2>sub2</text> | |
| <script> | |
| var body = d3.select("body"); | |
| var text = body.append("text"); | |
| text.text("Hello!"); | |
| text.style("color","#f00"); | |
| text.attr("id","text").append("br"); | |
| //console.log(body); | |
| //var body = d3.select("body").append("text"); | |
| //console.log(body); | |
| //define pure html-elements | |
| var heading = d3.select("h1").style("color","#ff00ff"); | |
| //define by id | |
| var sub1 = d3.select("#sub1").style("color","#0f0"); | |
| //define by class | |
| var sub2 = d3.select(".sub2").style("color","#00f") | |
| sub1.append("br"); | |
| sub2.append("br"); | |
| var data = []; | |
| for(var i=1;i<25;i++){ | |
| data.push(i); | |
| } | |
| console.log(data); | |
| var container = d3.select("body").append("div").attr("id","#container"); | |
| var data_text_selection = container.selectAll("text"); | |
| var data_text_elements = data_text_selection.data(data).enter().append("text"); | |
| console.log(data_text_elements) | |
| data_text_elements.text(function(content){return content}).append("br"); | |
| data_text_elements.style("fill", "#f00"); | |
| container.selectAll("text").remove(); | |
| var svgContainer = container.append("svg"); | |
| svgContainer.attr("width", 300).attr("height", 200); | |
| var circle = svgContainer.append("circle") | |
| .attr("cx", 25) | |
| .attr("cy", 25) | |
| .attr("r", 20 ) | |
| .style("fill", '#f00'); | |
| circle.on("mousedown",free_definable_function); | |
| function free_definable_function(){ | |
| var mouseCoordX = (d3.mouse(this)[0]); | |
| circle.transition().ease('bounce').duration(1000).delay(250) | |
| .attr("cx",mouseCoordX+50).style("fill","#0f0"); | |
| } | |
| var circleCoords = [50,100,150]; | |
| var rectangles = svgContainer.selectAll("rect").data(circleCoords).enter().append("rect"); | |
| rectangles.attr("x", 50) | |
| .attr("y", function(d){return d}) | |
| .attr("width", 25) | |
| .attr("height", 25) | |
| .style("fill","#00f"); | |
| rectangles.on("mousedown",moveRectangle); | |
| var clicked = false; | |
| function moveRectangle(){ | |
| if(clicked==false){ var color='#f00'; clicked=true; var destination=1;} | |
| else{ var color='#00f'; clicked=false; var destination=-1;} | |
| rectangles.transition().ease("linear").duration(2000) | |
| .style("fill",color) | |
| .attr("x",function(d){return d+(25*destination)}); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment