Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Fabrik of History

Victoria and Albert Museum(V&A) is a museum of art and design, housing a permanent collection of over 2.3 million objects that span over 5,000 years of human creativity. This Project is a visualisation of the relationships between the materials and the authors of the V&A's 19th century collection of fashion.

The articles of the exhibits used for this data visualization were selected using europeana's api (https://pro.europeana.eu/page/search#intro) which also contains archived data from V&A, if they met the following conditions.

  • Category: fashion
  • Country of origin: UK
  • Date: 20th
  • with Iinformations about picture, production year

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.

relationship.jpgrelationship.jpg

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://pin.it/53Jf2PS

- https://www.pinterest.jp/pin/372250725461112920/

- https://www.youtube.com/channel/UC1Nd55u48Pqko8P-F6xcD3Q
)

スクリーンショット 2021-12-20 午後7.42.39.pngスクリーンショット 2021-12-20 午後7.42.39.png
スクリーンショット 2021-12-20 午後7.42.46.pngスクリーンショット 2021-12-20 午後7.42.46.png
group_picture_1340_c.jpggroup_picture_1340_c.jpg
スクリーンショット 2021-11-29 午後9.01.02.pngスクリーンショット 2021-11-29 午後9.01.02.png
generativ.jpggenerativ.jpg
スクリーンショット 2021-11-29 午後9.03.52.pngスクリーンショット 2021-11-29 午後9.03.52.png
スクリーンショット 2021-11-29 午後9.02.50.pngスクリーンショット 2021-11-29 午後9.02.50.png

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

prozcess.jpgprozcess.jpg

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.

20220117010049のコピー.jpg20220117010049のコピー.jpg
スクリーンショット 2021-12-20 午後7.50.37のコピー.pngスクリーンショット 2021-12-20 午後7.50.37のコピー.png
スクリーンショット 2022-02-28 午前7.59.39.pngスクリーンショット 2022-02-28 午前7.59.39.png
datavisualisation-StringOfClouth--03.jpgdatavisualisation-StringOfClouth--03.jpg

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.

スクリーンショット 2022-02-27 午後10.25.47.pngスクリーンショット 2022-02-27 午後10.25.47.png
スクリーンショット 2022-02-28 午前8.07.42.pngスクリーンショット 2022-02-28 午前8.07.42.png
スクリーンショット 2022-02-28 午前8.09.52.pngスクリーンショット 2022-02-28 午前8.09.52.png
スクリーンショット 2022-02-27 午後10.24.14.pngスクリーンショット 2022-02-27 午後10.24.14.png
スクリーンショット 2022-02-18 午後11.11.30.pngスクリーンショット 2022-02-18 午後11.11.30.png
スクリーンショット 2022-02-27 午後10.44.27.pngスクリーンショット 2022-02-27 午後10.44.27.png

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.

スクリーンショット 2022-02-28 午前6.39.36.pngスクリーンショット 2022-02-28 午前6.39.36.png

Dear Data Assignments

Dear Data.jpgDear Data.jpg
dear data 2.jpgdear data 2.jpg

Ein Projekt von

Fachgruppe

Design Master

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Advances in Data Visualization: Networks & Hierarchies

Entstehungszeitraum

Wintersemester 2021 / 2022