Categories
Uncategorized

Having fun with D3js – d3js

Stand-alone html file.

Here’s a working example

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>

<body>

    <!-- the div where the svg will live-->
    <div id="viz"></div>

    <script type="text/javascript">

    // start a svg in the viz div
    var svgBox=d3.select("#viz")
        .append("svg")
        .attr("width", 600) // set width
        .attr("height", 200); // set height

	/// /// Edges
	// Draw edges first
	svgBox.append("line") // create line
        .attr("x1",50) // x coordinates start
        .attr("y1",50) // y coordinates start
        .attr("x2",400) // x coordinates end
        .attr("y2",40);  // y coordinates end

	svgBox.append("line")
        .attr("x1",50)
        .attr("y1",50)
        .attr("x2",300)
        .attr("y2",150);

	// settings for the edges
	var line=svgBox.selectAll('line')
		.style("stroke", "rgb(6,120,155)");

	/// /// Nodes
    // Drawn nodes AFTER the edges
    svgBox.append("circle") // create circle
        .attr("cx", 50) // x-coordinate
        .attr("cy", 50); // y-coordinates

    svgBox.append("circle").attr("cx",300).attr("cy",150);
    svgBox.append("circle").attr("cx",400).attr("cy",40);

	//settings for the nodes
	var circle=svgBox.selectAll('circle')
		.style("fill","lightblue")
		.style("stroke","gray")
    	.attr("r", 10) // circle radius
		.on("mouseover",expandNode)
		.on("mouseout",contractNode);

	// provides node animation for mouseover
	function expandNode() {
		d3.select(this).transition()
			.duration(500)
			.attr("r",20)
	};


	// provides node animation for mouseout
	function contractNode(){
		d3.select(this).transition()
			.duration(500)
			.attr("r",10)
	};


    </script>

</body>
</html>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s