-
Notifications
You must be signed in to change notification settings - Fork 0
/
description.html
111 lines (98 loc) · 11.2 KB
/
description.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zodiac Insights Visualization - Description</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="description-body">
<div class="description">
<button id="go-to-visualization">Go to Visualization</button>
<h1>Zodiac Insights Visualization - Description</h1>
<h2>Data Processing and Acknowledgements</h2>
<p>
In this project, I aimed to create an interactive visualization of Zodiac sign insights based on demographic data from various sources. The data processing pipeline involved several crucial steps to ensure the final visualization accurately represents the desired information and relationships.
<p><b>Use Python</b></p>
<ul>
<li>1. Data extraction and cleaning: The raw dataset contained a diverse range of demographic attributes for participants. I focused specifically on the Zodiac sign groups, extracting relevant rows and simplifying the segment name column by retaining only the Zodiac sign names.</li>
<li>2. Data consolidation and categorization: I analyzed and filtered rows from a second dataset containing questions pertaining to the most important traits of influencers. I identified eight distinct answer types and combined similar answers (e.g., 'a famous person' and 'They are famous so people like to follow') into a single category, such as 'Famous person'. I then recalculated the percentages for each answer within each Zodiac sign group to ensure accurate representation.</li>
<li>3. Data transformation and hierarchical structuring: To create a sunburst graph for the visualization, I merged the processed datasets and converted them into a hierarchical JSON format. The structure comprised multiple depth levels: depth 0 representing Zodiac signs, depth 1 denoting the four Zodiac elements (Earth, Air, Fire, and Water), depth 2 specifying each Zodiac sign within an element, depth 3 differentiating between social media preferences and influencer preferences, and depth 4 detailing the answer categories for the selected aspect (7 types for influencers and 5 types for social media).</li>
</ul>
<div class="image-row">
<!-- Add the first figure -->
<figure>
<img src="data_preprocess/code_snippet_1.jpeg" alt="code_snippet_1">
<figcaption>Figure 1: Code Snippet 1</figcaption>
</figure>
<!-- Add the second figure -->
<figure>
<img src="data_preprocess/code_snippet_2.jpeg" alt="code_snippet_2">
<figcaption>Figure 1: Code Snippet 2</figcaption>
</figure>
<!-- Add the third figure -->
<figure>
<img src="data_preprocess/code_snippet_3.jpeg" alt="code_snippet_3">
<figcaption>Figure 1: Code Snippet 3</figcaption>
</figure>
</div>
<p><b>Use D3</b></p>
<ul>
<li>1. Fetch and parse the JSON data: The getData function fetches data from the 'data/data.json' file using the fetch API and then parses the JSON data using response.json(). This function returns the parsed JSON data.</li>
<li>2. Create a hierarchical layout: D3 uses a partition layout to create a hierarchical structure for the Sunburst chart. The partition layout is created using d3.layout.partition(), and it computes the arc sizes and positions based on the hierarchical data. The layout is configured with a value accessor function that returns the size attribute of each data node.</li>
<li>3. Bind the data to DOM elements: The svg.selectAll("g") line selects all "g" elements within the SVG container, and the data(partition.nodes(root)) binds the hierarchical data nodes (computed by the partition layout) to these elements. The enter().append("g") creates new "g" elements for each data node that doesn't have a corresponding "g" element.</li>
<li>4. Create and style the arcs: Using the data-bound "g" elements, the code appends a "path" element for each data node and sets the "d" attribute using the arc function. The arc function is created using d3.svg.arc() and is configured with start angle, end angle, inner radius, and outer radius. The arcs are also styled with fill colors and event listeners for interactivity.</li>
<li>5. Create and style the text labels: The code appends a "text" element for each data node and positions it using the "x", "dx", "dy", and "transform" attributes. The text content is set using the name attribute of the data node, and the text is styled with fill color, font size, and other properties.</li>
<li>6. Interactivity and updates: The code provides several functions to update the visualization based on user interactions, such as clicking on arcs, changing the color scheme, and adjusting text size. These functions usually involve changing the attributes or styles of the DOM elements based on the updated data or user inputs.</li>
</ul>
By meticulously processing and transforming the data, I created a robust foundation for my Zodiac Insights Visualization, enabling users to explore and compare various aspects of Zodiac signs with ease and accuracy.
<p><b>Acknowledgements</b></p>
<p>I would like to express my gratitude to Adam Halper for providing the two datasets that have been instrumental in this research. These datasets have contributed significantly to the analysis and understanding of the relationship between Zodiac signs, social media influencers, and shopping behaviors.</p>
</p>
<p><b>Datasets</b></p>
<p>
The data used in this project has been collected from various reliable sources and processed to create an insightful and interactive visualization. I'd like to express my gratitude to the following data sources:
<ul>
<li>1. Social Influence on Shopping: https://data.world/ahalps/social-influence-on-shopping</li>
<li>2. Online Influencer Marketing: https://data.world/ahalps/online-influencer-marketing</li>
</ul>
</p>
<h2>User Handbook</h2>
<p>
To ensure a smooth user experience, follow these steps:
<ol>
<li>Select groups of zodiac signs to compare.</li>
<li>Choose a colorblindness-friendly color scheme if necessary.</li>
<li>Adjust text size and style for better readability.</li>
<li>Explore the visualization and view detailed information about each zodiac sign.</li>
<li>Show all levels in the visualization to enable comparison among each zodiac sign.</li>
</ol>
</p>
<h2>Demonstration</h2>
<p>Hello everyone, I am excited to introduce my Zodiac Insights Visualization web Application, an interactive exploration of zodiac data related to social media influencers and the impact on shopping behavior across social platforms.<br><br>
First, we utilized a dataset from data.world, through a pipeline involving extraction and cleaning, merging and categorization, transformation, and stratification, we created a strong foundation for our sunburst chart. The 0th layer of the sunburst chart explains the research subjects, the 1st layer is the four zodiac groups, the 2nd layer is the three zodiac signs within each group, and the 3rd layer is the two research focuses for each zodiac sign: 1. their opinion on media influencers, 2. the social media that influences their shopping behavior. The 4th layer represents the proportion of answers for each research focus, reflecting the characteristics of each zodiac sign.<br><br>
Let's discuss the design principles behind the web application. I chose a sunburst chart for visualization because it can intuitively display multi-level data and effectively present the hierarchy and interactivity of the data. Our goal was to create a user-friendly interface, with adaptive and responsive design for four screen sizes, including mobile screens.<br><br>
Users can manually adjust the text size or bold the text for easier reading based on their screen size, or revert to the default settings if adjustments are incorrect.<br><br>
I ensured my design is accessible to people with different types of color vision deficiencies and provided customization options. Users can choose from colorblind-friendly color schemes, with eight different schemes available for the eight types of colorblindness. I also added transition animations for each button click, giving the customization module a modern aesthetic.<br><br>
Now, let's dive into the demonstration of this web application. After exploring a portion of the subcategories, users may be particularly interested in one zodiac group. They can remove all other groups and display only the one they are interested in, using the display all depth button to access information for every member of the group. Users can discover similarities between the characteristics of the three zodiac signs in the group concerning their responses to the research questions, as well as explore whether there is a connection between their views on social media influencers and their susceptibility to the influence of different social media on their shopping behaviour. Afterward, users can add new zodiac groups to explore the differences or similarities between different groups. Finally, by clicking reset view, they can return to the normal interaction mode and begin a new exploration.<br><br>
That's my overall design, thank you.</p>
<h2>Copyright Certification</h2>
<p>
© 2023 Yihang Zhao. All rights reserved.
</p>
<p>
MIT License
Copyright (c) 2023 Yihang Zhao
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
</div>
<!-- Add event listener for the go-to-visualization button -->
<script>
document.getElementById('go-to-visualization').addEventListener('click', function() {
window.location.href = 'index.html';
});
</script>
</body>
</html>