Can't seem to create a stacking barchart with the data

[JonahRileyHuggins]

On the branch 'q2', in q2.js I've been trying to create a stacking bar chart, with the average revenue of each genre being each individual bar segment, the y-axis displaying average revenue, and the x-axis displaying ratings.

Getting an extra set of eyes on the stacked function with my script (lines 27-31) data would be much appreciated:

d3.json("data/revenue_by_rating_and_genre.json").then(function(data) {
  const dimensions = {
    width: 800,
    height: 400,
    margin: {
      top: 40,
      right: 0,
      bottom: 50,
      left: 115,
    },
  };

const series = d3.stack()
    .keys(d3.union(data.map(d => d.genre))) 
    .value(data, d => d.average_revenue)
  (d3.index(data, d => d.rating, d => d.genre));

 console.log(series)

[IuricichF]

I am not able to debug just by reading code, but I'd suggest you use the console log commands to keep track of what is happening for each variable. Like, d3.union is returning what you want? https://github.com/JonahRileyHuggins/DataVizDashboard/blob/98a39e6820bece0bbf8713a91896dad6a36beabd/javascript/q2_copy.js#L29C11-L29C43 And d3.index? https://github.com/JonahRileyHuggins/DataVizDashboard/blob/98a39e6820bece0bbf8713a91896dad6a36beabd/javascript/q2_copy.js#L31C4-L31C47

The other thing is that you are using attributes of d3.stack that we did not use in class. If you do not have full control over those parameters, just reshape the dataset to be in the form that you'd like and pass the dataset as we did in our lectures without using value or other attributes.

[JonahRileyHuggins]

@IuricichF If you wouldn't mind taking a look here at the documentation for the d3.stack() function, I formatted my data to match their provided example and used the same attributes provided in the example. Could you comment on where I might've made a mistake?

Also, if you checkout the q2 branch, you should be able to view the specific problem in the console. I will provided it here as well. If you look at the console.log of the stacked data:

  const series = d3.stack()
    .keys(d3.union(data.map(d => d.genre))) // apples, bananas, cherries, …
    .value(data, d => d.average_revenue)
  (d3.index(data, d => d.rating, d => d.genre));

 console.log(series)

it returns stacked data with NaN for the size of each stack.

0: Array(10) 0: Array(2) 0: 0 1: NaN data: Array(2) 0: 3.5 1: InternMap(19) [[Entries]] 0: {"Action" => Object} key: "Action" value: {rating: 3.5, genre: 'Action', total_revenue: 1980164224, count: 38, average_revenue: 52109584.84210526}

[IuricichF]

My objective and role is not to debug the issue for you but to provide you with the tools to debug the issue yourselves.

If the series is getting out incorrect, it means that: A- the input data you are providing is in bad shape (d3.index, etc.) B- the keys are not well formatted (d3.union etc. is not returning an array of keys) C- the value accessor is not working (d.average_revenue)

As far as I see, you are printing out variables (series) demonstrating the problem, but you are not printing variables showing the possible root of the problem.

As for the series part, aside from NaN values, are the other numbers reasonable? Is the number of stacks you get aligned with the index? Are the number of bars aligned with your keys? Is there any situation where you are treating numbers as strings or vice versa?

Best, On Nov 14, 2023, 11:58 AM -0500, Jonah Riley Huggins @.***>, wrote:

@IuricichF If you wouldn't mind taking a look here at the documentation for the d3.stack() function, I formatted my data to match their provided example and used the same attributes provided in the example. Could comment on where I might've made a mistake? Also, if you checkout the q2 branch, you should be able to view the specific problem in the console. I will provided it here as well. If you look at the console.log of the stacked data: const series = d3.stack() .keys(d3.union(data.map(d => d.genre))) // apples, bananas, cherries, … .value(data, d => d.average_revenue) (d3.index(data, d => d.rating, d => d.genre));

console.log(series) it returns stacked data with NaN for the size of each stack. 0: Array(10) 0: Array(2) 0: 0 1: NaN data: Array(2) 0: 3.5 1: InternMap(19) [[Entries]] 0: {"Action" => Object} key: "Action" value: {rating: 3.5, genre: 'Action', total_revenue: 1980164224, count: 38, average_revenue: 52109584.84210526} — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[JonahRileyHuggins]

@IuricichF Sorry about that! I understand you're role and should've taken more time to write a proper response . I'll take your advice and restructure my code to fit the examples you gave in your video lectures. I think that's the best course of action. The rest of this message is to address the points you've asked.

As far the other console.logs, I've systematically walked through each variable with the examples provided by D3, console logging each. They seem congruent to me, but I have a lot to learn with JS and it might save more time to work from the reference point you've already provided. I can post those here too if you'd like, otherwise I'll work towards your first suggestion and restructure the dataset.

"As for the series part, aside from NaN values, are the other numbers reasonable?" - I believe so, but I'll double check

"Is the number of stacks you get aligned with the index?" - The output array does have the same number of stacks as there are genres. As well, the d3.union attribute does provide a list of strings that correspond to the 20 different genres.

"Are the number of bars aligned with your keys? " - The bars were intended to be "ratings" and the keys for each stack were "genre", that could be a potential problem.

" Is there any situation where you are treating numbers as strings or vice versa?" - I went through this dataset in python and tried to rigorously vet the dataset for proper notation (all integers, strings, floats being recognized as such), so unless the output dataset from python introduced this, I would assume not.

Thanks for your time Dr. Iuricich!

[IuricichF]

No problem about that!

Checking the dataset in Python is good, but here is javascript taking the lead. Double check from the console how the single values are interpreted by javascript. Typically, if you have “..” That will be interpreted as a string, while if you have just a number, that will be interpreted as an int/float.

On Nov 14, 2023, 1:35 PM -0500, Jonah Riley Huggins @.***>, wrote:

@IuricichF Sorry about that! I understand you're role and should've taken more time to write a proper response . I'll take your advice and restructure my code to fit the examples you gave in your video lectures. I think that's the best course of action. The rest of this message is to address the points you've asked. As far the other console.logs, I've systematically walked through each variable with the examples provided by D3, console logging each. They seem congruent to me, but I have a lot to learn with JS and it might save more time to work from the reference point you've already provided. I can post those here too if you'd like, otherwise I'll work towards your first suggestion and restructure the dataset. "As for the series part, aside from NaN values, are the other numbers reasonable?" - I believe so, but I'll double check "Is the number of stacks you get aligned with the index?" - The output array does have the same number of stacks as there are genres. As well, the d3.union attribute does provide a list of strings that correspond to the 20 different genres. "Are the number of bars aligned with your keys? " - The bars were intended to be "ratings" and the keys for each stack were "genre", that could be a potential problem. " Is there any situation where you are treating numbers as strings or vice versa?" - I went through this dataset in python and tried to rigorously vet the dataset for proper notation (all integers, strings, floats being recognized as such), so unless the output dataset from python introduced this, I would assume not. Thanks for your time Dr. Iuricich! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>