davegotz · January 12, 2022 01:58
diff --git a/index.html b/index.html
 <html>
 <head>
    <title>Basic Line Chart</title>
    <script src="https://d3js.org/d3.v7.min.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;
        }

    </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.line()
        .x(d => x(d[0]))
        .y(d => y(d[1]));

    svg.append("path")
        .attr("d", line(data))
        .attr("fill", "none")
        .attr("stroke", "black");
 </script>
 </body>
 </html>
	<html>
	<head>
	<title>Basic Line Chart</title>
	<script src="https://d3js.org/d3.v7.min.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;
	}

	</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.line()
	.x(d => x(d[0]))
	.y(d => y(d[1]));

	svg.append("path")
	.attr("d", line(data))
	.attr("fill", "none")
	.attr("stroke", "black");
	</script>
	</body>
	</html>