Click on the buttons above the chart to style nodes based on different centrality measures.
Each centrality measure shows different characteristics of a network.
You must import each centrality method from the ReGraph analysis module. Each method is fully typed.
See also
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import has from "lodash/has";
import mapValues from "lodash/mapValues";
import max from "lodash/max";
import min from "lodash/min";
import values from "lodash/values";
import { Chart, type Index, type Item, type Items, type Link, type Node } from "regraph";
import { betweenness, pageRank } from "regraph/analysis";
import { colorPicker, data, linkWidth } from "./data";
import { style } from "@ci/theme/rg/js/storyStyles";
import "@ci/theme/rg/css/button.css";
import "@ci/theme/rg/css/layout.css";
type Scores = Index<number>;
interface Props {
items: Items;
}
function isNode(item: Item): item is Node {
return !has(item, "id1") || !has(item, "id2");
}
export const Demo = () => <Analysis items={data().items} />;
function Analysis(props: Props) {
const { items } = props;
const [scores, setScores] = useState<Scores>({});
const [layout] = useState<Chart.LayoutOptions>({ tightness: 4 });
const reset = () => {
setScores({});
};
const selectPageRank = () => {
pageRank(items, { value: "count" }).then((newScores) => setScores(normalize(newScores)));
};
const selectBetweenness = () => {
betweenness(items, { value: "count" }).then((newScores) => setScores(normalize(newScores)));
};
const styledItems = () => {
return mapValues(items, (item, id) => {
if (isNode(item)) {
const node: Node = { ...item };
if (scores[id]) {
// if we are in an analysis state then use the colors and sizes from that
node.size = scores[id] * 6 + 1;
node.color = colorPicker(scores[id]);
} else {
// otherwise just use a neutral color for the nodes
node.color = style.primary1.color;
}
return node;
}
const link = { ...item } as Link;
link.width = linkWidth(link.data.count);
return link;
});
};
return (
<div className="story">
<div className="options">
<button key="reset" type="button" onClick={reset}>
Reset
</button>
<button key="pageRank" type="button" onClick={selectPageRank}>
PageRank
</button>
<button key="betweenness" type="button" onClick={selectBetweenness}>
Betweenness
</button>
</div>
<div className="chart-wrapper">
<Chart items={styledItems()} layout={layout} animation={{ animate: true, time: 950 }} />
</div>
</div>
);
}
function normalize(scores: Scores): Scores {
const v = values(scores);
const minimum = min(v) || 0;
const maximum = max(v) || 0;
return mapValues(scores, (value) => {
if (maximum === minimum) {
return minimum;
}
return (value - minimum) / (maximum - minimum);
});
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
// link width styling calculator
function linkWidth(count) {
if (count > 300) {
return 36;
}
if (count > 200) {
return 27;
}
if (count > 100) {
return 18;
}
if (count > 50) {
return 9;
}
return 1;
}
// returns the color based on a node's value
function colorPicker(value) {
if (value < 0.25) {
return style.primary0.color;
}
if (value < 0.5) {
return style.primary1.color;
}
if (value < 0.75) {
return style.primary2.color;
}
return style.primary3.color;
}
function data() {
return {
items: {
343111: {
label: { text: "Tamara Williams" },
data: {
email: "[email protected]",
sent: 213,
reports: "Joshua Cervantes",
},
},
343112: {
label: { text: "Joshua Cervantes" },
data: { email: "[email protected]", sent: 447 },
},
343113: {
label: { text: "Larry Anderson" },
data: {
email: "[email protected]",
sent: 6,
reports: "Michael Solis",
},
},
343114: {
label: { text: "Michael Solis" },
data: {
email: "[email protected]",
sent: 189,
reports: "Joshua Cervantes",
},
},
343115: {
label: { text: "Maria Barker" },
data: {
email: "[email protected]",
sent: 4,
reports: "Justin Patel",
},
},
343116: {
label: { text: "Justin Patel" },
data: { email: "[email protected]", sent: 311 },
},
343117: {
label: { text: "Richard Evans" },
data: {
email: "[email protected]",
sent: 233,
reports: "Joshua Cervantes",
},
},
343118: {
label: { text: "Julie Chavez" },
data: {
email: "[email protected]",
sent: 23,
reports: "Denise Wheeler",
},
},
343119: {
label: { text: "Denise Wheeler" },
data: {
email: "[email protected]",
sent: 385,
reports: "Debbie McConnell",
},
},
343120: {
label: { text: "Tracy Fisher" },
data: {
email: "[email protected]",
sent: 16,
reports: "Alicia Smith",
},
},
343121: {
label: { text: "Alicia Smith" },
data: {
email: "[email protected]",
sent: 147,
reports: "Debbie McConnell",
},
},
343122: {
label: { text: "Malik Powell" },
data: {
email: "[email protected]",
sent: 33,
reports: "Denise Wheeler",
},
},
343123: {
label: { text: "Amy Brady" },
data: {
email: "[email protected]",
sent: 103,
reports: "Angela Campbell",
},
},
343124: {
label: { text: "Angela Campbell" },
data: {
email: "[email protected]",
sent: 753,
reports: "Brandon Jackson",
},
},
343125: {
label: { text: "Kimberly Williams" },
data: {
email: "[email protected]",
sent: 5,
reports: "Tina Burton",
},
},
343126: {
label: { text: "Tina Burton" },
data: {
email: "[email protected]",
sent: 38,
reports: "Denise Wheeler",
},
},
343127: {
label: { text: "Michael Nicholson" },
data: {
email: "[email protected]",
sent: 55,
reports: "Michael Solis",
},
},
343128: {
label: { text: "John Becker" },
data: {
email: "[email protected]",
sent: 96,
reports: "Cindy Jenkins",
},
},
343129: {
label: { text: "Cindy Jenkins" },
data: {
email: "[email protected]",
sent: 72,
reports: "Denise Wheeler",
},
},
343130: {
label: { text: "Debbie McConnell" },
data: { email: "[email protected]", sent: 420 },
},
343131: {
label: { text: "Robert Mckenzie" },
data: {
email: "[email protected]",
reports: "Michael Osborn",
},
},
343132: {
label: { text: "Michael Osborn" },
data: {
email: "[email protected]",
sent: 3,
reports: "Denise Wheeler",
},
},
343133: {
label: { text: "Sandra Bush" },
data: {
email: "[email protected]",
sent: 13,
reports: "Denise Wheeler",
},
},
343134: {
label: { text: "Kyle Garcia" },
data: {
email: "[email protected]",
sent: 38,
reports: "Denise Wheeler",
},
},
343135: {
label: { text: "Terrence Fitzgerald" },
data: {
email: "[email protected]",
sent: 9,
reports: "Denise Wheeler",
},
},
343136: {
label: { text: "Kerry Wilson" },
data: {
email: "[email protected]",
sent: 15,
reports: "Jason Wilson",
},
},
343137: {
label: { text: "Jason Wilson" },
data: { email: "[email protected]", sent: 217 },
},
343138: {
label: { text: "Kenneth Davis" },
data: {
email: "[email protected]",
sent: 19,
reports: "Michael Solis",
},
},
343139: {
label: { text: "Lucas Lucero" },
data: {
email: "[email protected]",
sent: 13,
reports: "Jesse Hudson",
},
},
343140: {
label: { text: "Jesse Hudson" },
data: {
email: "[email protected]",
sent: 231,
reports: "Joshua Cervantes",
},
},
343141: {
label: { text: "David Osborne" },
data: {
email: "[email protected]",
sent: 217,
reports: "Debbie McConnell",
},
},
343142: {
label: { text: "Anthony Shannon" },
data: {
email: "[email protected]",
sent: 29,
reports: "Michael Osborn",
},
},
343143: {
label: { text: "Joseph Lopez" },
data: {
email: "[email protected]",
sent: 19,
reports: "Pamela Gilbert",
},
},
343144: {
label: { text: "Pamela Gilbert" },
data: {
email: "[email protected]",
sent: 56,
reports: "Denise Wheeler",
},
},
343145: {
label: { text: "Victoria Aguirre" },
data: {
email: "[email protected]",
sent: 338,
reports: "Angela Campbell",
},
},
343146: {
label: { text: "Kristie Hawkins" },
data: {
email: "[email protected]",
sent: 30,
reports: "Alicia Smith",
},
},
343147: {
label: { text: "Daniel Chavez" },
data: {
email: "[email protected]",
sent: 44,
reports: "Kelsey Mitchell",
},
},
343148: {
label: { text: "Kelsey Mitchell" },
data: {
email: "[email protected]",
sent: 134,
reports: "Joshua Cervantes",
},
},
343149: {
label: { text: "Kristen Taylor" },
data: {
email: "[email protected]",
sent: 4,
reports: "Justin Patel",
},
},
343150: {
label: { text: "Kristen Rodriguez" },
data: {
email: "[email protected]",
sent: 11,
reports: "Tina Burton",
},
},
343151: {
label: { text: "Tara Marquez" },
data: {
email: "[email protected]",
sent: 62,
reports: "James Lewis",
},
},
343152: {
label: { text: "James Lewis" },
data: {
email: "[email protected]",
sent: 97,
reports: "Brandon Jackson",
},
},
343153: {
label: { text: "Anthony Robinson" },
data: {
email: "[email protected]",
sent: 4,
reports: "Kelsey Mitchell",
},
},
343154: {
label: { text: "Alexandra Perez" },
data: {
email: "[email protected]",
sent: 107,
reports: "Cindy Jenkins",
},
},
343155: {
label: { text: "Steven Wallace" },
data: {
email: "[email protected]",
sent: 13,
reports: "Debbie McConnell",
},
},
343156: {
label: { text: "Jennifer Valdez" },
data: {
email: "[email protected]",
sent: 13,
reports: "Tamara Williams",
},
},
343157: {
label: { text: "Benjamin Erickson" },
data: {
email: "[email protected]",
sent: 9,
reports: "Tina Burton",
},
},
343158: {
label: { text: "Travis Chen" },
data: {
email: "[email protected]",
sent: 13,
reports: "Jeffrey Kelley",
},
},
343159: {
label: { text: "Jeffrey Kelley" },
data: { email: "[email protected]", sent: 47 },
},
343160: {
label: { text: "Andrew Stout" },
data: {
email: "[email protected]",
sent: 154,
reports: "Pamela Gilbert",
},
},
343161: {
label: { text: "Philip Larson" },
data: {
email: "[email protected]",
sent: 1,
reports: "Andrew Stout",
},
},
343162: {
label: { text: "Sharon Miller" },
data: {
email: "[email protected]",
sent: 48,
reports: "Jesse Hudson",
},
},
343163: {
label: { text: "Micheal King" },
data: {
email: "[email protected]",
sent: 42,
reports: "Kelsey Mitchell",
},
},
343164: {
label: { text: "Daniel Farmer" },
data: {
email: "[email protected]",
sent: 23,
reports: "Tamara Williams",
},
},
343165: {
label: { text: "Hector Stewart" },
data: {
email: "[email protected]",
sent: 606,
reports: "Michael Solis",
},
},
343166: {
label: { text: "Joseph Mccoy" },
data: {
email: "[email protected]",
sent: 32,
reports: "Debbie McConnell",
},
},
343167: {
label: { text: "Michael Mathews" },
data: {
email: "[email protected]",
sent: 40,
reports: "Michael Solis",
},
},
343168: {
label: { text: "Jose Ellison" },
data: {
email: "[email protected]",
sent: 56,
reports: "Brandon Jackson",
},
},
343169: {
label: { text: "Brandon Jackson" },
data: { email: "[email protected]", sent: 196 },
},
343170: {
label: { text: "Edward Hernandez" },
data: {
email: "[email protected]",
sent: 143,
reports: "Angela Campbell",
},
},
343171: {
label: { text: "Gina Miller" },
data: {
email: "[email protected]",
sent: 3,
reports: "John Becker",
},
},
343172: {
label: { text: "Eric Garcia" },
data: {
email: "[email protected]",
sent: 59,
reports: "Richard Evans",
},
},
343173: {
label: { text: "John Bailey" },
data: { email: "[email protected]", reports: "Tamara Williams" },
},
343174: {
label: { text: "Gary Harrison" },
data: {
email: "[email protected]",
sent: 32,
reports: "Cindy Jenkins",
},
},
343175: {
label: { text: "Patrick Newman" },
data: {
email: "[email protected]",
sent: 34,
reports: "Justin Patel",
},
},
343176: {
label: { text: "Rodney Sampson" },
data: {
email: "[email protected]",
sent: 358,
reports: "Andrea Carter",
},
},
343177: {
label: { text: "Andrea Carter" },
data: {
email: "[email protected]",
sent: 427,
reports: "Brandon Jackson",
},
},
343178: {
label: { text: "Rhonda Johnson" },
data: {
email: "[email protected]",
sent: 1,
reports: "Justin Patel",
},
},
343179: {
label: { text: "Elizabeth Price" },
data: {
email: "[email protected]",
sent: 70,
reports: "Ricky Maddox",
},
},
343180: {
label: { text: "Ricky Maddox" },
data: {
email: "[email protected]",
sent: 195,
reports: "Jesse Hudson",
},
},
343181: {
label: { text: "Michael Griffin" },
data: {
email: "[email protected]",
sent: 185,
reports: "Angela Campbell",
},
},
343182: {
label: { text: "Anthony Myers" },
data: {
email: "[email protected]",
sent: 6,
reports: "Michael Solis",
},
},
343183: {
label: { text: "Jeremy Burke" },
data: {
email: "[email protected]",
sent: 110,
reports: "Angela Campbell",
},
},
343184: {
label: { text: "Tina Reynolds" },
data: {
email: "[email protected]",
sent: 17,
reports: "Pamela Gilbert",
},
},
343185: {
label: { text: "Matthew Banks" },
data: {
email: "[email protected]",
sent: 19,
reports: "Michael Solis",
},
},
343186: {
label: { text: "Brian Rocha" },
data: {
email: "[email protected]",
sent: 12,
reports: "Tamara Williams",
},
},
343187: {
label: { text: "Michelle Adams" },
data: {
email: "[email protected]",
sent: 2,
reports: "Ronald Clark",
},
},
343188: {
label: { text: "Ronald Clark" },
data: { email: "[email protected]", sent: 296 },
},
343189: {
label: { text: "Kimberly Jones" },
data: {
email: "[email protected]",
sent: 1265,
reports: "Angela Campbell",
},
},
343190: {
label: { text: "Michele Lyons" },
data: {
email: "[email protected]",
sent: 12,
reports: "Michael Solis",
},
},
343191: {
label: { text: "Debbie Lamb" },
data: {
email: "[email protected]",
sent: 8,
reports: "Cindy Jenkins",
},
},
343192: {
label: { text: "Sandra Wilson" },
data: {
email: "[email protected]",
sent: 2,
reports: "Cindy Jenkins",
},
},
343193: {
label: { text: "Peggy Hicks" },
data: {
email: "[email protected]",
sent: 47,
reports: "Angela Campbell",
},
},
343194: {
label: { text: "David King" },
data: {
email: "[email protected]",
sent: 22,
reports: "Kristopher Lynch",
},
},
343195: {
label: { text: "Kristopher Lynch" },
data: { email: "[email protected]", sent: 166 },
},
343196: {
label: { text: "Steven Perez" },
data: {
email: "[email protected]",
sent: 31,
reports: "Tamara Williams",
},
},
343197: {
label: { text: "Michael Wyatt" },
data: {
email: "[email protected]",
sent: 7,
reports: "John Becker",
},
},
343198: {
label: { text: "Cody Guerrero" },
data: {
email: "[email protected]",
sent: 142,
reports: "Tamara Williams",
},
},
343199: {
label: { text: "Molly Compton" },
data: {
email: "[email protected]",
sent: 4,
reports: "Kelsey Mitchell",
},
},
343200: {
label: { text: "Michael Smith" },
data: {
email: "[email protected]",
sent: 6,
reports: "Justin Patel",
},
},
343201: {
label: { text: "Teresa Winters" },
data: {
email: "[email protected]",
sent: 2,
reports: "Cindy Jenkins",
},
},
343202: {
label: { text: "Christopher Lawson" },
data: {
email: "[email protected]",
sent: 72,
reports: "Ricky Maddox",
},
},
343203: {
label: { text: "Stephanie Bell" },
data: {
email: "[email protected]",
sent: 89,
reports: "Joshua Cervantes",
},
},
343204: {
label: { text: "Devon Johnson" },
data: {
email: "[email protected]",
sent: 23,
reports: "Julie Chavez",
},
},
343205: {
label: { text: "Eddie Sullivan" },
data: {
email: "[email protected]",
sent: 17,
reports: "Richard Evans",
},
},
343206: {
label: { text: "Benjamin Mitchell" },
data: {
email: "[email protected]",
sent: 463,
reports: "Andrea Carter",
},
},
343207: {
label: { text: "Sarah Garner" },
data: {
email: "[email protected]",
sent: 1,
reports: "Tina Reynolds",
},
},
343208: {
label: { text: "Lisa Miles" },
data: {
email: "[email protected]",
sent: 21,
reports: "Richard Evans",
},
},
343209: {
label: { text: "Lisa Wallace" },
data: {
email: "[email protected]",
sent: 5,
reports: "John Becker",
},
},
343210: {
label: { text: "Alex Ross" },
data: {
email: "[email protected]",
sent: 5,
reports: "Michael Solis",
},
},
343211: {
label: { text: "Kenneth Dunlap" },
data: {
email: "[email protected]",
sent: 60,
reports: "Michael Solis",
},
},
343212: {
label: { text: "Juan Rangel" },
data: {
email: "[email protected]",
sent: 1,
reports: "Justin Patel",
},
},
343213: {
label: { text: "Kristin Cook" },
data: {
email: "[email protected]",
sent: 39,
reports: "Justin Patel",
},
},
343214: {
label: { text: "Tami Orozco" },
data: {
email: "[email protected]",
sent: 125,
reports: "Jesse Hudson",
},
},
343215: {
label: { text: "Julie Sanchez" },
data: {
email: "[email protected]",
sent: 13,
reports: "Andrea Carter",
},
},
343216: {
label: { text: "Tiffany Page" },
data: {
email: "[email protected]",
sent: 7,
reports: "Alicia Smith",
},
},
343217: {
label: { text: "Elizabeth Warner" },
data: {
email: "[email protected]",
sent: 86,
reports: "Debbie McConnell",
},
},
343218: {
label: { text: "Kayla Bruce" },
data: {
email: "[email protected]",
sent: 32,
reports: "Andrea Carter",
},
},
343219: {
label: { text: "Patricia Carroll" },
data: {
email: "[email protected]",
sent: 194,
reports: "Angela Campbell",
},
},
343220: {
label: { text: "Mark Edwards" },
data: {
email: "[email protected]",
sent: 406,
reports: "Jose Ellison",
},
},
343221: {
label: { text: "David Williams" },
data: {
email: "[email protected]",
sent: 6,
reports: "Cindy Jenkins",
},
},
343222: {
label: { text: "Billy Owen" },
data: {
email: "[email protected]",
sent: 249,
reports: "Angela Campbell",
},
},
343223: {
label: { text: "Todd Bright" },
data: {
email: "[email protected]",
sent: 12,
reports: "Michael Solis",
},
},
343224: {
label: { text: "Lisa Burnett" },
data: {
email: "[email protected]",
sent: 320,
reports: "James Lewis",
},
},
343225: {
label: { text: "Jeffrey Henry" },
data: {
email: "[email protected]",
sent: 21,
reports: "Michael Solis",
},
},
343226: {
label: { text: "David Cooper" },
data: {
email: "[email protected]",
sent: 20,
reports: "Angela Campbell",
},
},
343227: {
label: { text: "Jeremy Simon" },
data: {
email: "[email protected]",
sent: 3,
reports: "Kelsey Mitchell",
},
},
343228: {
label: { text: "Kimberly Martinez" },
data: {
email: "[email protected]",
sent: 41,
reports: "Jesse Hudson",
},
},
343229: {
label: { text: "Karen Brown" },
data: {
email: "[email protected]",
sent: 11,
reports: "Justin Patel",
},
},
343230: {
label: { text: "Linda Lyons" },
data: {
email: "[email protected]",
sent: 79,
reports: "Andrea Carter",
},
},
343231: {
label: { text: "James Lutz" },
data: {
email: "[email protected]",
sent: 3,
reports: "Michael Osborn",
},
},
343232: {
label: { text: "Martha Gomez" },
data: {
email: "[email protected]",
sent: 10,
reports: "John Becker",
},
},
343233: {
label: { text: "Haley Miller" },
data: {
email: "[email protected]",
sent: 23,
reports: "Tamara Williams",
},
},
343234: {
label: { text: "Melissa Reynolds" },
data: {
email: "[email protected]",
sent: 26,
reports: "Michael Solis",
},
},
343235: {
label: { text: "Philip Kaufman" },
data: {
email: "[email protected]",
sent: 17,
reports: "Stephanie Bell",
},
},
343236: {
// ...truncated 3590 lines<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>