Loading ...
Sorry, an error occurred while loading the content.

66281RE: SVG help needed BIG TIMe and ASAP

Expand Messages
  • maxdunnspi
    Nov 12 6:17 AM
    • 0 Attachment

      Hi Nausheen,

      Welcome to the group and to SVG itself. That is a beautiful example!

      I don't know that anyone here would have time to guide you to the details of how to do this end to end, but if you get into trying it yourself you may find specific questions that the group could answer regarding distinct challenges (animating the path, managing resizing, controlling scrolling from SVG interaction, etc.). Small prototypes of the different behaviors would probably be good to start with.

      It is possible to look at the source; in this case it looks extremely informative: using tools such as Chrome's Developer Tools or Safari's Web Inspector you can really see the details, for example the JavaScript around:


      function clicked(d, i) {
                .tween("scroll", function() {
                  var offset = d3.interpolateNumber(pageYOffset, d.properties.position + (i ? 40 : 0));
                  return function(t) { scrollTo(0, offset(t)); };


      of course you can also see the extent to which they had to go to manage user behaviors, the range of web clients, etc. -- they definitely did a great job and leveraged some wonderful libraries.

      They appear to be using the d3 JavaScript library for much of this: http://d3js.org

      Again, quite a great example.



      ---In svg-developers@yahoogroups.com, <nausheendracula@...> wrote:

      Hi Everyone,

      I am a developer and I haven't worked on svg before. I have to develop a dynamic page like this: http://www.nytimes.com/newsgraphics/2013/10/13/russia/ Also, please see the svg path on left side how is it linked with the content div on the right. Please guide me how to this. It would be a great help.

    • Show all 4 messages in this topic