This VisConnect example is adapted from this block. The only changes are adding the PeerJS and VisConnect script tags. Click the visconnect logo on the bottom right and send the coppied URL to a friend. Once they open the link all your interactions will be synchronized!
-
-
Save dsaffo/a018a51a1a9d9b2fea4387c73215ba9e to your computer and use it in GitHub Desktop.
D3 Mouse Events Adapted For VisConnect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- How to create Mouse Events for D3 --> | |
<html> | |
<head> | |
<!-- Load VisConnect and PeerJS--> | |
<script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script> | |
<script src="https://unpkg.com/visconnect@latest/visconnect-bundle.js"></script> | |
<!-- Load D3 from site --> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<!-- CSS (Styling) --> | |
<style type="text/css"> | |
.axis path, .axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; /* Round any decimal pixels so it'll render nicely */ | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Begin Javascript --> | |
<script type="text/javascript"> | |
var w = window.innerWidth - 50, | |
h = 600, | |
margin = { top: 40, right: 20, bottom: 20, left: 40 }, | |
radius = 6; | |
var svg = d3.select("body").append("svg").attr({ | |
width: w, | |
height: h | |
}); | |
var dataset = [ | |
{ x: 100, y: 110 }, | |
{ x: 83, y: 43 }, | |
{ x: 92, y: 28 }, | |
{ x: 49, y: 74 }, | |
{ x: 51, y: 10 }, | |
{ x: 25, y: 98 }, | |
{ x: 77, y: 30 }, | |
{ x: 20, y: 83 }, | |
{ x: 11, y: 63 }, | |
{ x: 4, y: 55 }, | |
{ x: 0, y: 0 }, | |
{ x: 85, y: 100 }, | |
{ x: 60, y: 40 }, | |
{ x: 70, y: 80 }, | |
{ x: 10, y: 20 }, | |
{ x: 40, y: 50 }, | |
{ x: 25, y: 31 } | |
]; | |
// We're passing in a function in d3.max to tell it what we're maxing (x value) | |
var xScale = d3.scale.linear() | |
.domain([0, d3.max(dataset, function (d) { return d.x + 10; })]) | |
.range([margin.left, w - margin.right]); // Set margins for x specific | |
// We're passing in a function in d3.max to tell it what we're maxing (y value) | |
var yScale = d3.scale.linear() | |
.domain([0, d3.max(dataset, function (d) { return d.y + 10; })]) | |
.range([margin.top, h - margin.bottom]); // Set margins for y specific | |
// Add a X and Y Axis (Note: orient means the direction that ticks go, not position) | |
var xAxis = d3.svg.axis().scale(xScale).orient("top"); | |
var yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
var circleAttrs = { | |
cx: function(d) { return xScale(d.x); }, | |
cy: function(d) { return yScale(d.y); }, | |
r: radius | |
}; | |
// Adds X-Axis as a 'g' element | |
svg.append("g").attr({ | |
"class": "axis", // Give class so we can style it | |
transform: "translate(" + [0, margin.top] + ")" // Translate just moves it down into position (or will be on top) | |
}).call(xAxis); // Call the xAxis function on the group | |
// Adds Y-Axis as a 'g' element | |
svg.append("g").attr({ | |
"class": "axis", | |
transform: "translate(" + [margin.left, 0] + ")" | |
}).call(yAxis); // Call the yAxis function on the group | |
svg.selectAll("circle") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr(circleAttrs) // Get attributes from circleAttrs var | |
.on("mouseover", handleMouseOver) | |
.on("mouseout", handleMouseOut); | |
// On Click, we want to add data to the array and chart | |
svg.on("click", function() { | |
var coords = d3.mouse(this); | |
// Normally we go from data to pixels, but here we're doing pixels to data | |
var newData= { | |
x: Math.round( xScale.invert(coords[0])), // Takes the pixel number to convert to number | |
y: Math.round( yScale.invert(coords[1])) | |
}; | |
dataset.push(newData); // Push data to our array | |
svg.selectAll("circle") // For new circle, go through the update process | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr(circleAttrs) // Get attributes from circleAttrs var | |
.on("mouseover", handleMouseOver) | |
.on("mouseout", handleMouseOut); | |
}) | |
// Create Event Handlers for mouse | |
function handleMouseOver(d, i) { // Add interactivity | |
// Use D3 to select element, change color and size | |
d3.select(this).attr({ | |
fill: "orange", | |
r: radius * 2 | |
}); | |
// Specify where to put label of text | |
svg.append("text").attr({ | |
id: "t" + d.x + "-" + d.y + "-" + i, // Create an id for text so we can select it later for removing on mouseout | |
x: function() { return xScale(d.x) - 30; }, | |
y: function() { return yScale(d.y) - 15; } | |
}) | |
.text(function() { | |
return [d.x, d.y]; // Value of the text | |
}); | |
} | |
function handleMouseOut(d, i) { | |
// Use D3 to select element, change color back to normal | |
d3.select(this).attr({ | |
fill: "black", | |
r: radius | |
}); | |
// Select text by id and then remove | |
d3.select("#t" + d.x + "-" + d.y + "-" + i).remove(); // Remove text location | |
} | |
</script> | |
</body> | |
</html> |
Author
dsaffo
commented
Jul 21, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment