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. The centrality measures are:
- Degrees: The number of links each node has.
- Betweenness: The number of shortest paths a node is part of.
- Closeness: A measure of how close each node is to all other nodes.
- Eigencentrality: The number of links a node’s neighbors have.
- PageRank: The number of links a node’s neighbors have, considering link direction.
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 } from "regraph";
import * as ReGraph 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";
function isNode(item) {
return !has(item, "id1");
}
const analyses = [
"degrees",
"betweenness",
"closeness",
"pageRank",
"eigenCentrality",
"reset",
];
export const Demo = () => <Analysis />;
function Analysis() {
const [state, setState] = useState({
scores: undefined,
layout: { tightness: 4 },
type: undefined,
});
const { items } = data();
const setScores = (type, newScores) => {
// spread the layout state to run a new layout
// this state change causes a re-render, which will call styledItems
setState((current) => {
return { ...current, type, scores: normalize(newScores) };
});
};
const analyze = (type) => {
if (type === "reset") {
setScores(undefined, undefined);
} else {
ReGraph[type](items, { value: "count" }).then((scores) =>
setScores(type, scores),
);
}
};
const styledItems = () => {
// then apply styling
return mapValues(items, (item, id) => {
const updatedItem = { ...item };
if (isNode(item)) {
if (state.scores) {
// if we are in an analysis state then use the colors and sizes from that
updatedItem.size = state.scores[id] * 6 + 1;
updatedItem.color = colorPicker(state.scores[id]);
} else {
// otherwise just use a neutral color for the nodes
updatedItem.color = style.primary1.color;
}
} else {
// item is a link. link widths always show
updatedItem.width = linkWidth(item.data.count);
}
return updatedItem;
});
};
return (
<div className="story">
<div className="options">
{analyses.map((name) => (
<button
key={name}
type="button"
className={state.type === name ? "active" : ""}
onClick={() => analyze(name)}
>
{name.charAt(0).toUpperCase() + name.slice(1)}
</button>
))}
</div>
<div className="chart-wrapper">
<Chart
items={styledItems()}
layout={state.layout}
animation={{ animate: true, time: 950 }}
options={{ minZoom: 0.01 }}
/>
</div>
</div>
);
}
// converts a set of scores to values between 0 and 1
function zeroToOne(scores) {
const minimum = min(values(scores));
const maximum = max(values(scores));
return mapValues(scores, (value) => {
if (maximum === minimum) {
return minimum;
}
return (value - minimum) / (maximum - minimum);
});
}
function normalize(scores) {
if (!scores) {
return undefined;
}
return zeroToOne(scores);
}
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>