background preloader

Amnon P5 – Experiments with Processing by Amnon Owed CSS Click Events An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifications. We can now do a lot of stuff we couldn’t have done without JavaScript or images before, like rounded corners, gradients, responsive layouts, grid stuff, transparency in colors, and so much more. But one thing we’ve always been missing is the possibility to handle click events with CSS. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. Disclaimer This blog post is about showing the possibilities of CSS and some clever hacks. Plus, some of these techniques are not well supported by browsers, meaning it’s even more borderline; we intend to have some fun pushing the limits of CSS. Checkbox hack Aaaaah, the checkbox hack. Pros

Well-formed data Filter Functionality with CSS3 Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints. The Markup Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style. I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: Let’s move on to the item list: Example 1 Example 2

ガスバス Vis Group | Voyagers and Voyeurs: Supporting Asynchronous Collaborative Information Visualization The collaborative visualization system. (a) An interactive visualization applet, with a graphical annotation for the currently selected comment. The visualization is a stacked time-series visualization of the U.S. labor force, broken down by gender. Here the percentage of the work force in military jobs is shown. (b) A set of graphical annotation tools. abstract This paper describes mechanisms for asynchronous collaboration in the context of information visualization, recasting visualizations as not just analytic tools, but social spaces. materials and links citation

Looking 4 data visualization