I've made enough updates over the past week or so on my SVG Web Stats thing to call it 2.0. Here are a list of changes:

  • Added ability to dynamically filter out browsers you don't want to see in the graph (uncheck it in the legend)
  • Added points of interest on the graph (hover to get a tooltip, click to view the associated link
  • Aggregated my data to the weekly level (to smooth weekend dips out)
  • Added some animation to the user interface
  • Added tooltips to the data series for browser identification (works only in Firefox and Opera)
  • Collapsed some older browsers so that the graph are more distinguishable.

Drag and scrollbar performance are blazingly fast in WebKit nightlies on my machine. Just how I imagined it when I first wrote this over two years ago. Opera 9.5, Firefox 3 and Safari 3.1 performance are not bad at all. It doesn't perform well in Firefox 2.

I just noticed that the tooltips are broken in WebKit nightlies...

Note that the legend suffers from what I consider to be a bug in Opera and Webkit nightlies. In these browsers, the legend is 'jittery' when the mouse hits the checkboxes. Firefox and Safari do not have this behavior because I'm using FakeSmile, a JS implementation of SMIL. It seems to me like either mouseout events are firing when they shouldn't or the animation wants to start over at its original value instead of where it is currently. I'm hoping some Opera SMIL guru can stop by.

If you missed the link above, click here to see the demo. I'd be curious to know if it works at all in Internet Explorer with Adobe SVG Viewer. I know it doesn't work in IE+Renesis.

§469 · July 2, 2008 · Software, SVG, Technology, Web · Tags: , , , , · [Print]

Leave a Comment to “SVG Web Stats 2.0”

  1. stelt says:

    Very, very nice. Some remarks:

    – everything below half way the diagonal arrows falls outside my maximized browserwindow (if i go into fullscreen mode the problem is solved). That’s on Firefox 3

    – Maybe change “Firefox other” into “Gecko other” ? (Because of SeaMonkey, Camino, ..)

    – Maybe change “Safari other” into “WebKit other” ? (Because of OmniWeb, Konqueror, …)

    – Maybe have a mouseover text on the browser family name for combined percentages

    – added it to http://svg.startpagina.nl

  2. stelt says:

    I have two click “Submit Comment” twice.

  3. Shelley says:

    That’s beautiful, Jeff. Hey, I like the morphing comments fields.

  4. @Shelley, @stelt: Thanks!

    “everything below half way the diagonal arrows falls outside my maximized browserwindow” => Please tell me if this is fixed now.

    “Maybe have a mouseover text on the browser family name for combined percentages” => Done.

    Change to Gecko/WebKit isn’t so simple. I am really only displaying Firefox and Safari – the other browsers that are based on those engines are not yet at a significant percentage where they merit display (no offense to anyone!). Generally all other browsers (Netscape, Konqueror, K-Meleon, Epiphany, OmniWeb, Flock, Seamonkey, Camino, Iceweasel, iCab) account for less than a combined 1% of my total traffic. One day maybe I’ll rewrite my log file crunching so that it does include all ‘family’ derivatives, but not today.

  5. stelt says:

    Thanks for the mouseover. No longer anything falling off the screen. Though at the top there’s no whitespace now. HELP button is exactly against the edge. Title is about 2 pixels away from it. Perfect enough for me though. On some other sites i had seen 1 or 2 of those very alternative browsers at still almost 1%. Never mind, it’s awesome as it is.

  6. sribharath says:

    thank you,very nice analysis

  7. Thanks for the report, we’re looking into the mouseevent issues. Adding an eventlistener for mouseover/mouseout to do some event logging will tell you what happens.

  8. Breakdown of the legend problem:

    1. The ‘mouseover’ and ‘mouseout’ events bubble

    2. When you mouseover something in the ‘g’ element in the legend that’s fine, it triggers the in-animation

    3. If the cursor is moved from the element that got the ‘mouseover’ originally (the target of the event) then that element will get a ‘mouseout’ event, which will bubble up to the ‘g’ element triggering the out-animation

    4. The element that was moused over gets the ‘mouseover’ event, which bubbles to the ‘g’ element and triggers the in-animation

    Since only one event is handled at a time, this looks ‘jittery’. One way to get away from the problem is to use pointer-events=”none” to ensure that there’s only one element inside the ‘g’ that is the target of the mouse events.

  9. Thanks Erik. But if what you’re saying is true, I should be able to to do:

    <g id="legend">
      <animateTransform type="scale" from="0.5 0.5" to="1.0 1.0" begin="legend.mouseover" .../>
      <animateTransform type="scale" from="1.0 1.0" to="0.5 0.5" begin="legend.mouseout"  .../>
      .... lots of other stuff that might have other mouse event triggers ...

    Shouldn’t putting “legend.” on the event names prevent the bubbling events from triggering the scaling animation? It didn’t when I tried this in the morning.

    And I can’t use pointer-events=”none” because I actually want mouse click events to trigger events (toggling the checkmark and redrawing the graph, for instance).

  10. Hm, I guess I was wrong. The SMIL Spec says that the id part of the event is not necessarily the current target (in other words, it may still be caught on bubbling).

    In that case, I should be able to prevent bubbling or mouseover/mouseout events inside my checkboxes, I guess.