D3 Not Rendering Dates <1953

For Visualize Data with a Bar Chart, when I enter my data into the chart the first 25 elements become undefined (basically all the dates pre-1953). I would appreciate if someone could take a look at my code and give me an idea on how to resolve it: https://codepen.io/johnzhou/pen/aGQGQa

1 Like

I figured out my problem. When I selectAll("g") it was also picking up my axises.

Very good work!

After some hours finally could figure it out. (you really got me to find the issue, awesome)

This issue could be becasue of a bug of d3 (not sure, but it looks like this)

I could fix the issue by populating the chart data before x and y axis domain values set.

Your code goes like this:
set x-axis domain data
set y-axis domain data
fill char data

simply fill the data before you go for x and y axis domain data. (please check this edited code)

Now it looks working as expected! Later you may report this to D3 and explain about this bug.

Iā€™m not JS expert, but I think once the library reads a JSON section(let say the data array in your json sample data), it keeps it as cached. And once the cache goes big and big, the library removes the old(added first) elements to keep the cache not so heavy. And once again when you ask data from the same JSON section, it would return data from cache which is truncated.

I also recommend you to fill up the x-axis domain values by data filling function(if applicable), same for max value for the y-axis.

Data like JSON, XML, ā€¦ would be loaded as a context(let say DOM for XML), or parsed as event-based system. For web, front-end and small apps, the cache/context form could work. But for back-end and big data, cache/context will be a serious performance hit. You will find out as you gain experiences.

p.s: I had to wait for 3-4 hours for replying! looks like 6 post per day for each user.

This is also very great you could figure it out yourself with another solution! Awesome.

Keep going on great work! Happy coding.