Link

Goals:

• Practice on creation charts with d3 layouts
• Practice on creation an interactivity

Data

The data contains information about Netflix serials from 1940 to 2017 years. We'll work with the following fields:

• title
• rating (local age rating identifier)
• user rating score
• release year

PART 1

Make two charts in existing svg containers:

1. Bubble chart, on which release year mapped to x position, user rating score mapped to the size of the circle and rating mapped to a color of the circle.
2. Donut chart on sorted array of total serials of every rating.

PART 2

1. Add highlighting a circle on bubble chart on mouseover with a stroke.
2. Add highlighting an arc on donut chart on mouseover with a lower opacity.
3. Add highlighted rating identifier to the element at the center of donut chart.

PART 3

1. Change visibility, position and content of tooltip based on highlighted circle data.
2. Highlight the circles on bubble chart with identifier same as the highlighted arc.

Resources

• bubble-chart
• donut-chart
• tooltip