Having fun with D3js – d3js

Stand-alone html file.

Here’s a working example

<!DOCTYPE html>

    <script type="text/javascript" src=""></script>


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

    <script type="text/javascript">

    // start a svg in the viz div
        .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


	// 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


	//settings for the nodes
	var circle=svgBox.selectAll('circle')
    	.attr("r", 10) // circle radius

	// provides node animation for mouseover
	function expandNode() {

	// provides node animation for mouseout
	function contractNode(){



Leave a Reply

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

You are commenting using your 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