Creating Custom Data Visualizations in LiveView with SVG

McClure and Keele discussed their journey developing custom SVG charts in a Phoenix LiveView environment, a task which arose due to the need for unique, interactive data visualizations that existing libraries could not provide. They evaluated available Elixir charting libraries and ultimately decided to create their own due to the lack of customization that matched their design requirements. The talk covered the basics of SVG, the design and implementation of charts using two main SVG elements, and styling with Tailwind CSS. Additionally, they demonstrated how to turn SVG components into interactive, clickable elements with LiveView streams, providing seamless data updates without a full redraw or a round trip to the server. Attendees learned practical skills for building scalable and interactive data visualizations directly within their Phoenix applications.