Untitled

avatar
unknown
plain_text
10 months ago
2.0 kB
16
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autism Prevalence Over Time</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .chart {
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .axis {
            stroke: #000;
            stroke-width: 1;
        }
        .line {
            stroke: blue;
            stroke-width: 2;
            fill: none;
        }
        .point {
            fill: blue;
        }
        .label {
            font-size: 14px;
            text-anchor: middle;
        }
    </style>
</head>
<body>

    <h1>Autism Prevalence Over Time</h1>
    <div class="chart">
        <svg width="100%" height="100%">
            <!-- X-axis -->
            <line x1="50" y1="350" x2="550" y2="350" class="axis" />
            <!-- Y-axis -->
            <line x1="50" y1="50" x2="50" y2="350" class="axis" />

            <!-- Chart Title -->
            <text x="300" y="30" class="label" text-anchor="middle">Autism Prevalence (1 in X children)</text>

            <!-- X-axis Labels -->
            <text x="100" y="370" class="label">1980s-1990s</text>
            <text x="300" y="370" class="label">2000</text>
            <text x="500" y="370" class="label">2020</text>

            <!-- Y-axis Labels -->
            <text x="30" y="350" class="label">2500</text>
            <text x="30" y="200" class="label">150</text>
            <text x="30" y="50" class="label">36</text>

            <!-- Data Line -->
            <polyline points="100,350 300,200 500,50" class="line" />

            <!-- Data Points -->
            <circle cx="100" cy="350" r="5" class="point" />
            <circle cx="300" cy="200" r="5" class="point" />
            <circle cx="500" cy="50" r="5" class="point" />
        </svg>
    </div>

</body>
</html>
Editor is loading...
Leave a Comment