approach and objectives
This is an excellent archive of V&A that combines a great deal of information, all of which can be viewed online.
but…
It's a challenge to navigate through all the pages from start to finish with a small pager. For example, if you just search for articles belonging to the fashion category, you will get 47,531 hits. Thus, it is expected that only the first and last few pages of the voluminous category collections in V&A's online archive will be viewed.
Therefore, I visualized the data of V&A collections into a single web page, and made it possible to see at a glance the parts of them that are related to the fashion category. By using network dat visualisation to represent the „who“, „what“, and „when“ information about the collection, visitors can now enjoy the collection in a simpler way.
This site is intended to make collecting enjoyable for the following target groups:
- Who have visited the museum or would like to visit in the future.
- People who want to learn about the history of fashion.
Children.
- People who are not familiar with computer operations. etc.
related works/projects
Inspired by the following works, I used the following keywords to create the design.
- Organic and Geometic elements form
- Monotone
- interactive with mouse hover
JER THORP : Infinite Weft ( https://www.jerthorp.com/infiniteweft )
Three Hundred Years ( https://histography.io/ )
Generative Designs (
- https://www.youtube.com/watch?v=5xQvXQU2x64
- https://www.pinterest.jp/pin/372250725461112920/
- https://www.youtube.com/channel/UC1Nd55u48Pqko8P-F6xcD3Q
)
methods
Process 1
Data collecting with the following tools from europeana's api (https://pro.europeana.eu/page/search#intro))
- Google colaborate
- Python
Process 2
Data sorting of SVG using Google colaborate to extract only those articles that meet the following specific conditions.
- Category: fashion
- Country of origin: UK
- Date: 20th
- with informations about picture, production year
Process 3
Design and implementation with the following tools
- Illustrator
- Hand sketch
- D3.js
- html
- css
- javaScript
design process
As a basic premise, I wanted to create some kind of connection between the theme of „fashion“ and the elements that make up the graphics. In the process of input, I learned about an artist who create textiles based on data visualization. And I attempted to visualize the „ strings“ used in „clothes“ as network objects like the vertical and horizontal strings of a textile. I repeated the sketching process many times, using hand-drawn sketches and blend tool in Illustrator in parallel, and finally achieved the current design form that can be also implemented programmatically in d3.js.
design and implementation
The path corresponding to the contents described in the json file will be created. I used the components from the following website and modified the code based on the sketch.
https://www.d3-graph-gallery.com/graph/arc_vertical.html
As an interaction behavior on mouse hover, the hovered path and the associated author's name are highlighted in red, and the image of the corresponding article is also displayed.
conclusion and outlook
In this production process, creating graphics based on data in an artistic field was a good learning experience for me, as it was a completely new approach that was different from the graphic design for purchase purpose advertising that has been my main job. Researching various ways to convey information and data has greatly contributed to broadening the scope of my own design. By spending a lot of time researching and providing input on how to communicate information and data, I was able to broaden the scope of my own design.
At the beginning of the course, I did not have enough programming knowledge, so I started by learning javaScripts and D3.js. Through trial and error using a lot of sample code and with the help of our instructor Mark-Jan, I was finally able to create a prototype. But there are still some bug and I was not able to finish everything what I wanted to do.
Current bugs
- Highlighted areas are cut off in the middle.
- The tooltip is displayed in the wrong position when scrolling the screen.
- Hovering over the author's name does not highlight some parts.
Through my programming studies, I have come to understand what the code represents, but I am not yet able to create new programs on my own, so I would like to continue my programming studies.
Dear Data Assignments
