A little play around with d3

A little play around with d3.markdown

A little play around with d3

Just some basic d3 experiment resurrected from an old anonymous code pen

A Pen by zardozcs on CodePen.

License.

index.html

#canvas

script.js

// test "disabling" transitions by making them instant

DELAY=300;
DURATION=2000;
HOVER_DURATION=800;

// change the consts above to make the transisions instant
//DELAY=0;
//DURATION=0;

d3.select("#canvas").append("svg").attr({width: 300, height: 300})
.selectAll("rect").data([10,20,30]).enter().append("svg:rect").attr({
    x: 0, y:0, width: 0, height: 0, fill: "black", stroke: "black"
})
.on("mouseover", function () {
   
   d3.select(this)
   .interrupt().transition().duration(0);
   d3.select(this)
   .transition().duration(HOVER_DURATION).attr({
        width: 100,
        height: 100,
        fill: "green"
    });
})

.on("mouseout", function () {
   d3.select(this).transition().duration(HOVER_DURATION).attr({
        width: 40,
        height: 40,
        fill: "red"
    });
})


.transition()
.delay(function (d,i) { return i * DELAY; })
.duration(DURATION)
.ease("elastic")
.attr({
    x: 10, y: function (d, i) { return i * 50; }, width: 40, height: 40, fill: "red", stroke: "yellow"
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>

style.css

* {
	background: black;
	color: orange;
	font-family: ProFontWindows, Consolas, Courier, Monospace, Fixed, Serif; 
	font-size: 24px; 
	font-weight: 1000;
}

styles

<link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet" />