Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am making a bar chart in d3 but when I run locally and on Git it only shows the axes and not the bars.
Code and data: https://github.com/pshukl21/narrativevis.git
This can be frustrating! Looks like there are a couple of things going on, but the main thing is that your data had an extra line that was causing d3.csv to read it in improperly.
Here's the original, unmodified version of your code in a Codesandbox, only with that space deleted.
Delete the space and you can continue building your chart.
Solution:
A good thing to do when reading data into d3 is to do a quick sanity check by using the browser's developer console.
Using the dev tools to inspect, we can see that it looks like we're not getting a value that our D3 code expects -- it's telling us that the function that renders the rect is seeing NaN, which is a clue for where we can look.
And on closer inspection of the array that d3.csv creates, there's something off -- an extra row with no data. That appears to throw our entire array off!
Sure enough, turns out that Github was trying to warn us about this, too, but the soft colored, quiet warning is pretty easy to miss.
Once that's fixed, there may another problem -- we'll need to convert the values in career_WS to a number, or else our chart won't render and we'll get this helpful warning in the console:
We can do that by looping through our data and using the "+", which is a common replacement for parseFloat when working with D3.
data.forEach((row) => {
row.career_WS = +row.career_WS;
});
After we clean our data and make sure it's being read in, things are coming together.
It looks like there's still some work to do.
Fortunately, that is all in the implementation details -- it's not what your question was asking, but from here it's a matter of setting margins, setting scales, and rendering our chart.
Again, using the developer tools is a great way to understand what's failing. Hope this was helpful! ✌️
Related
I apologize if a question like this already exists somewhere, but I've really searched carefully and haven't found a question like this one.
I have a question regarding Performance Tab in the Chrome Development Tools.
I have a difficulty understanding how exactly to interpret it.
In particular, considering a scenario shown in the screenshot, it seems to me like these operations underscored by the blue lines ("recalculate styles", "composite") have been offset to the right, because when I scrub through the FPS chart bar that shows the animation, the timing of the animation starts and ends exactly where the green region does, instead of where the operations themselves start and end.
Is this indeed due to some offset (perhaps a bug in devtools?) or is there some deeper explanation to it that I'm unaware of?
I would appreciate any help as this has been bugging me for quite a while.
EDIT:
I could paraphrase my question in this way as well:
How did all these frames render if no operations took place like "recalculate styles" and "compositing"?
RESOLVED:
I apologize for not returning to this immediately after I solved the mystery for myself. I was very busy in the meantime.
Hereby, I confirm that yes, indeed, the confusion was due to the cursor being recorded (as suspected in the comments) but at the time I wasn't aware of it.
I want to thank everybody in the comments for their suggestions and their will to help.
... and I've scoured the web for answers.
I boiled down the problem as much as I could in this jsfiddle:
https://jsfiddle.net/tko8rk5j/14/
There are 2 button, you click Go then Boost.
I'm trying to get the whole svg back to its initial position after the end of the Boost animation, so you can play the same sequence again and again.
I attempted various solutions suggested in other posts:
// tl.pause(0);
// tl.restart();
// tl.remove();
I also tried using the repeating TimeLineMax, but that just repeats the first animation sequence after the first click on Go button.
I'm not quite sure about what you're ultimately trying to do (which could greatly influence how I'd recommend building this effect), but here's a fork that I believe delivers the result you were asking for:
https://jsfiddle.net/2q1qrvty/7/
Your code was jumping back to the beginning before your animation even had a chance to run at all. Plus it was re-using the same timeline and constantly adding to it which isn't very efficient.
To make it go back to the beginning and stop as soon as it's done, just use an onComplete callback, like:
tl.eventCallback("onComplete", function() {
tl.pause(0);
});
There are a bunch of other ways to do this, but I don't want to overwhelm you :)
You may have better luck asking your questions in the dedicated GSAP forums at https://greensock.com/forums/
Happy tweening!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a fullpage.js site at the following link that is made up of 2 sections: 1 with a few slides, and a second section which is very long, and which takes some scrolling to navigate.
http://www.heartpatrick.com/indexnew.html
I noticed that the second section scrolls considerably faster now after i have implemented fullpage.js compared to what it used to behave previously. This happens both on a laptop using the mouse wheel, and on my iphone. I also don't get the smooth momentum scrolling effect on my iphone anymore, different from last time.
Can you tell what did I do wrong with my codes?
Thanks all! :)
I also don't get the smooth momentum scrolling effect on my iphone anymore, different from last time.
That's an already known issue when using scrollOverflow: true as you can see in this topic.
Regarding the speed. I see it normal. If you see it in the same way in this demo, then there's nothing wrong.
Try adjusting scrollingSpeed to your liking.
Look up the Initialization section in the docs.
When displaying a box graph, pygal displays values outside of the normal zones. You can see the example on their site as well:
You'll notice that no values are above 16,000 or below -4000 (in fact none are below 0). It just doesn't display properly.
This is posted for anyone who doesn't look on the website for answers (which I don't usually).
There is a solution to this problem, and it is not resolved completely yet - but there is a quick fix.
In the meantime, to make it work (as expected) instantiate the object like this:
box_plot = pygal.Box(mode='extremes')
You'll notice that the above example will be solved, and in fact to my knowledge this is the only way to make box plots work.
To follow the issue: Link to the issue request
I'd like to build OSX widgets to rapidly prototype streaming-data-based viz dashboard components. I'd like to use d3.js to do that displaying, but the most basic things I try get stuck with errors I have no ability / patience to parse.
Before I start wasting time on this, I was wondering if anyone's already trod this ground and won or lost? If you won, how did you do it? If you lost, did you understand why?
OK so it turns out the answer to this question is that it's totally possible and quite rewarding! Just be sure to turn on the "this widget can access the internet" option to avoid really confusing errors.