Data Visualization: Treemap Diagram - all datasets + transition

Code Feedback
1

Hi everyone, here’s my final Data Visualization Project - Treemap Diagram.

When I finished all the user stories, I decided that it’d be good exercise to add an option to change data sets (in the challenge there are three data sets to choose from). It wasn’t as easy as I thought it’d be but it’s working now!

Finally I added some smooth transitions when you change the data, I think that it looks really cool :smiley:

Please let me know what you think :wink:

1 Like
2

Hi @sitek94. That transition animation is awesome. Did you use a D3 module to achieve that?

1 Like
3

That transition is really great! :smiley:
When I change the dataset, the data inside the tooltip changes but the text in the boxes do not. Could just be my browser though.

1 Like
4

It’s all included in D3, once all the project was ready the transition was actually very simple.

Everything you have to do really is add this line.

.transition()

You add it just before specifying the attributes that you want to animate, for example:

.transition()
.duration(1000) // duration is optional
      .attr('fill', d => d.color)
      .attr('width', d => d.width)
      .attr('height', d => d.height);

These are just random value and attributes but it works more or less like this.

If you want, here’s my source code :wink:

Also, the best freeCodeCamp d3 course on the internet by Curran Kelleher.

3 Likes
5

Thanks! :smiley:

It wasn’t your browser, it was an actual bug, I’ve fixed it already and it should be working just fine now, thanks for spotting that! :wink:

1 Like
6

Thanks. I have to try it in an upcoming project. Is that a 12hour long video? :rofl:

7

To be precise 12h 57m :smiley:

But first 3h is just an introduction to html, css, js and svg, so you can skip that if you don’t need it.

Also, the course is divided into sections so it’s easy to jump straight to the part that you actually need :slight_smile:

1 Like