CS7DS4 Diamond Data Visualization - D3, SVG, HTML, CSS
Technologies
D3 JS, HTML, CSS and JavaScript
Chart 1: Size vs Diamond Grades (Price, Carat, Cut and Clarity)
This visualization is an example of 4D data visualization (3 axes plus color for depicting the 4th dimension) where our 3D axis represents the X, Y, and Z properties of the diamond and color depicts one the 4 categories including Price, Carat, Cut and Clarity.
The 3D scatterplot is draggable and the user can view the information from various angles by dragging the mouse pointer
The categories are color coded and the user can change the value of the 4th dimension from the dropdown. Among these 4 categories 2 categories (Price, Carat) are Numeric while the other 2(Cut, Clarity) are categorical.
The dots represent the X, Y and Z (length, width and depth) properties of a diamond. By looking at the graph one can easily tell that the further dot from origin the bigger will the size of the diamond.
For Price and Carat the legends displayed are continuous in nature and gradient and the minimum and maximum values are displayed with respect to the value selected.
For Cut and Clarity the legends displayed are categorical in nature and discreetly color coded and the categories values are displayed with respect to the value selected.
A few noteworthy observations from this visualization:
1. The price of the diamond increases with its size.
2. The carat of the diamond increases with its size.
3. Leads the way for chart two to figure out the relation between price and carat since both are proportional to price.
Chart 2: Price vs Carat
This visualization is an example of a radial chart merged with 2 line charts each depicting the price and carat properties of the diamond.
The price range is in UD dollars and is depicted by the red line.
The Carat is depicted by the blue line.
The angle of the point represents the diamond count.
A few noteworthy observations from this visualization:
1. The price of the diamond follows a pretty smooth distribution as can be seen by the continuity of the red line.
2. The carat values are very randomly distributed.
3. As the price increases the carat weight also increases.
Chart 3: Depth and Table vs Cut and Color
This visualization is an example of a group bar chart where the average Depth and Table percentage are merged with respect to a categorical property which can be either Cut or color based on the user selection from the dropdown.
Смотрите видео CS7DS4 Diamond Data Visualization - D3, SVG, HTML, CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tushar Garg 19 Апрель 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 5 раз и оно понравилось людям.