Skip to content

Instantly share code, notes, and snippets.

@bluenote10
Created January 1, 2017 11:14
Show Gist options
  • Save bluenote10/6c6d860a533943eac63d1a5606c73f74 to your computer and use it in GitHub Desktop.
Save bluenote10/6c6d860a533943eac63d1a5606c73f74 to your computer and use it in GitHub Desktop.
Issues with d3 tip
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
value
100
150
200
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
value
110
140
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="plot1"></div>
<div id="plot2"></div>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>
<script src="plot.js"></script>
<script type="text/javascript">
plot("data1.csv", "#plot1", "#711924", "Plot 1");
plot("data2.csv", "#plot2", "#1752B1", "Plot 2");
</script>
</body>
</html>
function plot(csvFile, locator, color, plotTitle) {
function render(data) {
var svg = d3.select(locator)
.append("svg")
.attr("width", 300)
.attr("height", 200);
// show plot title
svg.append("text")
.attr("x", 0)
.attr("y", 20)
.text(plotTitle);
// add tip
function tipRenderer(d) {
return "This is plot: " + plotTitle + " with data: " + d["value"];
}
tip = d3.tip()
.attr("class", "d3-tip")
.direction("s")
.html(tipRenderer);
svg.call(tip);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("fill", color)
.attr("width", 20)
.attr("height", 20)
.attr("x", (d) => d["value"])
.attr("y", 0)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
}
d3.csv(csvFile, render);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment