I'm using trying to use nest and rollup to create a line chart in d3 to display a sum of the value of budget over a number of years. I've exhausted all the tutorials and StackOverflow answers and no matter what I try, I can't seem to get the line to display.
I've attached the code below and would be extremely grateful if anyone could help.
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// parse the date / time
//var parseTime = d3.timeParse("%d/%m");
var parseDate = string => d3.utcParse('%Y-%m-%d')(string);
var parseNA = string => (string === 'NA' ? undefined : string);
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").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 + ")");
// Get the data
d3.csv("data/movies.csv",
function (d)
{
const date = parseDate(d.release_date);
return {
budget: +d.budget,
genre: parseNA(d.genre),
genres: JSON.parse(d.genres).map(d => d.name),
homepage: parseNA(d.homepage),
id: +d.id,
imdb_id: parseNA(d.imdb_id),
original_language: parseNA(d.original_language),
overview: parseNA(d.overview),
popularity: +d.popularity,
poster_path: parseNA(d.poster_path),
production_countries: JSON.parse(d.production_countries),
release_date: date,
release_year: date.getFullYear(),
revenue: +d.revenue,
runtime: +d.runtime,
tagline: parseNA(d.tagline),
title: parseNA(d.title),
vote_average: +d.vote_average,
vote_count: +d.vote_count,
};
}, function(error, data)
{
if (error) throw error;
// format the data
data.forEach(function(d)
{
d.release_date = parseDate(d.release_year);
d.budget = +d.budget;
});
var dataNest = d3.nest()
.key(function(d) {return d.release_year;})
.rollup (function(v) { return {
averagescale: d3.mean(v, function(d) {return d.budget; })
}; })
.entries(data)
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
x.domain(d3.extent(dataNest, function(d) { return d.key; }));
y.domain([0, d3.max(dataNest, function(d) { return d.value.averagescale; })]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(new Date(d.key)); })
.y(function(d) { return y(d.value.averagescale); });
// Scale the range of the data
console.log(y.domain(), x.domain(), dataNest)
// Add the valueline path.
svg.append("path")
.datum(dataNest)
.attr("class", "line")
.attr('d', valueline)
.attr("fill", "none")
.attr("stroke", "steelblue")
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
});
csv file look below
budget genre release_date revenue
311541291 Adventure 2007-05-19 997970603
287364367 Adventure 2006-06-28 416232589
267925511 Fantasy 2007-05-01 925144323
250694215 Adventure 2009-07-07 936552673
237000000 Action 2009-12-10 2787965087
234854812 Action 2003-07-02 510809217
227674222 Action 2004-06-25 892216961
227141479 Adventure 2005-12-14 603516006
224290617 Adventure 2008-05-15 418328331
223947111 Adventure 2006-05-24 489867835
212862494 Adventure 2006-06-20 1134195026
201957392 Action 2009-05-20 374987418
199847039 Adventure 2004-05-13 568033634
199789062 Action 2009-10-10 768841848
199647760 Animation 2009-11-04 324661062
199423751 Adventure 2008-10-30 584402056
197514329 Adventure 2005-12-07 821667244
186552801 Adventure 2004-11-10 345830147
185067417 Adventure 2007-12-04 382714138
184416730 Adventure 2008-05-21 784155917
182717292 Horror 2004-05-05 342888955
181623197 Drama 2008-07-16 986222252
181380908 Fantasy 2007-06-09 179307984
177665614 Animation 2009-03-19 387321058
177642392 Animation 2008-06-22 514483810
176712718 Animation 2009-05-13 742293467
176525068 Adventure 2003-05-15 869209084
175568293 Adventure 2003-11-05 497429697
175568293 Adventure 2003-11-14 248149525
175246571 War 2004-11-21 189151190
175093243 Adventure 2009-08-04 302630178
171297462 Adventure 2004-05-19 1050440296
170626370 Adventure 2006-05-12 193740716
170134271 History 2001-05-21 545913415
167867074 Action 2002-07-03 529763069
166946112 Fantasy 2002-05-01 986914015
166755985 Adventure 2002-11-26 130520046
166755985 Adventure 2002-11-17 514526920
166676130 Adventure 2001-07-02 103572583
166556410 Western 2004-04-07 29658483
166541645 Action 2005-06-10 415486623
166155355 Fantasy 2007-05-17 829694862
165774565 Adventure 2005-07-13 524918267
164398369 Adventure 2003-07-09 769162691
164041563 Drama 2003-12-05 535196121
163928897 Adventure 2005-11-05 979115647
163928897 Animation 2005-11-04 343630666
161050697 Drama 2003-06-19 288434133
160756079 Adventure 2006-11-14 642001866
159962222 Adventure 2006-05-03 424273147
159446982 Adventure 2006-10-22 68978815
158869469 Adventure 2004-12-16 237252993
157740611 Animation 2007-03-23 178071250
155469350 Adventure 2007-06-28 972422163
155469350 Animation 2007-06-22 646465207
155469350 Adventure 2007-06-27 735587454
155034795 Family 2007-10-28 297247776
154222848 Drama 2007-12-14 601827941
152655628 Adventure 2003-07-18 320975551
152565922 Family 2000-11-17 428104198
152488408 Fantasy 2008-11-24 339471811
152488408 Animation 2008-11-21 315122371
152162486 Adventure 2001-11-16 1188663577
151905599 Adventure 2009-04-28 377802253
151468044 Thriller 2009-05-13 360103600
151468044 Adventure 2009-05-20 417149223
Your data is nested. You need to call your line function on the values:
svg.selectAll('path.line')
.data(dataNest)
.enter()
.append('path')
.attr("class", "line")
.attr('d', d => valueline(d.values))
.attr("fill", "none")
.attr("stroke", "steelblue")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.