davegotz · January 12, 2022 14:05
diff --git a/index.html b/index.html
 <html>
 <head>
    <title>Example of Using Tippy Tooltips with D3</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>

    <!-- Notice these two new scripts... tippy is the tooltip library and it depends on popper. -->
    <!-- This leverages the tippyjs library. -->
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

    <style>
        /* Style information for axis labels */
        .axis-label {
            font-family: sans-serif;
            font-size: 12px;
        }

        /* Style information for axis lines and tick marks */
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        /* This styles the tool tip. */
        .tippy-box {
            color: #fefefe;
            font-family: sans-serif;
            padding: 5px 8px;
            border-radius: 2px;
            opacity: 0.9;
            font-weight: bold;
        }
    </style>
 </head>
 <body>
 <svg width="640" height="480"></svg>

 <script>

    let margin = 40;

    let data = [
        [0, 0.1],
        [10, 0.4],
        [20, 0.2],
        [30, 0.3],
        [40, 0.2],
        [50, 0.5],
        [60, 0.2],
        [70, 0.9],
        [80, 0.4],
        [90, 0.3],
        [100, 0.1],
    ];

    // Define scales for the x and y axes.
    // We'll set the x axis to be 0-100
    var x = d3.scaleLinear()
        .domain([0,100])
        .range([margin,640-margin]);

    // And we'll set the y axis to be 0-1
    var y = d3.scaleLinear()
        .domain([0,1])
        .range([480-margin,margin]);

    let svg = d3.select("svg");

    // New draw the X axis and label.
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0,"+(480-margin)+")")
        .call(d3.axisBottom(x))
    svg.append("text")
        .attr("class", "axis-label")
        .attr("x", x(50))
        .attr("y", 480-3)
        .style("text-anchor", "middle")
        .text("X Axis Label");

    // Now the Y axis and label.
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+margin+",0)")
        .call(d3.axisLeft(y));
    svg.append("text")
        .attr("transform", "rotate(90)")
        .attr("class", "axis-label")
        .attr("x", y(0.5))
        .attr("y", -3)
        .style("text-anchor", "middle")
        .text("Y Axis Label");

    // Add the line for the line chart.
    let line = d3.area()
        .x(d => x(d[0]))
        .y1(d => y(d[1]))
        .y0(d => y(0))
        .curve(d3.curveCardinal);

    svg.append("path")
        .attr("d", line(data))

        .attr("fill", "pink")
        .attr("stroke", "black");

    // Add circles for the actual data points.
    let dots = svg.selectAll(".dot").data(data);
    dots.enter().append("circle")
        .attr("class", "dot")
        .attr("cx", d => x(d[0]))
        .attr("cy", d => y(d[1]))
        .attr("r", 5)
        .style("fill", "red")
        .style("stroke", "black")
        // These next two lines support tool tips...
        // First, we set the content of the tooltip.
        .attr('data-tippy-content', d=> "Value of " + d[1])
        // Then we call tippy on the DOM nodes for these objects.
        .call(s=>tippy(s.nodes()))

 </script>
 </body>
 </html>
	<html>
	<head>
	<title>Example of Using Tippy Tooltips with D3</title>
	<script src="https://d3js.org/d3.v7.min.js"></script>

	<!-- Notice these two new scripts... tippy is the tooltip library and it depends on popper. -->
	<!-- This leverages the tippyjs library. -->
	<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
	<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

	<style>
	/* Style information for axis labels */
	.axis-label {
	font-family: sans-serif;
	font-size: 12px;
	}

	/* Style information for axis lines and tick marks */
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	/* This styles the tool tip. */
	.tippy-box {
	color: #fefefe;
	font-family: sans-serif;
	padding: 5px 8px;
	border-radius: 2px;
	opacity: 0.9;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<svg width="640" height="480"></svg>

	<script>

	let margin = 40;

	let data = [
	[0, 0.1],
	[10, 0.4],
	[20, 0.2],
	[30, 0.3],
	[40, 0.2],
	[50, 0.5],
	[60, 0.2],
	[70, 0.9],
	[80, 0.4],
	[90, 0.3],
	[100, 0.1],
	];

	// Define scales for the x and y axes.
	// We'll set the x axis to be 0-100
	var x = d3.scaleLinear()
	.domain([0,100])
	.range([margin,640-margin]);

	// And we'll set the y axis to be 0-1
	var y = d3.scaleLinear()
	.domain([0,1])
	.range([480-margin,margin]);

	let svg = d3.select("svg");

	// New draw the X axis and label.
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0,"+(480-margin)+")")
	.call(d3.axisBottom(x))
	svg.append("text")
	.attr("class", "axis-label")
	.attr("x", x(50))
	.attr("y", 480-3)
	.style("text-anchor", "middle")
	.text("X Axis Label");

	// Now the Y axis and label.
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate("+margin+",0)")
	.call(d3.axisLeft(y));
	svg.append("text")
	.attr("transform", "rotate(90)")
	.attr("class", "axis-label")
	.attr("x", y(0.5))
	.attr("y", -3)
	.style("text-anchor", "middle")
	.text("Y Axis Label");

	// Add the line for the line chart.
	let line = d3.area()
	.x(d => x(d[0]))
	.y1(d => y(d[1]))
	.y0(d => y(0))
	.curve(d3.curveCardinal);

	svg.append("path")
	.attr("d", line(data))

	.attr("fill", "pink")
	.attr("stroke", "black");

	// Add circles for the actual data points.
	let dots = svg.selectAll(".dot").data(data);
	dots.enter().append("circle")
	.attr("class", "dot")
	.attr("cx", d => x(d[0]))
	.attr("cy", d => y(d[1]))
	.attr("r", 5)
	.style("fill", "red")
	.style("stroke", "black")
	// These next two lines support tool tips...
	// First, we set the content of the tooltip.
	.attr('data-tippy-content', d=> "Value of " + d[1])
	// Then we call tippy on the DOM nodes for these objects.
	.call(s=>tippy(s.nodes()))

	</script>
	</body>
	</html>