Hello all ,
Hope someone is willing to take a look at my project.
7 out of 14 are failing.
I’m thinking part of the problem might be that I parseInt the
date?
Maybe it’s possible to fix that with minimal change to the code?
I tried fixing it by using const max = Math.max(parseInt(arrYear)) , the same for min , and used that instead where needed, so const gWidth = max/arrYear.length; , but it just broke the code.
hope someone is willing to help , thanks 
You just need to look a the errors raised by the tests and address them.
On #4 about the ticks, you are trying to do the ticks manually instead of letting D3 handle them, and the tests are not find the x-axis ticks.
On #7, the error is telling you that you are setting the data-date as 1947 and not 1947-01-01 because of how you set it at line 75.
On #9-11, you have positioning issues which usually indicates that calculations of size, position, or axis scale are not correct. But it’s hard to check the alignment since the graph is so much larger than the window.
Finally, on the tooltip errors, you can’t pass these tests with a tooltip like was done in the practice lessons. You will need to create a div with the appropriate attributes and information that becomes visible when you mouseover a bar and becomes invisible when you mouseleave a bar. There’s plenty more hints on how to do this in the forums.
Thanks for the reply Jeremy. I tried fixing error 4 , but it’s just not clear how it’s wrong as I see all the years from 1947 to 2015 on the x-axis?
And I’m even more unclear about the 9-11 errors because when I hover over the bars, all four quarters for each year are there and right around each year tick?
Hoping for some more insight , thanks!
All the years are there, but it’s unclear if all the tick marks have the appropriate class="tick" attributes. If you’re working on the project locally, it’s easy to examine it the console, but less so if you’re just using codepen. D3 can generate the ticks automatically and they will have the correct attributes.
As for the alignment issues, if you look at the GDP for Q1 1950, it’s $281B. The first y-axis tick mark is 1,000, but I have to scroll up nearly a page to see it, and it’s obviously more than 4 times larger than the $281B bar, so there is a scaling problem on y, which probably explains the 9 and 11 errors. For 10, since you used a linear scale for the x-axis and not a time scale, my guess is the test is asserting that a date and a number are equal, and they are not.
Also, as I mentioned before, there is a size problem with the graph, at least in chrome. It’s about 1.5x wider than my viewport and about 10-20x taller on my notebook. You can set the svg width and height independently of the data sizes so that it’s viewable on the screen.
I’m still stuck on this. I’m not looking at the tooltips for now,
but the chart is only visible if I remove the xScale on lines 57 and 59?
I’m thinking the error lies in the xScale , I’m using scaleTime() now,
but the problem , I think , lies in the domain.
I’ve tried:
.domain([new Date(arrYear[0],new Date(arrYear[arrYear.length-1]))])
.domain([parseInt(arrYear[0]),parseInt(arrYear[arrYear.length-1])])
.domain([new Date(parseInt(arrYear[0])),new Date(parseInt(arrYear[arrYear.length-1]))])
but, new Date(arrYear[0]) will not correctly return the first quarter first year entry, but just one day earlier.
Hoping for some insight 
This one is easy. You output the time to the console and on my computer, it’s the day before in US central time (6 hours before in CST). So that’s an offset error due to the date data not having a timezone. You may want to look at d3.timeParse() to help handling the dates.
Right now, all your bars are on top of each other, so that means either your x axis data is not right (the dates) or there is something wrong with the width or x attributes. The heights are correct as you can see by inspecting elements in the console. The width should be the same for every bar and the x should increment with each datum. For you x scale domain, don’t forget it should cover from the beginning of the first quarter’s data to the end of the last one (not the start).
Sorry, to ask again, but I still can’t get the correct date returned.
line 29 shows the error, which is strange because to me it looks like I’m doing what is explained here at the top of the page :
d3-time-npm
And I also don’t see what I’m doing wrong with the x,y, and width attributes ?
Hope someone is willing to take a look.
Thanks
The best documentation is the official D3 documentation. There are good examples other places, but like a lot of JS documentation, it gets out of date quickly. Most of the examples on the web are old. Also, D3 is actually composed of many small packages like the one you mention, but they are all included as part of the plain D3.
Your error around line 29 is because you used d3.timeFormat() and not d3.timeParse(). This will set the min and max (as Date() objects) you need for a time scale axis. Then, you need to use the same parsing function when you calculate the x positions of your rectangles around line 70. The d3.scaleTime() only uses Date() objects for input (see this). You’ll also need to set a width for the rectangles, which can be a constant or you can calculate it. I used a constant width, but you can read this discussion for ideas on calculating it.
So I should use timeFormat() with scaleTime() or timeParse() with scaleLinear()?
I cant find anywhere online that explains this.
Could I use parseInt(arrYear[0]) instead of timeParse() ? As really only the year is displayed on the x-axis
So the code that’s wrong is just the xScale domain ?
These are probably stupid questions, but right now I’m very confused about this.
That master API github link is not beginner friendly , it’s just daunting 
I will look for d3 tutorials on youtube , that I will work through . I probably need more tutorials ,just the basics isn’t enough.
Thanks for any help!
if its any help you can check my project on the matter which i completed few days ago
Its not perfect and im also learning on the d3 framework, but maybe you will find some answers in my code
Make sure to widen the JS panel in editor mode, i tend to not break the line of code^^
https://codepen.io/Sylvant/pen/RwoOxgy
The documentation is advanced, but it’s definitive and up to date. In JS, that can’t be overstated.
d3.timeFormat() is for creating string representations of Date() objects. You’re trying to convert a string to a Date() object, 1947-01-01 for instance. You can use new Date('1947-01-01') and it will understand what you mean, but it makes a lot of assumptions about local time, UTC, and offsets, and leads to your earlier problem with the date being the day before. d3.timeParse() returns a Date() object without those problems. For example:
const d3 = require('d3');
const quarter = '1947-01-01';
const parse = d3.timeParse('%Y-%m-%d');
console.log(new Date(quarter));
console.log(parse(quarter));
outputs
1947-01-01T00:00:00.000Z
1947-01-01T06:00:00.000Z
The first will be presented in local time as the day before (at 6 PM); the second will be midnight on the day (this is for US Central Standard Time).
You can then use that in a d3.scaleTime() scale for your axis. So to position your bars horizontally, you parse the dates in the data with d3.timeParse() and use that result as the input to the xScale and it will draw the bar in the correct place. You will still have to decide on the width (constant or calculated).
D3 is very flexible and you don’t have to do anything any one way. There are correct ways to use a linear scale or a time scale for this project; it all depends on your preference. I found it much easier with a time scale, but as always, ymmv.
Hi again,
Hope someone is willing to help again.
I’ve been stuck a few days trying to figure out tooltips. It sort of works, the tooltip appears in the bottom below the x_axis. Test 14 seems to fail , although I’ve seen it pass a few times.
I’m not at all sure anymore what it could be , as the errors says:
Tooltip’s “data-date” property should be equal to the active area’s “data-date” property: expected ‘2003-4-01’ to equal ‘2003-04-01’
which is not very helpful 
now I’m just now noticing the missing zero in the date, not sure how to fix that.
Thanks 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.