DEV Community

Cover image for How to Plot Data Using SVG on the Web
kandz
kandz

Posted on Originally published at tools.kandz.me

How to Plot Data Using SVG on the Web

#javascript #webdev #svg #frontend

The "best" way to plot data using SVG depends on how much data you have and how much control you want over the visuals.

There are three main approaches, ranging from pure code to powerful libraries. Let's look at them.

1. D3.js (Maximum Control)

D3 is the industry standard for custom data visualization on the web. It doesn't render the chart for you; instead, it binds your data to the DOM and gives you helper functions to map values to SVG coordinates.

You use d3.line() to convert an array of data points into the d attribute of an SVG <path>.

const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value));

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("stroke", "blue")
  .attr("fill", "none");
Enter fullscreen mode Exit fullscreen mode

Best for: Highly customized, complex, or interactive visualizations.

2. Charting Libraries (Speed)

If you don't want to build axes, tooltips, and legends from scratch, use a library that outputs SVG.

  • Chart.js: Easy to use, great for standard charts (line, bar, pie).
  • Recharts (React): Built on top of D3, but uses React components so it fits perfectly into React apps.
  • ApexCharts: Great for interactive, modern-looking dashboards.

Best for: Standard dashboards where you need to move fast.

3. Vanilla SVG + JavaScript (For simple shapes)

If you just need to draw a simple line or a few polygons, you don't need a library. You can manipulate the SVG DOM directly.

const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", "10");
line.setAttribute("y1", "10");
line.setAttribute("x2", "100");
line.setAttribute("y2", "100");
line.setAttribute("stroke", "black");
svg.appendChild(line);
Enter fullscreen mode Exit fullscreen mode

Best for: Simple icons, static diagrams, or minimal custom graphics.

The Manual Coordinate Problem

Even if you use a library, you often need to hand-code specific SVG shapes (like custom polylines or annotations).

Calculating exact x and y coordinates for a polyline by hand is tedious. You write numbers, reload the browser, realize the line is off by 10 pixels, and repeat.

If you need to visually plot, adjust, and inspect SVG line or polyline vector coordinates with real-time markup export, I built a free SVG Line Coordinates Editor.

Try it here

100% client-side. Nothing uploaded.

What's your preferred library for data visualization? Let me know in the comments.

Top comments (0)