Building Year in Review 2014 with SVG and Rails

As we have for the past 3 years, Shopify released a Year in Review to highlight some of the exciting growth and change we’ve observed over the past year. Designers James and Veronica had ambitious ideas for this year’s review, including strong, bold typographic treatments and interactive data visualizations. We’ve gotten some great feedback on the final product, as well as some curious developers wondering how we pulled it off, so we’re going to review the development process for Year in Review and talk about some of the technologies we leveraged to make it all happen.

Shopify logo
Shopify
•
Tessa Thornton
•7 min read•intermediate•
--
•View Original
AngularHTMLJavaScriptRailsRuby

Overview

The article discusses Shopify's development process for their 2014 Year in Review feature, focusing on the use of SVG (Scalable Vector Graphics) and Rails to create interactive data visualizations. It highlights the advantages of SVG over CSS for web graphics and provides insights into various techniques employed in the project.

What You'll Learn

1

How to create animated SVG charts using d3.js

2

Why SVG is preferred over CSS for web graphics

3

How to make SVG graphics responsive on different screen sizes

4

How to implement offset text effects in SVG

Prerequisites & Requirements

  • Basic understanding of SVG and web graphics
  • Familiarity with d3.js library(optional)
  • Experience with Rails and JavaScript

Key Questions Answered

How did Shopify use SVG for their Year in Review project?
Shopify utilized SVG to create interactive graphics and animations for their Year in Review project. They leveraged d3.js for data-driven documents, allowing for dynamic visualizations that are resolution-independent and responsive, enhancing user engagement without relying on traditional image formats.
What techniques were used to animate SVG elements?
The article describes using the stroke-dashoffset property to create animations that make SVG paths appear to draw themselves as users scroll. This technique, inspired by other designs, allows for visually appealing effects without complex coding.
What are the key attributes for making SVG responsive?
To make SVG graphics responsive, the article emphasizes the importance of the viewBox attribute, proper positioning techniques, and adjusting padding based on the graphic's aspect ratio. These elements ensure that SVGs scale correctly across different devices and screen sizes.
How can SVG patterned backgrounds be created?
SVG patterned backgrounds can be created using the <pattern> element, which allows for unique fills in SVG graphics. The article explains how to set explicit dimensions and attributes to maintain the pattern's integrity when applied to SVG elements.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
Svg
Used for creating interactive graphics and animations.
Frontend
D3.js
Library for making data-driven documents and visualizations.
Backend
Rails
Framework used to generate SVG code dynamically.

Key Actionable Insights

1
Utilize SVG for interactive web graphics to enhance user engagement.
SVG's resolution independence and flexibility make it ideal for creating dynamic visualizations that can adapt to various screen sizes, providing a better user experience.
2
Leverage d3.js for data-driven SVG visualizations.
Using d3.js allows developers to bind data to SVG elements, enabling the creation of complex visualizations without the need for traditional design tools like Excel or Illustrator.
3
Implement responsive design techniques for SVG graphics.
By using the viewBox attribute and proper CSS positioning, developers can ensure that SVG graphics scale appropriately across devices, maintaining their visual integrity.
4
Explore offset text effects in SVG for unique typographic designs.
SVG allows for advanced text styling that can be difficult to achieve with CSS, making it a powerful tool for creating visually striking headlines and text elements.

Common Pitfalls

1
Failing to set the viewBox attribute correctly can lead to scaling issues.
Without a proper viewBox, SVG graphics may not maintain their aspect ratio when resized, resulting in distorted visuals. Always ensure the viewBox is set to the correct dimensions to avoid this problem.
2
Not accounting for the aspect ratio when setting padding for responsive SVGs.
If the padding-bottom is not set according to the graphic's aspect ratio, the SVG may be cut off or improperly displayed. It's crucial to calculate the correct padding based on the width-to-height ratio of the SVG.

Related Concepts

Svg Graphics
D3.js Visualizations
Responsive Design Techniques
Rails Dynamic Content Generation