sa c'est pas an image...

Hi all,

Some time back I wondered if there was a possibility of getting rid of ALL images in a web page. My previous post on CSS-Based sparklines I used position and color to set the lines in a graphic. So I decided to use the same technique to generate an image. I was a little naive because the output generated is actually very large for images of a pixel resolution ;-). Thus, no real application for it! In any case, if you want to see the result I have one css-based image generated here for the terminate bush tag from flikr by "Jennifer H".

The PHP code used for generating this aparently USLESS image is here.

I believe this technique could be used for generating small symbols in a graph which will be isolated within a <div> tag and position somewhere in the canvas of the graph using the z-index property... maybe... more to follow.

Good night,

m

Technorati Tags: css, display, visual

Some reading...

HI all,

I though to share with you my 2 cents on Edward Tufte's books.

"The Cognitive Style of PowerPoint" (Edward R. Tufte)
This is short piece where Tufte describes the limitations of making presentations using PowerPoint (and for that matter a any non-flexible presentation software). It costs $US7 and is worth the money. However, I would not consider it essential nor it tries to be a reference book). I would give it a 3 over 5.

"The Visual Display of Quantitative Information" (Edward R. Tufte)
This is in my opinion the most interesting and fun book to read by Tufte. His approach to quantitative display is basic and a reference. The book has plently of examples of dos and don'ts for visual display of quantitative data. If you have to read only one of Tufte's book I highly recommend this one. I would give it a 4.5 over 5.

"Envisioning Information" (Edward R. Tufte)

This is a very beautifully edited book. A pleasure for your eyes. However, I did not find it that interesting. Nice to have it. Rating 3.5 over 5.

"Visual Explanations: Images and Quantities, Evidence and Narrative" (Edward R. Tufte)
This is another fine piece by Tufte. As of Envisioning Information, this one is very nicely edited and a gem in displaying information. Who else would do something like this but Tufte. I recommend its reading and give it a 4 over 5.

I have also added a permanent link in the right sidebar so that you can access the links directly. By the way, if you find the books interesting and want to buy them following my links then you will be helping to grow my own Amazon account so I can continue buying books on CSS/XHTML and visual display!

Best!
m

Technorati Tags: display, Quantitative, visual

Python code for generating CSS-Based sparklines

Gary Perez at the missing monkey implemented some code in python (see it here) for automatically generating CSS-based sparklines. I am happy that he was inspired in my article CSS-Based Sparklines v1.0.

Good stuff Gary!
m

Technorati Tags: css, sparklines

I have been quiet...

Hi all,

As you can see, I have been very quiet for a while. I plan to come back soon with a summary of things.

Best!
m

CSS-based sparklines v1.0

This is my first try to sparklines without images using only CSS/XHTML. The example illustrates an hypothetical medical report for readings of glucose in blod.

The glucose of patien X is normal. Please, check a sparkline with the last 50 readings and current levels

Glu 80.2

                 . Normal values of glucose in blod are within the dashed red and green lines.

The sparkline contains five types of blocks (or divs). One for regular points, one for maximal point, one for minial point, one for current point, and finally one for the normal levels. The position of a point has a resolution of a pixel and may be positioned by using the CSS position property in conjunction with left and top. See example:

id="point" style="top: 5px; left:47px;"

Style, layout and resolution of the sparkline can be easily changed by modifying the CSS :

#graph {
position: absolute;
display: inline;
margin-top: 2px;
}

#average {
position: absolute;
width: 100%;
border-top: 1px dotted #F79F9F;
border-bottom: 1px dotted #7AD47A;
overflow; hidden;
}

#point {
position: absolute;
width: 1px;
height: 1px;
background: #878B86;
overflow; hidden;
}

#max {
position: absolute;
width: 1px;
height: 1px;
background: #8B0F0B;
overflow; hidden;
}

#min {
position: absolute;
width: 1px;
height: 1px;
background: #008B1A;
overflow; hidden;
}

#current {
position: absolute;
width: 1px;
height: 1px;
background: #091BA5;
overflow; hidden;
}

SPARKLINES

Sparklines, as defined by Tufte, are intense, simple, word-sized graphics. They accomplish one of the principles of graphic excellence "gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest place". Sparklines look like this:


or this:

images from sparkline.org

I have found several projects that use programming languages to generate "on the fly" sparklines:

• PHP coding


• Ruby coding


• .NET coding

So, what is wrong with those implementations? NOTHING. However, can we generate sparklines without the use of images? can we get them using ONLY CSS and XHTML? This is what I intend to try as my first project in the blog.

Will see what it results in...

m

About this blog...

Welcome to datawisualization (Data Wisualizing).

I started that blog inspired by the work of Edward Tufte and my desire to learn on data visualization. Here I will post information on data visualization using ONLY web standards. Some initial projects will be also posted here with the hope that they will attract some other people.

Hope we can enjoy the ride!
m