![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/11\/Les-Miserables-banner.jpg?resize=840%2C319\")
Image credit for Deadline<\/p><\/div>\n
Introduction<\/b><\/span><\/h2>\nLes Mis\u00e9rables<\/i>\u00a0is the first novel in English version I read which assigned by my high school English teacher. It is a monumental French historical novel by Victor Hugo, first published in 1862, and is considered as one of the greatest novels in the 19th century. Les Miserable follows the lives and interactions of 11 major characters and 66 supporting roles, particularly the struggles of ex-convict\u00a0Jean Valjean\u00a0and his experience of redemption. <\/span><\/p>\nIn this data visualization assignment, I try to visual analysis the relationship network between the characters in the book with the dataset created by D. E. Knuth in 1993. Before my visualization, I have two standards for the visualization result:<\/span><\/p>\n\n- Clearly present to the viewers which are the 11 major characters and their networks;<\/span><\/li>\n
- Shows the network between the supporting roles and major roles, and use different colors to show their connections by groups;<\/span><\/li>\n<\/ul>\n
With my diagram, I hope the viewer can generate a clear visual idea about the networks of the characters in Les Mis\u00e9rables.<\/i> <\/span><\/p>\nInspirations<\/b><\/span><\/h2>\n1. Marvel Cinematic Universe as a 3-D network<\/span><\/a><\/span><\/p>\n![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/11\/Screen-Shot-2018-11-07-at-11.05.21-AM.png?resize=840%2C472\")
<\/p>\n
The Straits Times\u00a0visualized the Marvel Cinematic <\/span>Universe<\/span>\u00a0with a 3-D browsable network. Link colors represent the type of relationship, and proximity naturally represents commonalities between characters.<\/span><\/p>\n2. Character social networks in movies<\/span><\/a><\/span><\/p>\n![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/11\/Movie-Galaxies.png?resize=840%2C442\")
<\/p>\n
With movie scripts as the data source, Movie Galaxies quickly shows main characters, the extent to which they interact, and hints at a movie\u2019s timeline.\u00a0<\/span><\/p>\nMaterials<\/b><\/span><\/h3>\n\n- Gephi Wiki<\/span><\/a><\/span>\u00a0\u2013 Github repository with Gephi datasets<\/span><\/li>\n
- Gephi 0.9.2<\/span><\/a><\/span>\u00a0\u2013 A free open-source software that allows creating network and graph data<\/span><\/li>\n<\/ol>\n
Methods<\/b><\/span><\/h2>\n<\/b>1. Dataset Searching<\/b><\/span><\/p>\nSearching for the perfect dataset is always the most difficult part of the assignments. I went to three platforms: CASOS<\/a>, SNAP<\/a> and Gephi Wiki.\u00a0<\/a><\/span>\u00a0I tried 8 different datasets in Gephi software. Finally, I decided to present the dataset of\u00a0Les Mis\u00e9rables<\/i>\u00a0which created by D. E. Knuth in 1993. The reason I chose this dataset is that the data is very neat that avoid a lot of visual overlaps which makes the network is more clear than the others.\u00a0<\/span><\/p>\n2. Getting Inspirations<\/b><\/p>\n
In my inspiration research, there are a lot of great network visualization examples. However, I particularly looking for the diagrams which related to character network in movie or book. Therefore, I can learn from the others’ through similar\u00a0qualities with my\u00a0dataset. I saw many fancy and aesthetic examples with different layouts. But in my perspective, although the aesthetics of the visualization is important, the suitability between the layout arrangement with the dataset itself is more important than aesthetics.\u00a0<\/span><\/p>\n3. Data Visualizing<\/b><\/p>\n
I downloaded\u00a0Les Mis\u00e9rables\u00a0<\/i>dataset as a .gml file, which was a graph file. This dataset is a directed graph with 77 Nodes and 254 Edges.\u00a0<\/span>I imported this into Gephi 0.9.2 and started to try out different layouts and find the most suitable\u00a0one. In order to make my visualization meaningful, I ran the statistics which including Average Degree, Network Diameter, Modularity as well as Connected Components.\u00a0\u00a0<\/span><\/p>\nResults<\/b><\/span><\/h2>\n![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/11\/Screen-Shot-2018-11-07-at-11.13.29-AM.png?resize=768%2C559\")
Force Atlas Layout<\/p><\/div>\n
In the Force Atlas Layout, we can see the 6 communities grouped by different colors. Each community has its own major character and following supporting roles. Also, some characters are interacting with two clusters and serve as a bridge.\u00a0 At the same time, we can see the importance of each community depending on the size of the characters’ circle and the number of characters in the community.\u00a0 The size of the circle shows the interaction degree\u00a0of the characters throughout the whole story.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/11\/Screen-Shot-2018-11-07-at-4.17.06-PM.png?resize=677%2C679\")
Fruchterman Reingold layout<\/p><\/div>\n
I also created this Fruchterman Reingold layout. In this diagram, we can see the connection degree of different characters depending on the thickness of the lines. At the same time, I reset the gravity in order to show the interaction degree of different groups. For instance, the purple community is interacting more with light green and orange communities rather than pink and blue communities.\u00a0<\/span><\/p>\nReflections<\/b><\/span><\/h2>\n
In this data visualization assignment, I try to visual analysis the relationship network between the characters in the book with the dataset created by D. E. Knuth in 1993. Before my visualization, I have two standards for the visualization result:<\/span><\/p>\n With my diagram, I hope the viewer can generate a clear visual idea about the networks of the characters in Les Mis\u00e9rables.<\/i> <\/span><\/p>\n 1. Marvel Cinematic Universe as a 3-D network<\/span><\/a><\/span><\/p>\n The Straits Times\u00a0visualized the Marvel Cinematic <\/span>Universe<\/span>\u00a0with a 3-D browsable network. Link colors represent the type of relationship, and proximity naturally represents commonalities between characters.<\/span><\/p>\n 2. Character social networks in movies<\/span><\/a><\/span><\/p>\n With movie scripts as the data source, Movie Galaxies quickly shows main characters, the extent to which they interact, and hints at a movie\u2019s timeline.\u00a0<\/span><\/p>\n <\/b>1. Dataset Searching<\/b><\/span><\/p>\n Searching for the perfect dataset is always the most difficult part of the assignments. I went to three platforms: CASOS<\/a>, SNAP<\/a> and Gephi Wiki.\u00a0<\/a><\/span>\u00a0I tried 8 different datasets in Gephi software. Finally, I decided to present the dataset of\u00a0Les Mis\u00e9rables<\/i>\u00a0which created by D. E. Knuth in 1993. The reason I chose this dataset is that the data is very neat that avoid a lot of visual overlaps which makes the network is more clear than the others.\u00a0<\/span><\/p>\n 2. Getting Inspirations<\/b><\/p>\n In my inspiration research, there are a lot of great network visualization examples. However, I particularly looking for the diagrams which related to character network in movie or book. Therefore, I can learn from the others’ through similar\u00a0qualities with my\u00a0dataset. I saw many fancy and aesthetic examples with different layouts. But in my perspective, although the aesthetics of the visualization is important, the suitability between the layout arrangement with the dataset itself is more important than aesthetics.\u00a0<\/span><\/p>\n 3. Data Visualizing<\/b><\/p>\n I downloaded\u00a0Les Mis\u00e9rables\u00a0<\/i>dataset as a .gml file, which was a graph file. This dataset is a directed graph with 77 Nodes and 254 Edges.\u00a0<\/span>I imported this into Gephi 0.9.2 and started to try out different layouts and find the most suitable\u00a0one. In order to make my visualization meaningful, I ran the statistics which including Average Degree, Network Diameter, Modularity as well as Connected Components.\u00a0\u00a0<\/span><\/p>\n Force Atlas Layout<\/p><\/div>\n In the Force Atlas Layout, we can see the 6 communities grouped by different colors. Each community has its own major character and following supporting roles. Also, some characters are interacting with two clusters and serve as a bridge.\u00a0 At the same time, we can see the importance of each community depending on the size of the characters’ circle and the number of characters in the community.\u00a0 The size of the circle shows the interaction degree\u00a0of the characters throughout the whole story.<\/p>\n Fruchterman Reingold layout<\/p><\/div>\n I also created this Fruchterman Reingold layout. In this diagram, we can see the connection degree of different characters depending on the thickness of the lines. At the same time, I reset the gravity in order to show the interaction degree of different groups. For instance, the purple community is interacting more with light green and orange communities rather than pink and blue communities.\u00a0<\/span><\/p>\n\n
Inspirations<\/b><\/span><\/h2>\n
<\/p>\n<\/p>\nMaterials<\/b><\/span><\/h3>\n
\n
Methods<\/b><\/span><\/h2>\n
Results<\/b><\/span><\/h2>\n
Reflections<\/b><\/span><\/h2>\n