import React, { useMemo, useRef, useState } from "react";
import { ComposableMap, Geographies, Geography, Marker } from "react-simple-maps";
import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { Search, Upload, MapPin, GraduationCap, Trophy, Filter, Info, Users, Building2 } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Textarea } from "@/components/ui/textarea";
import { motion } from "framer-motion";
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
const starterMens = [
{
id: "mens-tufts",
school: "Tufts University",
gender: "boys",
city: "Medford",
state: "MA",
lat: 42.4085,
lng: -71.119,
conference: "NESCAC",
soccerLevel: 96,
academicLevel: 95,
academicKnownFor: ["International Relations", "Engineering", "Economics"],
type: "Private",
enrollment: "6,800",
nickname: "Jumbos",
notes: "Strong national-level D3 men's soccer program with elite academic profile.",
website: "https://gotuftsjumbos.com/sports/mens-soccer"
},
{
id: "mens-emory",
school: "Emory University",
gender: "boys",
city: "Atlanta",
state: "GA",
lat: 33.7925,
lng: -84.3238,
conference: "UAA",
soccerLevel: 94,
academicLevel: 96,
academicKnownFor: ["Business", "Pre-Med", "Neuroscience"],
type: "Private",
enrollment: "7,100",
nickname: "Eagles",
notes: "Top-end academic school with strong soccer level in the UAA.",
website: "https://emoryathletics.com/sports/mens-soccer"
},
{
id: "mens-stolaf",
school: "St. Olaf College",
gender: "boys",
city: "Northfield",
state: "MN",
lat: 44.4617,
lng: -93.1544,
conference: "MIAC",
soccerLevel: 93,
academicLevel: 84,
academicKnownFor: ["Music", "Biology", "Math"],
type: "Private",
enrollment: "3,000",
nickname: "Oles",
notes: "Consistently strong D3 soccer level with good academics and a strong campus identity.",
website: "https://athletics.stolaf.edu/sports/mens-soccer"
},
{
id: "mens-mit",
school: "MIT",
gender: "boys",
city: "Cambridge",
state: "MA",
lat: 42.3601,
lng: -71.0942,
conference: "NEWMAC",
soccerLevel: 83,
academicLevel: 100,
academicKnownFor: ["Engineering", "Computer Science", "Physics"],
type: "Private",
enrollment: "4,600",
nickname: "Engineers",
notes: "Extreme academic strength and a very interesting fit for the right student-athlete.",
website: "https://mitathletics.com/sports/mens-soccer"
},
{
id: "mens-cnu",
school: "Christopher Newport University",
gender: "boys",
city: "Newport News",
state: "VA",
lat: 37.0602,
lng: -76.493,
conference: "C2C",
soccerLevel: 88,
academicLevel: 73,
academicKnownFor: ["Business", "Psychology", "Political Science"],
type: "Public",
enrollment: "4,700",
nickname: "Captains",
notes: "Strong soccer option in Virginia with a solid profile for players seeking a competitive but not ultra-academic environment.",
website: "https://www.cnusports.com/sports/msoc/index"
},
{
id: "mens-chicago",
school: "University of Chicago",
gender: "boys",
city: "Chicago",
state: "IL",
lat: 41.7897,
lng: -87.5997,
conference: "UAA",
soccerLevel: 89,
academicLevel: 99,
academicKnownFor: ["Economics", "Math", "Political Science"],
type: "Private",
enrollment: "7,500",
nickname: "Maroons",
notes: "Very high-end academic fit with serious soccer credibility.",
website: "https://athletics.uchicago.edu/sports/msoc"
}
];
const starterWomens = [
{
id: "womens-washu",
school: "Washington University in St. Louis",
gender: "girls",
city: "St. Louis",
state: "MO",
lat: 38.6488,
lng: -90.3108,
conference: "UAA",
soccerLevel: 97,
academicLevel: 96,
academicKnownFor: ["Business", "Architecture", "Biology"],
type: "Private",
enrollment: "8,200",
nickname: "Bears",
notes: "Elite D3 women's soccer environment with top-tier academics.",
website: "https://washubears.com/sports/womens-soccer"
},
{
id: "womens-emory",
school: "Emory University",
gender: "girls",
city: "Atlanta",
state: "GA",
lat: 33.7925,
lng: -84.3238,
conference: "UAA",
soccerLevel: 95,
academicLevel: 96,
academicKnownFor: ["Business", "Pre-Med", "Neuroscience"],
type: "Private",
enrollment: "7,100",
nickname: "Eagles",
notes: "National-level women's soccer with strong academic profile.",
website: "https://emoryathletics.com/sports/womens-soccer"
},
{
id: "womens-chicago",
school: "University of Chicago",
gender: "girls",
city: "Chicago",
state: "IL",
lat: 41.7897,
lng: -87.5997,
conference: "UAA",
soccerLevel: 94,
academicLevel: 99,
academicKnownFor: ["Economics", "Math", "Political Science"],
type: "Private",
enrollment: "7,500",
nickname: "Maroons",
notes: "High-academic / high-soccer fit for serious student-athletes.",
website: "https://athletics.uchicago.edu/sports/wsoc"
},
{
id: "womens-tufts",
school: "Tufts University",
gender: "girls",
city: "Medford",
state: "MA",
lat: 42.4085,
lng: -71.119,
conference: "NESCAC",
soccerLevel: 91,
academicLevel: 95,
academicKnownFor: ["International Relations", "Engineering", "Economics"],
type: "Private",
enrollment: "6,800",
nickname: "Jumbos",
notes: "Excellent all-around fit with strong academics and soccer.",
website: "https://gotuftsjumbos.com/sports/womens-soccer"
},
{
id: "womens-mit",
school: "MIT",
gender: "girls",
city: "Cambridge",
state: "MA",
lat: 42.3601,
lng: -71.0942,
conference: "NEWMAC",
soccerLevel: 88,
academicLevel: 100,
academicKnownFor: ["Engineering", "Computer Science", "Physics"],
type: "Private",
enrollment: "4,600",
nickname: "Engineers",
notes: "One of the clearest examples of ultra-academic D3 fit with strong women's soccer.",
website: "https://mitathletics.com/sports/womens-soccer"
},
{
id: "womens-rowan",
school: "Rowan University",
gender: "girls",
city: "Glassboro",
state: "NJ",
lat: 39.7098,
lng: -75.1199,
conference: "NJAC",
soccerLevel: 90,
academicLevel: 74,
academicKnownFor: ["Education", "Business", "Engineering"],
type: "Public",
enrollment: "15,000",
nickname: "Profs",
notes: "Strong East Coast women's soccer fit with a more accessible academic profile than the ultra-selective schools.",
website: "https://rowanathletics.com/sports/womens-soccer"
}
];
function parseCsv(text) {
const lines = text.trim().split(/\r?\n/);
if (!lines.length) return [];
const headers = lines[0].split(",").map((h) => h.trim());
return lines.slice(1).map((line, idx) => {
const values = line.split(",");
const row = {};
headers.forEach((h, i) => {
row[h] = (values[i] || "").trim();
});
return {
id: row.id || `${row.gender || "row"}-${idx}`,
school: row.school || "",
gender: row.gender || "boys",
city: row.city || "",
state: row.state || "",
lat: Number(row.lat || 0),
lng: Number(row.lng || 0),
conference: row.conference || "",
soccerLevel: Number(row.soccerLevel || 0),
academicLevel: Number(row.academicLevel || 0),
academicKnownFor: row.academicKnownFor ? row.academicKnownFor.split("|").map((x) => x.trim()) : [],
type: row.type || "",
enrollment: row.enrollment || "",
nickname: row.nickname || "",
notes: row.notes || "",
website: row.website || ""
};
}).filter((r) => r.school);
}
function SchoolTooltip({ active, payload }) {
if (!active || !payload?.length) return null;
const d = payload[0].payload;
return (
);
}
export default function D3SoccerCollegeMapper() {
const [gender, setGender] = useState("boys");
const [query, setQuery] = useState("");
const [conference, setConference] = useState("all");
const [selected, setSelected] = useState(null);
const [importText, setImportText] = useState("");
const [customMens, setCustomMens] = useState([]);
const [customWomens, setCustomWomens] = useState([]);
const fileRef = useRef(null);
const mensData = customMens.length ? customMens : starterMens;
const womensData = customWomens.length ? customWomens : starterWomens;
const currentData = gender === "boys" ? mensData : womensData;
const conferences = useMemo(() => {
return ["all", ...Array.from(new Set(currentData.map((d) => d.conference).filter(Boolean))).sort()];
}, [currentData]);
const filtered = useMemo(() => {
return currentData.filter((d) => {
const q = query.trim().toLowerCase();
const matchesQuery = !q ||
d.school.toLowerCase().includes(q) ||
d.city.toLowerCase().includes(q) ||
d.state.toLowerCase().includes(q) ||
d.conference.toLowerCase().includes(q) ||
d.academicKnownFor.join(" ").toLowerCase().includes(q);
const matchesConference = conference === "all" || d.conference === conference;
return matchesQuery && matchesConference;
});
}, [currentData, query, conference]);
const topSoccer = useMemo(() => [...filtered].sort((a, b) => b.soccerLevel - a.soccerLevel).slice(0, 5), [filtered]);
const topAcademic = useMemo(() => [...filtered].sort((a, b) => b.academicLevel - a.academicLevel).slice(0, 5), [filtered]);
const importCsv = () => {
const rows = parseCsv(importText);
if (!rows.length) return;
const boys = rows.filter((r) => r.gender === "boys");
const girls = rows.filter((r) => r.gender === "girls");
if (boys.length) setCustomMens(boys);
if (girls.length) setCustomWomens(girls);
setSelected(rows[0] || null);
};
const onFileUpload = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
const text = await file.text();
setImportText(text);
};
return (
Scatterplot
Map
setSelected(d)}
/>
{({ geographies }) => geographies.map((geo) => (
{filtered.map((school) => (
setSelected(school)} className="cursor-pointer">
))}
Highest Soccer Level
{topSoccer.map((s) => (
))}
Highest Academic Level
{topAcademic.map((s) => (
))}
{d.school}
{d.city}, {d.state} • {d.conference}
Soccer
{d.soccerLevel}
Academic
{d.academicLevel}
Neuro Football Recruiting Tool
D3 Soccer College Mapper
Visualize Division III soccer schools by geography, soccer level, and academic level. Toggle boys or girls, click schools for deeper detail, and import your own full D3 dataset when you are ready.
X-axis = academic level. Y-axis = soccer level. Click any point for deeper recruiting context.
See where these programs sit geographically. Click a marker for school detail.
Paste or upload CSV data to replace the starter list with your full D3 dataset. Use one CSV for both boys and girls.
Required columns: id,school,gender,city,state,lat,lng,conference,soccerLevel,academicLevel,academicKnownFor,type,enrollment,nickname,notes,website
Use boys or girls in the gender column. For academicKnownFor, separate multiple values with |.
Use boys or girls in the gender column. For academicKnownFor, separate multiple values with |.