Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
graph2.html 2.93 KiB
1 
<!DOCTYPE html>
2 
<meta charset="utf-8">
3
4 
<!-- Load d3.js -->
5 
<script src="https://d3js.org/d3.v4.js"></script>
6
7 
<!-- Create a div where the graph will take place -->
8 
<div id="my_dataviz"></div>
9
10 
<script>
11
12 
	// set the dimensions and margins of the graph
13 
	var margin = {top: 10, right: 30, bottom: 30, left: 60},
14 
		width = 460 - margin.left - margin.right,
15 
		height = 450 - margin.top - margin.bottom;
16
17 
	// append the svg object to the body of the page
18 
	var svg = d3.select("#my_dataviz")
19 
	  .append("svg")
20 
		.attr("width", width + margin.left + margin.right)
21 
		.attr("height", height + margin.top + margin.bottom)
22 
	  .append("g")
23 
		.attr("transform",
24 
			  "translate(" + margin.left + "," + margin.top + ")");
25
26 
	//Read the data
27 
	d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
28
29 
	  // Add X axis
30 
	  var x = d3.scaleLinear()
31 
		.domain([0, 3000])
32 
		.range([ 0, width ]);
33 
	  svg.append("g")
34 
		.attr("transform", "translate(0," + height + ")")
35 
		.call(d3.axisBottom(x));
36
37 
	  // Add Y axis
38 
	  var y = d3.scaleLinear()
39 
		.domain([0, 400000])
40 
		.range([ height, 0]);
41 
	  svg.append("g")
42 
		.call(d3.axisLeft(y));
43
44 
	  // Add a tooltip div. Here I define the general feature of the tooltip: stuff that do not depend on the data point.
45 
	  // Its opacity is set to 0: we don't see it by default.
46 
	  var tooltip = d3.select("#my_dataviz")
47 
		.append("div")
48 
		.style("opacity", 0)
49 
		.attr("class", "tooltip")
50 
		.style("background-color", "white")
51 
		.style("border", "solid")
52 
		.style("border-width", "1px")
53 
		.style("border-radius", "5px")
54 
		.style("padding", "10px")
55
56
57
58 
	  // A function that change this tooltip when the user hover a point.
59 
	  // Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
60 
	  var mouseover = function(d) {
61 
		tooltip
62 
		  .style("opacity", 1)
63 
	  }
64
65 
	  var mousemove = function(d) {
66 
		tooltip
67 
		  .html("The exact value of<br>the Ground Living area is: " + d.GrLivArea)
68 
		  .style("left", (d3.mouse(this)[0]+90) + "px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
69 
		  .style("top", (d3.mouse(this)[1]) + "px")
70 
	  }
71727374757677787980818283848586878889909192939495969798
// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again var mouseleave = function(d) { tooltip .transition() .duration(200) .style("opacity", 0) } // Add dots svg.append('g') .selectAll("dot") .data(data.filter(function(d,i){return i<50})) // the .filter part is just to keep a few dots on the chart, not all of them .enter() .append("circle") .attr("cx", function (d) { return x(d.GrLivArea); } ) .attr("cy", function (d) { return y(d.SalePrice); } ) .attr("r", 7) .style("fill", "#69b3a2") .style("opacity", 0.3) .style("stroke", "white") .on("mouseover", mouseover ) .on("mousemove", mousemove ) .on("mouseleave", mouseleave ) }) </script>