gion

import React from "react";

export default ({ artifacts, width, height })  => (
  <svg width={width} height={height}>
    <g transform={`translate(${width / 2}, ${height / 2})`}>
      {artifacts.map((item, index) => (
        <circle
          r={item.radius}
          color={item.color}
          key={index}

gion

import React, { useRef, useEffect } from 'react';

export default ({
  artifacts,
  width,
  height,
}) => {
  const root = useRef();
  const context = useRef();

gion

import * as d3 from "d3";

export default class D3BubbleChart {
  constructor(domEl, { width, height, nodes = [] }) {
    this.domEl = domEl;
    this.width = width;
    this.height = height;

    // and the svg container
    this.setup(nodes);

gion

An interactive multi-line chart.

Note, I borrowed a bit of code from Duopixel's excellent code sample here.

Built with blockbuilder.org