[EarthIsHome]

How do you recommend leveling up in SVG?

[kjeetgill]

Thank this example: https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa...

...

  svg.insert("g", "g")
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
    .selectAll("path")

...

You might assume that g, fill, or stroke might be d3 terminology but it's really SVG! A quick Google of "svg g" will get you to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

It blew my mind open, hope to share the same.

[staticautomatic]

To my untrained eye that looks like css had a baby with js and the baby is an svg.

[klodolph]

SVG is tied closely to CSS, so you can go in your CSS and create a style for your D3 graphs and do things like:

    .chartline { stroke-width: 3px; color: red; }

D3 has some convenience functions in JS for creating SVG, but you don't have to use them, you could write SVG just like HTML, it will look more like this in the DOM:

    <g fill="none" stroke="steelblue" stroke-linejoin="round">
      ...
    </g>

[tmcw]

Gratuitous self-link, but I wrote this article about the SVG basics, what's useful to learn, and how it's different from HTML: https://macwright.org/2013/06/25/just-enough-svg.html