Data for Change [ Process : Design & Coding ]

Since I was a bit lost when doing data for change, I focused on visualising data and design after the second crits and getting feedback. 

<First Page>

I forgot to put a legend on the panel when I showed them last crits, so I wrote the meaning of each colour. The most difficult in design was the first page because of layering the map. I wanted to show how many learning methods each country are using. For example, while some countries implement both Online and TV, some countries provide 4 learning methods (online, tv, radio, paper). My intention from the first page is that it is not unconditionally good even though they provide whole learning methods. Because we can find there are many countries that use 4 learning methods, but when users scroll down, they will find they all just implement online/tv/radio class even they do not have enough equipment. And users can find there is a huge gap between the rural and the urban on the last page. It means mostly they all just superficial action to seem they solve the problem. 

The difficult design I mentioned above was to give a blend mode on each layer. It did not seem what I expected every time I tried. I think this is why I did not understand the concept of blending mode.

[Experiment 1: original colour layering] : most blending modes made the map dark. And there were over 5 colours when I gave soft light and hard light. 

[Experiment 2: change the colours to each different colour, layer them and give blending mode]

: I tried every mode but it did not work.

[Experiment 3: change the colours to the same colour, layer them and give blending mode]

: The first one is multiply and the second one is hard light but still did not work.

[Experiment 4: delete the no data section except for one, layer them and give blending mode]

:  still not working

[Solution]

Aside from these experimentation, I did a lot but it did not work. But I solved it with five layers which were whole white colour of map, 4 layers with each coloured section without grey colour.

I gave all layers multiply except for white. At first, I gave all layers border but it did not seem smooth so I deleted the border on coloured layers.

<Second Page>

As you enlarge the photos, one of images is not clear. I changed png file to svg file for the background image.

I changed the green colour scheme from monotone gradient colour to multi hue gradient colour to increase the contrast. Because shades of green were too similar. I have tried to use green to purple as Tiz mentioned but I liked the yellow to green more. And I added the green bar showing the data when hovering instead of scrolling to next page to show and compare both data.

[Coding]

It was not really difficult to do coding than the borders &boundaries project. 

Originally, I wanted to use the SVG file by using <id element> and changing the colour on the map. However, I already used in borders & boundaries project and I wanted to try to use other code. And I wanted to use parallax scrolling effect on the background to change the map colour smoothly. I have not tried it by coding SVG because it ran well with only using a png background. But I just wanted to change the background file png to SVG file with no definite idea. And I realised that I can use the SVG file in the background as well through this experiment (maybe). I thought png is the highest quality format when I save or use the image but I got to know that I need to use if I want the more clear image when I design it in Illustrator. I actually had no idea about the reason why we use SVG file when we did IHR showcase and I thought it was just for the easy way to code.

I was trying to not use javascript on data for change project because I feel like I am using the javascript without understanding entirely. So I used HTML and CSS only. Instead of not focusing on javascript, I focused on various code in HTML and CSS. In HTML, I have never used <span>, <h>,<p> tag for the last projects, but I used this time and tried to use <Id> element as well, not only used <class> element.  In CSS, I tried to understand vh,vw again because I had a problem when I did borders project, which looks different and shows huge space(margin) when I open the link on the desktop. So I kept trying to use and fixed it when I faced the trouble with vh and vw. I used padding for the first time as well during the projects. I totally understood {display} and {visibility} when I use the hover. I tried to use the code based on what I have learned in the course like h tag, using parallel, vh&vw and giving animation.

The one I felt disappointed was menu bar