100 Days of Code: Day 3
Continued learning D3 tonight and covered making a basic SVG chart, using scales to auto-size a chart, and using transitions and animations to give the chart some cool effects.
The static SVG chart built upon what was covered in the earlier video and showed the results of creating a static chart. The top most bar is actually 720 and goes beyond the 500 scale of the chart. You can also see how there is a lot of room on the far right where the data ends.
Scaling was covered next and shows how a chart can be set to auto-fit it’s data so the bottom part of the chart is filled across the bottom and the top-most bar can be adjusted if needed. A gradient was applied to the chart so it isn’t just one solid color across the board.
Last, a tooltip that appears when you hover over the bar and a bounce animation effect were added to the chart.
I think this turned out pretty cool in the end. Tomorrow will be the final video in the series so I’m guessing it’s going to cover everything we did over the previous seven videos.
And that’s it for me tonight awesome people. And as always, stay classy and code on!
