|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Harlinn.d3.Introduction.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>An introduction to d3.js</title>
<style type="text/css">
body
{
background-color:#222;
}
rect {
fill: steelblue;
stroke-width: 2.5px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var w = 600,
h = 400,
z = d3.scale.category20b(),
i = 0;
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.on("mousemove", particle);
function particle()
{
var m = d3.mouse(this);
svg.append("svg:rect")
.attr("x", m[0] - 10)
.attr("y", m[1] - 10)
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", z(++i))
.style("stroke-opacity", 1)
.style("opacity", 0.7)
.transition()
.duration(5000)
.ease(Math.sqrt)
.attr("x", m[0] - 100)
.attr("y", m[1] - 100)
.attr("height", 200)
.attr("width", 200)
.style("stroke-opacity", 1e-6)
.style("opacity", 1e-6)
.remove();
}
</script>
</body>
</html>
<form id="form1" runat="server">
<div>
<!--
<svg id="visual" width="220" height="220">
<rect width="100" height="100" rx="15" ry="15" x="40" y="40"
style="fill:Orange;stroke:Green;stroke-width:5;opacity:0.5"/>
<rect width="100" height="100" rx="15" ry="15" x="60" y="60"
style="fill:Orange;stroke:Green;stroke-width:5;opacity:0.5"/>
<rect width="100" height="100" rx="15" ry="15" x="80" y="40"
style="fill:Orange;stroke:Green;stroke-width:5;opacity:0.5"/>
<rect width="100" height="100" rx="15" ry="15" x="100" y="25"
style="fill:Orange;stroke:Green;stroke-width:5;opacity:0.5"/>
<rect width="100" height="100" rx="15" ry="15" x="120" y="50"
style="fill:Orange;stroke:Green;stroke-width:5;opacity:0.5"/>
</svg>
-->
<script type="text/javascript">
/*
var visual = d3.select("#visual");
var w = visual.attr("width");
var h = visual.attr("height");
var rectangles = visual.selectAll("rect");
rectangles.style("fill", "steelblue")
.attr("x", function ()
{
return Math.random() * w;
})
.attr("y", function ()
{
return Math.random() * h;
});
*/
</script>
</div>
</form>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Chief Architect - Sea Surveillance AS.
Specializing in integrated operations and high performance computing solutions.
I’ve been fooling around with computers since the early eighties, I’ve even done work on CP/M and MP/M.
Wrote my first “real” program on a BBC micro model B based on a series in a magazine at that time. It was fun and I got hooked on this thing called programming ...
A few Highlights:
- High performance application server development
- Model Driven Architecture and Code generators
- Real-Time Distributed Solutions
- C, C++, C#, Java, TSQL, PL/SQL, Delphi, ActionScript, Perl, Rexx
- Microsoft SQL Server, Oracle RDBMS, IBM DB2, PostGreSQL
- AMQP, Apache qpid, RabbitMQ, Microsoft Message Queuing, IBM WebSphereMQ, Oracle TuxidoMQ
- Oracle WebLogic, IBM WebSphere
- Corba, COM, DCE, WCF
- AspenTech InfoPlus.21(IP21), OsiSoft PI
More information about what I do for a living can be found at:
harlinn.com or
LinkedIn
You can contact me at
espen@harlinn.no