I have taken the worked example from D3 for multiple plots on one graph, and having downloaded the csv file, it worked:-
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("data/Org.csv", function(data) {
// group the data: I want to draw one line per group
var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
.key(function(d) { return d.name;})
.entries(data);
// Add X axis --> it is a date format
var x = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return d.year; }))
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return +d.n; })])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// color palette
var res = sumstat.map(function(d){ return d.key }) // list of group names
var color = d3.scaleOrdinal()
.domain(res)
.range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
// Draw the line
svg.selectAll(".line")
.data(sumstat)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", function(d){ return color(d.key) })
.attr("stroke-width", 1.5)
.attr("d", function(d){
return d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(+d.n); })
(d.values)
})
})
</script>
I changed the location of the csv file, to be local, which would allow my adaptations to be tested, and it worked.
I then modified the code, so it used my CSV file, which looks (with more entries) as follows:-
Time,TimeB,TimeC, Place, Data1, Data2, Data3
2025-03-10,2025-03-10,1, Place1,20.0625,19.76305,47996
2025-03-10,2025-03-10,2, Place2,20.1875,19.88156,49357
2025-03-10,2025-03-10,3, Place3,20.4375,19.98456,50589
I have changed the code to reflect that the column headings are different, and only tried to plot Data1, but I have tried changing the “year” heading to “Time” (which was a string) or TimeB (a date/Time value) or TimeC which is just a number.
However, for every attempt, I receive a Page 404 error.
I am running d3 v4, on an Apache server on a local machine; and I have used Firefox and Chromium on an Ubuntu machine, with identical results.
I cannot see why minor changes to a worked example (on my system) results in it breaking!
Any guidance would be most appreciated.
