Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML for d3_identity error
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="src/d3/d3.js"></script>
<script type="text/javascript" src="src/d3/d3.geom.js"></script>
<script type="text/javascript" src="src/d3/d3.layout.js"></script>
</head>
<body>
<div id="viz1"></div>
<div id="viz2"></div>
<div id="viz3"></div>
<script type="text/javascript">
/*
.transition()
.delay(100)
.duration(1000)
.attr("r", 10)
.attr("cx", 30)
.style("fill", "black")
*/
var viz1 = d3.select("#viz1")
.append("svg")
.attr("width", 100)
.attr("height", 100);
viz1.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");})
.on("mousedown", animate);
function animate() {
d3.select(this).transition()
.duration(1000)
.attr("r", 10)
.transition()
.delay(1000)
.attr("r", 40);
}
var w = 960,
h = 500;
var viz2 = d3.select("#viz2").append("svg")
.attr("width", w)
.attr("height", h);
viz2.selectAll("circle")
.data([100,200,300,400])
.enter()
.append("circle")
.attr("cy", 90)
.attr("cx", String)
.attr("r", Math.sqrt);
var nodes = [new Node('Sun'), new Node('Moon'), new Node('Earth'), new Node('Mars')];
var links = [new Link(0,2), new Link(1,2), new Link(0,3)];
var fw = 960,
fh = 500;
var force = d3.layout.force()
.size([fw, fh]);
force
.nodes(nodes)
.links(links)
.start();
var viz3 = d3.select("#viz3").append("svg")
.attr("width", w)
.attr("height", h);
var node = viz3.selectAll("circle.code")
.data(nodes)
.enter().append("svg:circle")
.attr("r", 45)
.style("stroke", "#000")
.call(force.drag);
function Node(name) {
this.name = name;
}
function Link(source, target) {
this.source = source;
this.target = target;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.