Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@bluenote10

bluenote10/data1.csv

Created January 1, 2017 11:14
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 bluenote10/6c6d860a533943eac63d1a5606c73f74 to your computer and use it in GitHub Desktop.
Save bluenote10/6c6d860a533943eac63d1a5606c73f74 to your computer and use it in GitHub Desktop.
Download ZIP
Issues with d3 tip
Raw
data1.csv
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
Raw
data2.csv
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
Raw
index.html
<!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>
Raw
plot.js
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);
}
Raw
style.css
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