Talks
Speakers
Events
Topics
Sign in
Home
Talks
Speakers
Events
Topics
Leaderboard
Use
Analytics
Sign in
Suggest modification to this talk
Title
Description
by Starr Horne Many people assume that the only way to add interesting charts and visualizations to their web applications is via JavaScript. But this isn’t true. You don’t need a 900 kB JavaScript library to generate simple charts. Instead you can use SVG and Ruby. Once you learn how to build your own SVG graphics then it’s possible to do cool things like cache them, or use your own CSS and JavaScript to manipulate them. This presentation will show you how. Help us caption & translate this video! http://amara.org/v/GWI5/
Date
Summarized using AI?
If this talk's summary was generated by AI, please check this box. A "Summarized using AI" badge will be displayed in the summary tab to indicate that the summary was generated using AI.
Show "Summarized using AI" badge on summary page
Summary
Markdown supported
In the presentation "SVG Charts and Graphics with Ruby," Starr Horne discusses the effective use of Scalable Vector Graphics (SVG) for creating charts and graphics in web applications using Ruby, challenging the notion that complex JavaScript libraries are necessary for data visualization. Horne explains the advantages of SVG, including its scalability without loss of quality, especially crucial with the rise of high-resolution displays. **Key Points:** - **Introduction to SVG:** - SVG stands for Scalable Vector Graphics and was developed in 1999. It is designed to work well with modern high-density screens defined by pixel-perfect images. - Unlike raster graphics (JPEGs, GIFs) that pixelate when scaled, SVG graphics maintain quality because they are mathematically defined. - **Importance of SVG:** - Increased pixel density of displays has made SVG essential for ensuring graphics look sharp on all screens. - SVG is versatile for not only logos but also animations and illustrations, enabling developers to utilize tools like Snap for animations and D3.js for complex data visualizations. - **Exploring SVG within Ruby:** - Horne emphasizes that SVG can be directly embedded into web pages and manipulated via CSS and JavaScript, providing a high degree of flexibility. - Key methods to include SVG include using <img> tags, <object> tags, or embedding SVG markup directly for maximum control. - **Creating Charts using SVG:** - Horne demonstrates how to create three types of charts: bar charts, line charts, and donut charts. - **Bar Charts:** Constructed using rectangles, the fundamental challenge involves properly positioning them according to their heights. CSS is used for styling these bars. - **Line Charts:** Utilizes the <path> element for drawing lines based on data points, incorporating a visual fill area beneath the curve. - **Donut Charts:** Created using two paths and involves some transformations to adjust the visual orientation correctly. - **Challenges in Using SVG:** - While SVG is powerful, there are limitations, especially in rendering significant amounts of text or complex layouts where HTML might be preferable. - The SVG coordinate system can be tricky to understand, particularly with transformations and layout manipulations. - **Resources for Learning SVG:** - Horne recommends further reading to delve deeper into SVG implementation, highlighting a notable publication from Microsoft. **Conclusion:** Starr Horne concludes by encouraging attendees to harness the power of SVG in Ruby applications for efficient and visually appealing graphics while acknowledging the pitfalls and complexities of working with SVG. Users can access example codes in Horne’s GitHub repository to experiment with their implementations.
Suggest modifications
Cancel
