SVG Drawing Tutorial: Creating the Novem Logo

This custom plot demonstrates how to create custom SVG graphics in Novem using D3.js. It's a complete tutorial for drawing vector graphics in your visualizations.

What You'll Learn

1. SVG Basics: Creating and manipulating SVG elements
2. D3.js Integration: Using D3 to build graphics declaratively
3. Theme Support: Adapting colors for light/dark modes
4. Responsive Design: Working with dynamic width/height
5. Animations: Adding interactive transitions

Key Techniques

Creating SVG Elements

Use D3.js to select the container and append SVG:

const svg = d3.select(node)
  .append('svg')
  .attr('width', width)
  .attr('height', height);

Theme-Aware Colors

Access dark mode via render.dark:

const colors = {
  primary: render.dark ? '#6366f1' : '#4f46e5',
  text: render.dark ? '#e5e7eb' : '#1f2937'
};

Complex Paths

Create custom shapes with SVG path syntax:

logoGroup.append('path')
  .attr('d', `M ${x1},${y1} L ${x2},${y2} Z`)
  .attr('fill', colors.primary);

Conditional Animation

Use render.static to disable animations for exports:

if (!render.static) {
  element.transition()
    .duration(2000)
    .attr('opacity', 1);
}

SVG Elements Used

• <path>: Complex shapes (logo icon)
• <circle>: Circular backgrounds
• <text>: Typography
• <line>: Accent lines
• <rect>: Bar chart decorations
• <g>: Grouping with transforms

Available Libraries

This plot uses D3.js v7, which is available by default in all custom plots. Other available libraries include Observable Plot and Ramda.

Next Steps

Try modifying this code to:

• Change colors and styling
• Add more decorative elements
• Create your own logo or icon
• Experiment with different animations

Full documentation: Novem Custom Plots Guide