I'm currently attempting to retrieve data for my chart from a data.csv file.
<!DOCTYPE html>
<html>
<head>
<title>D3 test</title>
<style>
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
.chart {
}
.main text {
font: 10px sans-serif;
}
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
circle {
fill: steelblue;
}
</style>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<div class='content'>
<!-- /the chart goes here -->
</div>
<script type="text/javascript" src="scatterchart.js"></script>
</body>
</html>
Here's the code snippet from scatterchart.js:
var data = []
d3.csv("data.csv", function(csvData) {
data = csvData.forEach(function(d) { return [+d.first, +d.second]; });
console.log(data);
var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);
// Rest of the script continues here...
And the data.csv file contains:
first,second
2,2
3,3
4,4
5,4
5.5,5
6,6
6,7
6.5,8
6.5,16
17,16
The error messages appearing in the console window are:
[undefined scatterchart.js:6]
[TypeError: n is undefined d3.v3.min.js:3]
If you have any suggestions on how to resolve these errors and get the desired output, please let me know. Thank you!