Title: How to use d3.js in JSP?
Tags: java;javascript;spring;jsp;d3.js
Question: In a Spring web application I am trying to create a dummy JSP page to build on:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
<%@ page session="false"%&gt;
<html lang="en"&gt;
<head xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:spring="http://www.springframework.org/tags"&gt;
<meta charset="utf-8" /&gt;
<spring:url value="/resources/scripts/d3.js" var="d3_url" /&gt;
<script type="text/javascript" src="${d3_url}"&gt;
<jsp:text /&gt;
</script&gt;
<title&gt;A Pagey Page</title&gt;
</head&gt;
<body&gt;
<h1&gt;Hello world!</h1&gt;
<P&gt;What up?</P&gt;
<script type="text/javascript"&gt;
d3.select("body").append("p").text("D3 works!");
</script&gt;
</body&gt;
</html&gt;
I loaded d3.js in the header of the page and there are no complaints about it, so I assume the resource was found. However when I come to use a D3 script in the body of the page I get "Uncaught ReferenceError: d3 is not defined". I am positive about the syntax of the call, because I've tested the same thing in a simple HTML page and it worked.
So, either this is not the way to use D3 in a JSP page or somehow the resource isn't loaded after all. My resources folder is declared in the config file:
<resources mapping="/resources/**" location="/resources/" /&gt; and I triple-checked that d3.js is indeed in the /resources/scripts folder.
What is the right way to use d3.js in JSP?
UPDATE: In Google Chrome development tools console d3 is not recognized. This leads to conclusion that despite the lack of warnings about loading d3 in the header, it hasn't been properly loaded. But why?
UPDATE 2: When I replace
<spring:url value="/resources/scripts/d3.js" var="d3_url" /&gt;
<script type="text/javascript" src="${d3_url}"&gt;
<script type="text/javascript" src="/resources/scripts/d3.js"&gt;
I get Failed to load resource: the server responded with a status of 404 (Not Found) in the Chrome console for that line.
SOLVED: My bad. After removing the leading slash from the resource location, it worked! value="resources/scripts/d3.js". I still don't get why that would affect the outcome taking into account that the resources root was explicitly indicated.
Comment: @LimboExile, it's empty when you first open it.  With the the "Network" open, refresh the page.

Comment: Your browser's network traffic tab is the best way to verify whether or not the script is correctly loaded. You can also view your page's source to see what actual URL is injected by the JSTL tag.

Comment: Chrome's network tab is empty, but it is also empty when I load simple HTML where d3 works properly. Page's source shows `

Comment: I updated the question with the solution. Actually, the solution doesn't clear everything. I don't know how should I proceed with this question according to SE rules.

Here is the accepted answer: The solution was to remove the leading slash from the resource location in the JSP header. Also, charset should be specified as "utf-8" for d3.js to load properly:
<script charset="utf-8" type="text/javascript" src="resources/scripts/d3.js"&gt;
Comment for this answer: or just `` which avoids such problems and always gets you the latest version


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:12/01/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<java><javascript><spring><jsp><d3.js>', 'Title': 'How to use d3.js in JSP?', 'ViewCount': 3820, 'id': 27228656, 'user_AboutMe': '<p>Limbo Exile</p>\n', 'user_AccountId': 1431685.0, 'user_DisplayName': 'Limbo Exile', 'user_Reputation': 1291.0, 'user_Views': 116.0, 'user_id': 1353969.0}}