Reputation: 333
Rendering D3 data from CSV
This is more of a request for a code review, but I cannot for the life of me get this .csv data to render properly as a line-chart in D3...
Below is the code I've written.
So far, I've only been able to render the y-axis and the axis title, but I can't seem to render the data. Perhaps I'm doing something wrong, but simply can't see it.
Help and advice is hugely appreciated.
JavaScript File
// ./weather-app/d3/testing-dsky-d3.js
const fname_forecast = 'forecast-hourly-temp.csv';
const path2File = './csv/';
const parseDateTime = d3.timeParse('%Y-%m-%d %H:%M:%S');
d3.csv(path2File + fname_forecast)
.row((data) => {
return {
date: parseDateTime(data.datetime),
temp: +data.temperature
}
})
.get((err, data) => {
if (err) {
console.log('\nErrors!\n', err)
} else {
console.log(data);
const minDate = d3.min(data, (d) => { return d.date; });
const maxDate = d3.max(data, (d) => { return d.date; });
const minTemp = d3.min(data, (d) => { return d.temp; });
const maxTemp = d3.max(data, (d) => { return d.temp; });
const svg = d3.select('svg'),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = +svg.attr('width') - margin.left - margin.right,
height = +svg.attr('height') - margin.top - margin.bottom,
g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
const x = d3.scaleTime()
.rangeRound([minDate, maxDate])
.domain([minDate, maxDate]);
const y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([height, 0])
const line = d3.line()
.x((d) => { return x(d.date); })
.y((d) => { return y(d.temp); });
g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x))
.select('.domain')
.remove();
g.append('g')
.call(d3.axisLeft(y))
.append('text')
.attr('fill', '#000')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '0.71em')
.attr('text-anchor', 'end')
.text('Temperature (degC)');
g.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('stroke-width', 1.5)
.attr('d', line);
}
});
The HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Test: Rendering DarkSky Data w/ D3</title>
<script type='text/javascript' src='./learn/d3.v4.js'></script>
</head>
<body>
<h1>Test: Rendering DarkSky API Temperature Data w/ <code>D3.js</code></h1>
<hr><br>
<div id='container'>
<svg width='960' height='500'></svg>
</div>
<script type='text/javascript' src='testing-dsky-d3.js'></script>
</body>
And then some sample .csv file
datetime,temperature
2018-04-04 12:00:00,46.98
2018-04-04 13:00:00,48.43
2018-04-04 14:00:00,49.63
2018-04-04 15:00:00,49.85
2018-04-04 16:00:00,48.98
2018-04-04 17:00:00,47.95
2018-04-04 18:00:00,47.35
2018-04-04 19:00:00,47.08
2018-04-04 20:00:00,46.79
2018-04-04 21:00:00,46.62
Upvotes: 3
Views: 640
Answers (1)
Reputation: 38221
You need to set your scales' domains and ranges properly,
Here:
const x = d3.scaleTime()
.rangeRound([minDate, maxDate])
.domain([minDate, maxDate]);
You are setting a scale to take values from minDate to maxDate (the domain) and map them to values from minDate to maxDate (the range). You need to modify this:
const x = d3.scaleTime()
.rangeRound([0,width]) // values to map to (x coordinate values)
.domain([minDate, maxDate]); // extent of input values/values needing scaling
Same for your y axis:
const y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([height, 0])
You need to differentiate your range and domain. The scale above simply takes a value between 0 and height and returns the same value.
To fix your graph you need to properly set:
- Domain to an extent of input values in your dataset (temp,date,etc)
- Range to an extent of output values, usually coordinate values for x or y (or color, radius, etc).
Applying these changes (I hard coded a domain of [40,50] for temperature) like so:
const x = d3.scaleTime()
.rangeRound([0,width])
.domain([minDate, maxDate]);
const y = d3.scaleLinear()
.domain([40, 50])
.rangeRound([height, 0])
and otherwise using your code and data, I get:
Upvotes: 2