Skip to content

Instantly share code, notes, and snippets.

@emeeks
Last active March 17, 2016 02:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/10710551f7eb636fd45c to your computer and use it in GitHub Desktop.
Save emeeks/10710551f7eb636fd45c to your computer and use it in GitHub Desktop.
Ch. 12, Fig. 2 - D3.js in Action

This is the code for Chapter 12, Figure 2 from D3.js in Action which requires a touch interface (or emulator) to see any effect. This example uses d3.touches() to list the XY coordinates of the touch events.

<html>
<head>
<title>D3 in Action Chapter 12 - Example 1</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
body, html {
width: 100%;
height: 100%;
}
#vizcontainer {
width: 100%;
height: 100%;
}
#touchStatus {
position: absolute;
top: 0px;
left: 0px;
}
svg {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="vizcontainer">
<svg></svg>
</div>
</body>
<footer>
<script>
d3.select("#vizcontainer").append("div").attr("id", "touchStatus").append("p").html("Touch Status:").append("ol");
d3.select("svg").on("touchstart", touchStatus);
d3.select("svg").on("touchmove", touchStatus);
function touchStatus() {
d3.event.preventDefault();
d3.event.stopPropagation(); //#c
d = d3.touches(this);
d3.select("#touchStatus").select("ol").selectAll("li").data(d).enter() //#d
.append("li");
d3.select("#touchStatus").select("ol").selectAll("li").data(d).exit() //#e
.remove();
d3.select("#touchStatus").select("ol").selectAll("li").html(function(d) {
return d3.event.type + d;
}); //#f
};
</script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment