When trying to load data using 📊 D3 through d3.csv, for example:
import * as d3 from 'd3'
export async function setupPlot() {
const metrics = await d3.csv("../complexity/data/metrics.csv")
console.log(metrics)
}Your index.html file may be logged to the console instead:
0 {<!doctype html>: "<html lang=\"en\">"}
1 {<!doctype html>: " <head>"}
2 {<!doctype html>: " <script type=\"module\" src=\"/@vite/client\"></script>"}
3 {<!doctype html>: ""}
4 {<!doctype html>: " <meta charset=\"UTF-8\" />"}
5 {<!doctype html>: " <meta name=\"viewport\" content=\"width=device-width"}
6 {<!doctype html>: " <title>Vite + TS</title>"}
7 {<!doctype html>: " </head>"}
(...)
14 {<!doctype html>: "</html>"}
This happens because d3.csv sends a request to the server to get the file. If the file is not found, the server returns index.html by default.
You have to make sure is available on the server by putting it in the public folder for example (depending on the type of server used).