Venn Diagram Functional Component - React - venn-diagram.component.js

implementation.js

import { VennDiagram } from '../../../components/venn-diagram/venn-diagram.component'
import styles from './talent-profile-diagram-styles.module.scss'
import { DIAGRAM_COLORS } from '../../../components/venn-diagram/venn-diagram.utilities'
let skillSets = {
  data: ["things", "stuff", "other things", "java", ],
  label: "Group Name",
  sets: ["Group Name"] 
}

<VennDiagram sets={skillSets} />

venn-diagram.component.js

import React, { useEffect } from 'react'
import { addClickCircleFunction, addMouseOverOut, setUpVennDiagram } from './venn-diagram.utilities'

export const VennDiagram = ({ sets, clickCircle }) => {
  useEffect(() => {
    setUpVennDiagram(sets)
    if (clickCircle) {
      addMouseOverOut()
      addClickCircleFunction(clickCircle)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sets, clickCircle])

  return <div id="venn" style={{ textAlign: 'center', minHeight: '5em' }} />
}

venn-diagram.utilities.js

import * as venn from 'venn.js'
import * as d3 from 'd3'
import _ from 'lodash'
//We repeat these since we have no other way to control the colors
export const DIAGRAM_COLORS = [
  '#6F96F8',
  '#62CF9B',
  '#E8EFFC',
  '#C4CBD9',
  '#F2A161',
  '#E9EBEF',
  '#6F96F8',
  '#62CF9B',
  '#E8EFFC',
  '#C4CBD9',
  '#F2A161',
  '#E9EBEF',
  '#6F96F8',
  '#62CF9B',
  '#E8EFFC',
  '#C4CBD9',
  '#F2A161',
  '#E9EBEF',
  '#6F96F8',
  '#62CF9B',
  '#E8EFFC',
  '#C4CBD9',
  '#F2A161',
  '#E9EBEF',
  '#6F96F8',
  '#62CF9B',
  '#E8EFFC',
  '#C4CBD9',
  '#F2A161',
  '#E9EBEF'
]

d3.selection.prototype.first = function() {
  return d3.select(this.nodes()[0])
}

export const setUpVennDiagram = (sets) => {
  let chart = venn
    .VennDiagram()
    .useViewBox()
    .height(300)

  d3.select('#venn')
    .datum(sets)
    .call(chart)

  d3.selectAll('#venn .venn-circle path')
    .style('fill-opacity', 0.5)
    .style('stroke-width', 3)
    .style('stroke-opacity', 1)
    .style('fill', (d, i) => {
      return DIAGRAM_COLORS[i]
    })
    .style('stroke', (d, i) => {
      return DIAGRAM_COLORS[i]
    })

  d3.selectAll('#venn .venn-circle')
    .select('text')
    .style('font-weight', '400')
    .style('font-size', '18px')
    .style('fill', '#4E5F74')
}

export const addMouseOverOut = () => {
  d3.selectAll('#venn .venn-circle')
    .on('mouseover', function(d, i) {
      let node = d3.select(this).transition()
      node.style('cursor', 'pointer')
      node.select('path').style('fill-opacity', 1)
      node
        .select('text')
        .style('font-weight', '400')
        .style('font-size', '26px')
        .style('color', '#4E5F74')
    })
    .on('mouseout', function(d, i) {
      let node = d3.select(this).transition()
      node.select('path').style('fill-opacity', 0.5)
      node
        .select('text')
        .style('font-weight', '400')
        .style('font-size', '18px')
    })
}

export const addClickCircleFunction = (clickCircle) => {
  d3.selectAll('#venn .venn-circle').on('click', function(d, index, element) {
    const color = _.get(
      d3
        .select(element[index])
        .select('path')
        .nodes()[0],
      'style.fill',
      '#62CF9B'
    )
    clickCircle(d.label, color)
  })
}