How to use the d3-chord.chord function in d3-chord

To help you get started, we’ve selected a few d3-chord examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / d3-chord / d3-chord-tests.ts View on Github external
[1013, 990, 940, 6907]
]; // From Circos Table Viewer example http://mkweb.bcgsc.ca/circos/guide/tables/

let comparatorFn: ((a: number, b: number) => number) | null;

let subgroupAccessor: (this: SVGPathElement, d: d3Chord.Chord, ...args: any[]) => d3Chord.ChordSubgroup;
let numAccessor: (this: SVGPathElement, d: d3Chord.ChordSubgroup, ...args: any[]) => number;

// ---------------------------------------------------------------------
// Test Chord
// ---------------------------------------------------------------------

// chord() create ChordLayout  generator ===============================

let chordLayout: d3Chord.ChordLayout;
chordLayout = d3Chord.chord();

// Configure ChordLayout generator =====================================

// padAngle() ----------------------------------------------------------

chordLayout = chordLayout.padAngle(0.05);
num = chordLayout.padAngle();

// sortGroups() --------------------------------------------------------

chordLayout = chordLayout.sortGroups(ascending);
chordLayout = chordLayout.sortGroups(null);
comparatorFn = chordLayout.sortGroups();

// sortSubgroups() -----------------------------------------------------
github hshoff / vx / packages / vx-chord / src / Chord.jsx View on Github external
export default function Chord({
  matrix,
  padAngle,
  sortGroups,
  sortSubgroups,
  sortChords,
  children,
}) {
  const chord = d3chord();
  if (padAngle) chord.padAngle(padAngle);
  if (sortGroups) chord.sortGroups(sortGroups);
  if (sortSubgroups) chord.sortSubgroups(sortSubgroups);
  if (sortChords) chord.sortChords(sortChords);
  const chords = chord(matrix);
  if (children) return children({ chords });

  // so react-docgen picks it up
  return
github nteract / semiotic / src / components / NetworkFrame.tsx View on Github external
const { groupWidth = 20, padAngle = 0.01, sortGroups } = networkSettings
        const arcGenerator = arc()
          .innerRadius(radius - groupWidth)
          .outerRadius(radius)

        const ribbonGenerator = ribbon().radius(radius - groupWidth)

        const matrixifiedNetwork = matrixify({
          edgeHash: edgeHash,
          nodes: projectedNodes,
          edgeWidthAccessor,
          nodeIDAccessor
        })

        const chordLayout = chord().padAngle(padAngle)

        if (sortGroups) {
          chordLayout.sortGroups(sortGroups)
        }

        const chords = chordLayout(matrixifiedNetwork)
        const groups = chords.groups

        groups.forEach(group => {
          const groupCentroid = arcGenerator.centroid(group)
          const groupD = arcGenerator(group)
          const groupNode = projectedNodes[group.index]
          groupNode.d = groupD
          groupNode.index = group.index
          groupNode.x = groupCentroid[0] + adjustedSize[0] / 2
          groupNode.y = groupCentroid[1] + adjustedSize[1] / 2
github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / chord / chord.component.jsx View on Github external
};

    const width = parentWidth - margin.left - margin.right;
    const height = parentHeight - margin.top - margin.bottom;

    const outerRadius = Math.min(490, 490) * 0.5 - 40;
    const innerRadius = outerRadius - 12;

    const svgElement = document.querySelector(`.${this.key}`);
    svgElement.innerHTML = '';

    const svg = d3_select(svgElement)
      .attr('width', parentWidth)
      .attr('height', parentHeight);

    const chord = d3_chord()
      .padAngle(0.05)
      .sortSubgroups(d3_descending);

    const arc = d3_arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    const ribbon = d3_ribbon().radius(innerRadius);

    const xTranslate = width / 2 + margin.left;
    const yTranslate = height / 2 + margin.top;

    const container = svg
      .append('g')
      .attr('transform', `translate(${xTranslate}, ${yTranslate})`)
      .datum(chord(orgMatrix));
github plouc / nivo / packages / chord / src / enhance.js View on Github external
withPropsOnChange(['padAngle'], ({ padAngle }) => ({
            chord: d3Chord().padAngle(padAngle),
        })),
        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
github ethantran / react-native-examples / src / components / AnimatedSvgD3Chord.js View on Github external
function createGenerator(props, generator?: ChordLayout): ChordLayout {
    generator = generator || d3.chord();
    return args.reduce((acc: ChordLayout, arg) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}

d3-chord

Visualize relationships or network flow with an aesthetically-pleasing circular layout.

ISC
Latest version published 3 years ago

Package Health Score

71 / 100
Full package analysis

Popular d3-chord functions