Posts Tagged: html

UN Global Pulse – The voices of the vulnerable

My entry for the UN Global Pulse – Visualizing the voices of the vulnerable challenge on visualizing.org.

Optimized for HTML5 supporting browsers, specially Firefox. In Safari browser the arrows don’t work well, please scroll with your mouse instead.

View the visualization.

More information:

In the – Country’s Economy vs Meeting your Household Needs – graphs, I showed also the relationships between those answers. This might give us a clue of the relevance of the answers, because those who answered that the economy is much worse but they do better at their household might have a reason not related to the global crises for doing better, or were too subjective.

The part about – Relevant things that people talk about – tries to capture the pulse of the surveyed people about dealing with the household problems and about their quality of life (I chose to treat these to questions together as the answers completed each other in very many cases, the quality of life is also explored further in the graphs below this section). Many answers contained information about more than one issue, therefore they were included in many circles.
The whole graph is not a breakdown of what % of the population thinks or does, it’s actually more similar to a word cloud, it’s an issue cloud. Also, I have included some issues that appeared only few times but I believe some of them are relevant and may give important clues about what the majority talked about, but didn’t mentioned it.

A special case it’s Ukraine, where about 2 thirds mentioned the word “Change” with different attitudes, (from No change, to a change is highly needed, a change is visible) and many more talked about it with other words. Only few said “A change of power” or a “Change of government”, “Justice for the people”, although few, I believe they are very relevant and give “Change” a political meaning besides the economical one.

In order to make the wordclouds about the future, I had grouped together similar words (like change and changing), treated as an expression groups of few words that had a meaning like that, and regarding the answers that were phrases with many words, I had included them in the one word that summed up best the phrase (not necessary written in the phrase, but had the meaning of the phrase). For example, in India, many people told what profession they want to have in future, I grouped them as “profession” so that their plans about careers would show up in the cloud.

The HTML Christmas Tree

Please view this page in FIREFOX, the tree shows well in FIREFOX only.

Made only in html and CSS3, the tree is a very long and complex paragraph.
You can select it with your mouse – it has an interesting shake when selecting it.

Merry Christmas, Happy New Year, & Best Wishes to everyone who views it 😉



««*««««««««««««««««««* «««««*« «««««*«««««««««*««««««««*««««««««*««««««««««« «««*«*«« ««««««««««««««*«««*««« «*«««*««*«««««««*«««*«
««««««««««*««*« «*«««*«««*«*««««*«««*««««««««««««*«*«««««««*««««*««* ««**««««*««« «*««««*««««*«*«««««««*««««««««* *««««««««*«*«««*««««««««*««
««««««««««««*«««««««««*«««««««««*«««««««««* «*««««*«*«««««««««««««*«««*«««* *« ««*««««««««*««**«««*«««««««*«««««*«««««««««««««««*««««*«««««««*««««««««««*«« *«««**««««*««*««««««*«««*«*«««««*«««*«««««*«««««*««*«««««««««««««««««««**«««««*««««*«««*«««*««*««««*«««
««* ««««*«««««««**««««««*«««««««*««««*««««««*«*«««««
««««*«

I wish you Merry Christmas
and a Happy New Year
made by Ixy 2010

CSS is beautiful – Illustrations

Some illustrations drown constucted in html/css. They are made from divs, mainly just experiments with border-radius.

Each element in the flower is a div, with position:absolute;. The rainbow is made from 4 divs one inside the other, positioned relative, colors are from border/background/border/background of each div, one inside the other.

Oh, they work in Firefox, Chrome, Safari, and latest Opera. In Internet Exlporer – only if you want to see a square flower and a square rainbow.


 
 
 
 
 
 
 
 
 

 
 
c
s
s
r
a
i
n
b
o
w