When charting gets dark

In this episode, the host dives into how to build an SVG line chart from scratch, emphasizing the importance of user-friendly features like tooltips and gridlines. They argue that simply having a line without points or values is insufficient; thus, the addition of tooltips that appear on hover can convey essential information. The mechanics of implementing these features involve using SVG path elements for the line and circle elements for data points, focusing on setting their positions and opacities correctly.

The host discusses the need for a transparent overlay to handle mouse events, allowing users to interact with the chart without needing to precisely hover over tiny circles. They detail rendering a rectangle over the SVG to listen for mouse enter, leave, and move events to control interactions and display tooltips accurately. Although it's a straightforward concept, the complexity of ensuring a good user experience when tracking mouse movements can be tricky.

The later part of the podcast highlights the intricate challenges of rendering axes and managing scale functions within the SVG. The host expresses their struggle with positions, margins, and how to implement categorical versus numerical or time scales accurately. This section underscores the difficulty of rendering ticks, ensuring labels don’t overlap, and maintaining the overall aesthetics and functionality of the chart. They consider extending these options as configuration choices for users.

The episode concludes with a critique of D3 and other charting libraries, noting the revelation that a lightweight microcharting library might fulfill their needs without unnecessary dependencies. The host suggests that for specific functionalities like smooth curves in charts, having D3 as a dependency might be justified. They bounce ideas around how to make a super opinionated microcharting library that prioritizes simplicity and usability.