We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
ElixirConf 2023 - Meks McClure & Mark Keele - SVG Island: Building your own charts in LiveView
Building custom charts in LiveView using SVG, including setting coordinates, polyline, and styling with Tailwind CSS, and utilizing streams for dynamic updates.
- When setting coordinates to position SVG text, you’re setting the location of the left edge of the text and the baseline of the font.
- Learning SVG isn’t too bad, but you do need to understand the basics to be proficient.
- The SVG coordinate system is similar to quadrant 1 of the Cartesian system, except the origin is in the top left corner.
- The polyline is the main SVG element used to draw the chart.
- When drawing lines in SVG, it’s important to consider the parent-child relationship between elements.
- The JIT compiler is used to style SVG elements with Tailwind CSS.
- Streams are used to update the chart with new data points without redrawing the entire chart.
- The end of the previous line is used as the start of the next line when drawing charts.
- The origin of the view box is important to understand when positioning elements.
- The y-axis is reversed in SVG compared to a normal graph.
- Developers should be given access to coordinates on events.
- The concept of “magic numbers” is a common challenge when working with SVG.
- Tailwind is used as a utility-first CSS framework.
- Whole line representation is used when drawing charts.
- Bar charts are used to represent data in a more visual way.
- The polyline is used to draw lines in SVG.
- The stream is used to update the chart with new data points.
- The chart width and height are used to determine the placement of elements.
- The origin of the view box is used to position elements.
- The y-axis reversal is important to understand when working with SVG.
- The JIT compiler is used to style SVG elements with Tailwind CSS.
- The polyline works by accepting a list of x, y coordinates, which it then connects together to form a line.
- The stream is used to update the chart with new data points without redrawing the entire chart.
- The end of the previous line is used as the start of the next line when drawing charts.
- The origin of the view box is important to understand when positioning elements.
- The JIT compiler is used to style SVG elements with Tailwind CSS.
- The polyline is used to draw lines in SVG.
- The stream is used to update the chart with new data points.