Spaces:
Sleeping
Sleeping
| """Scatter chart template — fetch-and-adapt from d3-graph-gallery.com. | |
| Adapted from d3-graph-gallery.com (Yan Holtz) — | |
| https://d3-graph-gallery.com/graph/scatter_basic.html | |
| """ | |
| from __future__ import annotations | |
| from pydantic import BaseModel | |
| from app.agents.d3.registry import D3Template, register | |
| class Pt(BaseModel): | |
| x: float | |
| y: float | |
| label: str = "" | |
| class ScatterData(BaseModel): | |
| title: str = "" | |
| x_label: str = "" | |
| y_label: str = "" | |
| data: list[Pt] | |
| _HTML = """<!-- Adapted from d3-graph-gallery.com (Yan Holtz) — https://d3-graph-gallery.com/graph/scatter_basic.html --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <style> | |
| html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; background: #FAF7F2; color: #1A3557; font-family: Georgia, 'Libre Caslon Text', serif; overflow: hidden; } | |
| #my_dataviz { width: 100vw; height: 100vh; } | |
| .axis text { fill: #1A3557; font-size: 12px; } | |
| .axis path, .axis line { stroke: #1A3557; } | |
| .chart-title { fill: #1A3557; font-size: 18px; text-anchor: middle; } | |
| .axis-label { fill: #1A3557; font-size: 13px; text-anchor: middle; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="my_dataviz"></div> | |
| <script> | |
| const data = __DATA__; | |
| // set the dimensions and margins of the graph | |
| const margin = {top: 50, right: 30, bottom: 60, left: 60}, | |
| width = 960 - margin.left - margin.right, | |
| height = 600 - margin.top - margin.bottom; | |
| // append the svg object to the body of the page | |
| const svg = d3.select("#my_dataviz") | |
| .append("svg") | |
| .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`) | |
| .attr("preserveAspectRatio", "xMidYMid meet") | |
| .style("width", "100%") | |
| .style("height", "100%") | |
| .append("g") | |
| .attr("transform", `translate(${margin.left},${margin.top})`); | |
| // Chart title | |
| svg.append("text") | |
| .attr("class", "chart-title") | |
| .attr("x", width / 2) | |
| .attr("y", -20) | |
| .text(data.title); | |
| // Add X axis | |
| const x = d3.scaleLinear() | |
| .domain(d3.extent(data.data, d => d.x)) | |
| .range([ 0, width ]); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", `translate(0, ${height})`) | |
| .call(d3.axisBottom(x)); | |
| svg.append("text") | |
| .attr("class", "axis-label") | |
| .attr("x", width / 2) | |
| .attr("y", height + margin.bottom - 10) | |
| .text(data.x_label); | |
| // Add Y axis | |
| const y = d3.scaleLinear() | |
| .domain(d3.extent(data.data, d => d.y)) | |
| .range([ height, 0 ]); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .call(d3.axisLeft(y)); | |
| svg.append("text") | |
| .attr("class", "axis-label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("x", -height / 2) | |
| .attr("y", -45) | |
| .text(data.y_label); | |
| // Add dots | |
| svg.append('g') | |
| .selectAll("dot") | |
| .data(data.data) | |
| .join("circle") | |
| .attr("cx", d => x(d.x)) | |
| .attr("cy", d => y(d.y)) | |
| .attr("r", 4) | |
| .style("fill", "#4A7FB5") | |
| .append("title") | |
| .text(d => d.label); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| golden_sample = ScatterData( | |
| title="Demo", | |
| x_label="X", | |
| y_label="Y", | |
| data=[ | |
| Pt(x=1, y=2, label="a"), | |
| Pt(x=2, y=4, label="b"), | |
| Pt(x=3, y=1, label="c"), | |
| ], | |
| ) | |
| register( | |
| D3Template( | |
| id="scatter", | |
| family="chart", | |
| title="Scatter plot", | |
| when_to_use="Show the relationship between two numeric variables across individual observations.", | |
| data_requirements="A set of (x, y) points, optionally labeled.", | |
| schema=ScatterData, | |
| html_template=_HTML, | |
| golden_sample=golden_sample, | |
| ) | |
| ) | |