Sociogram

Social network diagrams with mutual choices, rejections, group coloring, force-directed or hierarchical layout. Auto-detects sociometric roles — stars, isolates, cliques. Based on Moreno sociometry.

sociogram·§ Moreno

↘ preview

100%

UTF-8 · LF · 10 lines · 279 chars✓ parsed·7.6 ms·5.8 KB SVG

Moreno (1934) sociometry model + modern social network analysis conventions + multi-domain application extensions. Visualization and analysis of social relationships within groups.

Primary References:

Moreno, J.L. (1934). Who Shall Survive? Foundations of Sociometry, Group Psychotherapy and Sociodrama. Beacon House.

Moreno, J.L. & Jennings, H.H. (1938). Statistics of social configurations. Sociometry, 1(3/4), 342-374.

Brandes, U. et al. (2011). Effects of sociogram drawing conventions and edge crossings in social network visualization. J Graph Algorithms Appl. 15(1), 157-176.

Hanneman, R.A. & Riddle, M. (2005). Introduction to Social Network Methods. UC Riverside.

FBI Law Enforcement Bulletin (2014). Social Network Analysis: A Systematic Approach for Investigating.

1. What is a Sociogram?

A sociogram is a group social relationship visualization tool developed by Jacob L. Moreno in 1934. Unlike an ecomap (individual ↔ external systems), a sociogram focuses on the relationship network between members within a group — who chose whom, who is isolated, who is central, and which people form cliques.

Key differences:

Dimension	Ecomap	Sociogram
Focus	One person/family vs. external systems	All members within a group, among each other
Layout	Radial (center-periphery)	Network graph (force-directed / circular)
Edge meaning	Relationship quality (strong/weak/stressful)	Social choices (choice/rejection/mutual)
Use case	Clinical assessment	Group dynamics analysis

2. Who Uses Sociograms — User Segments

2.1 Education (Largest User Group)

Teachers + school counselors are the primary user group for sociograms. Typical use cases:

Scenario	Method	Purpose
Classroom social assessment	Have each student list 2 classmates they want to work with	Identify stars (popular), isolates (excluded), cliques (subgroups)
Seating/group arrangement	Optimize based on sociogram data	Ensure isolates are included, break up exclusive cliques
Bullying prevention	Regular sociogram tracking	Detect relationship changes, early intervention
Camp/class assignment	Teacher-student relationship mapping	Balance social dynamics across groups

Key search signals: "sociogram classroom", "sociogram maker" (teacher tool intent)

Social workers + group therapists + psychodrama therapists:

Scenario	Method	Purpose
Group therapy dynamics assessment	Therapist observation + member questionnaire	Identify alliances, conflicts, power structures
Social atom	Individual draws their most important relationships	Moreno's core technique, warm-up for psychodrama
Family system dynamics	Choices/rejections among family members	Complements the dynamic dimension of genograms
Community assessment	Mapping relationships between institutions	Identify service gaps, resource concentration

Overlap with existing Schematex users: Social workers/therapists who use genogram + ecomap are natural sociogram users as well.

2.3 Organizational Development (Enterprise Users)

HR professionals + organizational development consultants + team leads:

Scenario	Method	Purpose
Informal influence mapping	"Who do you turn to when you have a problem?"	Discover informal leaders vs. formal org chart
Team building	Cross-departmental social network analysis	Optimize cross-functional team composition
Information flow analysis	"Who do you get work information from?"	Identify information bottlenecks and silos
Post-merger cultural integration	Cross-connections between two teams	Assess integration progress

2.4 Law Enforcement / Intelligence (High-Value Professional Users)

Law enforcement analysts + intelligence analysts:

Scenario	Method	Purpose
Criminal network analysis	Phone records, social media, surveillance data → link analysis	Identify organizational leaders, intermediaries, periphery
Gang structure mapping	Arrest records, co-location records	Understand gang hierarchy and territory
Suspect social circle	1-2 degree relationship network	Track fugitives, predict behavior
Counter-terrorism network analysis	Communication patterns + financial flows	Identify cell structures

Note: Law enforcement scenarios typically use specialized tools like Palantir or i2 Analyst's Notebook, but basic sociogram visualization capability (lightweight, embeddable, Text DSL input) represents a differentiation opportunity.

2.5 Academic Research (Long-Tail Users)

Social network analysis in sociology, anthropology, and political science research. Typically uses heavy tools like Gephi, NetworkX, and Pajek. Schematex's opportunity lies in lightweight, fast visualization — paper figures, teaching demonstrations.

3. Sociogram Structure

A sociogram consists of three layers:

Nodes — individual members within the group
Edges — social relationships/choices between members
Structural Patterns — group structures emerging from nodes + edges

4. Node Types & Symbols

4.1 Standard Node Shape

Element	Shape	SVG	Meaning
Default member	Circle (r=20)	`<circle>`	Individual in the group
Star (popular)	Circle + star marker	`<circle>` + `<polygon>` overlay	Central figure chosen by many
Isolate	Circle + dashed border	`<circle stroke-dasharray>`	Chosen by no one / chooses no one
Ego (focal person)	Double circle (concentric)	Two `<circle>` elements, gap=3px	Focal person for egocentric view

Auto-detection rules (automatically labeled based on data):

Star: in-degree ≥ mean + 1.5 × SD, or in-degree ≥ group_size × 0.4
Isolate: in-degree = 0 AND out-degree = 0
Neglectee: in-degree = 0 but out-degree > 0
Rejected: rejection count ≥ 2

4.2 Node Sizing

Node size can reflect sociometric metrics:

Mode	Size Rule	Meaning
Uniform (default)	All nodes same size (r=20)	Neutral display
By in-degree	r = 14 + in_degree × 4 (min: 14, max: 40)	More popular = larger
By betweenness	r = 14 + normalized_betweenness × 26	More central bridge role = larger

DSL: config: sizing = in-degree or on a node: [size: large]

4.3 Node Coloring

Mode	Color Rule	Meaning
Default	All `#42A5F5` (blue)	Neutral
By group/category	Color by group attribute	Distinguish subgroups (class, department, gender, etc.)
By role	Star=gold, Isolate=gray, Normal=blue	Highlight social status
By custom attribute	User-defined	Any classification dimension

Default color palette for groups (up to 8 groups):

group1: #42A5F5 (blue)
group2: #66BB6A (green)
group3: #FFA726 (orange)
group4: #AB47BC (purple)
group5: #EF5350 (red)
group6: #26C6DA (cyan)
group7: #FFEE58 (yellow)
group8: #8D6E63 (brown)

4.4 Node Labels

Element	Position	Font	Meaning
Name/ID	Below node center, 4px gap	11px, `font-family: sans-serif`	Primary identifier
Role badge	Top-right corner	9px	Optional: ★ star, ● isolate
Details	Below name	9px, gray	Optional: age, title, etc.

5. Edge Types (Connection Lines)

5.1 Relationship Direction

Type	Line Style	DSL Syntax	SVG	Meaning
One-way choice	Arrow →	`A -> B`	`<line>` + `marker-end="url(#arrow)"`	A chose B
Mutual choice	Double arrow ↔	`A <-> B`	`<line>` + both markers	Mutual choice
Undirected	Plain line —	`A -- B`	`<line>` without markers	Known relationship, direction unknown

5.2 Relationship Valence (Positive/Negative)

Type	Line Style	DSL Syntax	SVG	Meaning
Positive/attraction	Solid line	`->` / `<->` / `--`	`<line>` solid, color: `#388E3C` (green)	Choice/like/trust
Negative/rejection	Dashed red line	`-x>` / `<x->` / `-x-`	`<line>` dashed, color: `#D32F2F` (red)	Rejection/conflict/avoidance
Neutral/indifferent	Dotted gray line	`-.>` / `<.->` / `-.-`	`<line>` dotted, color: `#9E9E9E` (gray)	Neutral/no clear attitude

5.3 Edge Weight (Relationship Strength)

Weight	Line Width	DSL Syntax	Meaning
Weak (1)	1px	`A -> B [weight: 1]`	Weak connection
Normal (2, default)	2px	`A -> B`	Average connection
Strong (3)	3.5px	`A -> B [weight: 3]` or `A ==> B`	Strong connection
Very strong (4+)	5px	`A -> B [weight: 4]` or `A ===> B`	Very strong connection

5.4 Edge Labels

A -> B [label: "best friend"]
C -x> D [label: "bullying"]
E <-> F [label: "study partners"]

5.5 Combined DSL Examples

# One-way positive choice
alice -> bob

# Mutual strong positive
alice <==> carol

# One-way rejection
dave -x> eve

# Mutual neutral
frank <.-> grace

# Weighted with label
alice -> bob [weight: 3, label: "trusted advisor"]

6. Structural Patterns (Auto-Detected)

Schematex should auto-detect and optionally annotate the following classic sociometric structures:

6.1 Individual-Level Patterns

Pattern	Detection Rule	Visual Annotation
Star	in-degree ≥ mean + 1.5σ	Gold fill / ★ badge
Isolate	in-degree = 0 AND out-degree = 0	Dashed border, gray fill
Neglectee	in-degree = 0, out-degree > 0	Dashed border, blue fill
Rejected	rejection count ≥ 2	Red dashed border

6.2 Pair-Level Patterns

Pattern	Detection Rule	Visual Annotation
Mutual pair	A→B AND B→A	Thicker bidirectional line
Asymmetric pair	A→B but NOT B→A	Standard arrow

6.3 Group-Level Patterns

Pattern	Detection Rule	Visual Annotation
Clique	Subgroup where all members mutually choose each other (≥3 members)	Shaded convex hull background
Chain	A→B→C→... (unidirectional sequence, no mutual)	Sequential arrow path highlighted
Bridge	Node connecting two otherwise separate clusters	Diamond shape overlay or highlight ring

DSL control: config: highlight = stars, isolates, cliques (default: stars, isolates)

7. Layout Rules

7.1 Layout Algorithm Options

Sociogram supports multiple layouts suitable for different scenarios:

Layout	Algorithm	Best For	Complexity
Force-directed (default)	Fruchterman-Reingold / spring model	General group networks, automatic clustering	O(n² × iterations)
Circular	Evenly arranged around a circle	Small groups (≤15 people), emphasizing who connects to whom	O(n)
Concentric	Layered rings by in-degree	Emphasizing core-periphery structure	O(n log n)
Group-based	Partitioned by group attribute	Cross-group relationship visualization	O(n) + force within group

7.2 Force-Directed Layout (Default)

Fruchterman-Reingold algorithm implementation:

Initialize: nodes placed randomly within canvas
Loop max_iterations times:
  Calculate repulsive force for each node pair (f_rep = k²/d)
  Calculate attractive force for each edge (f_att = d²/k)
  Update node positions (clamp to canvas bounds)
  Gradually reduce temperature (simulated annealing)

Parameter	Default Value	Meaning
k (optimal distance)	`sqrt(canvas_area / node_count)`	Ideal distance between nodes
max_iterations	300	Convergence steps
initial_temperature	canvas_width / 10	Initial displacement limit
cooling_rate	0.95	Temperature decay per step
min_distance	60px	Minimum node spacing (hard constraint)

7.3 Circular Layout

Angle interval = 2π / node_count
Position of i-th node:
  x = center_x + radius × cos(i × angle_interval - π/2)
  y = center_y + radius × sin(i × angle_interval - π/2)

Parameter	Default Value	Meaning
Radius	max(120, node_count × 20)	Circle radius
Start angle	-π/2 (12 o'clock)	Starting position of first node

Sorting optimization: Cluster nodes of the same group into adjacent positions to reduce cross-group edge crossings.

7.4 Concentric Layout

Layered by social status:

Ring 0 (center):  Stars (highest in-degree)
Ring 1:           Above-average in-degree
Ring 2:           Average in-degree
Ring 3 (outer):   Below-average + isolates

Parameter	Default Value
Ring 0 radius	0px (single star at center) or 40px (multiple)
Ring gap	80px
Outer ring radius	ring_count × 80px

7.5 Spacing & Canvas Rules

Parameter	Default	Meaning
Node radius	20px (uniform)	Default node size
Min node-to-node gap	60px	Avoid overlapping
Edge-to-node gap	2px	Lines do not enter nodes
Canvas padding	50px	Edge whitespace
Label gap below node	4px	Gap between label and node
Arrow marker size	8px	Arrow size

7.6 Responsive Sizing

Group Size	Recommended Layout	Canvas Size
≤ 8	Circular	400 × 400
9-20	Force-directed or Circular	600 × 600
21-40	Force-directed	800 × 800
41+	Force-directed + group clustering	1000 × 1000+

8. DSL Grammar (Sociogram)

document        = header config* group_def* node_def* edge_def*
header          = "sociogram" quoted_string? NEWLINE

config          = "config:" config_key "=" config_value NEWLINE
config_key      = "layout" | "sizing" | "highlight" | "coloring"
config_value    = /[a-zA-Z0-9_, -]+/

group_def       = "group" ID properties? NEWLINE
                  INDENT node_ref+ DEDENT

node_def        = ID properties? NEWLINE
properties      = "[" property ("," property)* "]"
property        = "label:" quoted_string
               | "group:" ID
               | "size:" SIZE
               | "role:" ROLE
               | kv_prop

SIZE            = "small" | "medium" | "large"
ROLE            = "star" | "isolate" | "bridge"

edge_def        = ID edge_op ID edge_props? NEWLINE
edge_op         = "->" | "<->" | "--"          (* positive *)
               | "-x>" | "<x->" | "-x-"       (* negative/rejection *)
               | "-.>" | "<.->" | "-.-"        (* neutral *)
               | "==>" | "<==>" | "==="        (* strong positive *)
               | "===>" | "<===>"              (* very strong positive *)
edge_props      = "[" edge_prop ("," edge_prop)* "]"
edge_prop       = "label:" quoted_string
               | "weight:" NUMBER

ID              = /[a-zA-Z][a-zA-Z0-9_-]*/
quoted_string   = '"' /[^"]*/ '"'
NUMBER          = /[0-9]+/
kv_prop         = IDENTIFIER ":" VALUE

9. Test Cases

Case 1: Basic Classroom Sociogram (Directed Choices)

sociogram "Mrs. Chen's 4th Grade Class"
  alice [label: "Alice"]
  bob [label: "Bob"]
  carol [label: "Carol"]
  dave [label: "Dave"]
  eve [label: "Eve"]
  frank [label: "Frank"]
  alice -> bob
  alice -> carol
  bob -> alice
  bob -> dave
  carol -> alice
  carol -> eve
  dave -> bob
  dave -> frank
  eve -> carol
  eve -> alice
  frank -> dave

Verify: alice is a star (in-degree 3), frank is a neglectee (in-degree 1, only chosen by dave). alice ↔ bob and alice ↔ carol are mutual pairs.

Case 2: With Groups and Rejection (Bullying Analysis)

sociogram "Playground Dynamics"
  config: layout = force-directed
  config: highlight = stars, isolates, cliques
  config: coloring = group

  group boys [label: "Boys", color: "#42A5F5"]
    tom
    jack
    mike
    leo

  group girls [label: "Girls", color: "#EF5350"]
    anna
    beth
    chloe
    diana

  tom <-> jack
  tom -> mike
  jack -> leo
  mike -x> leo [label: "conflict"]
  anna <-> beth
  anna <-> chloe
  beth <-> chloe
  anna -> diana
  diana -.- tom
  leo -.- anna

Verify: anna-beth-chloe form a clique (all three mutually choose each other). leo is close to an isolate (only jack chooses him unidirectionally). mike → leo is a rejection (red dashed line). diana and tom have a neutral connection.

Case 3: Organizational Influence Map

sociogram "Engineering Team Informal Influence"
  config: layout = concentric
  config: sizing = in-degree

  ceo [label: "CEO", group: leadership]
  vp [label: "VP Eng", group: leadership]
  lead1 [label: "Tech Lead A", group: team-a]
  lead2 [label: "Tech Lead B", group: team-b]
  dev1 [label: "Senior Dev", group: team-a]
  dev2 [label: "Dev", group: team-a]
  dev3 [label: "Dev", group: team-b]
  dev4 [label: "Junior Dev", group: team-b]
  ops [label: "DevOps", group: infra]

  dev1 -> lead1
  dev2 -> lead1
  dev2 -> dev1
  dev3 -> lead2
  dev4 -> dev3
  lead1 -> vp
  lead2 -> vp
  vp -> ceo
  dev1 -> ops [label: "deployment help"]
  dev3 -> ops [label: "infra questions"]
  lead1 <-> lead2 [label: "weekly sync"]
  dev4 -> dev1 [label: "mentorship"]

Verify: in concentric layout, lead1 and vp should be in the inner ring (high in-degree), dev4 in the outer ring. ops is a bridge (connecting team-a and team-b).

sociogram "Group Therapy Session 5 - Trust Network"
  config: layout = circular

  therapist [label: "Dr. Park", role: star]
  james [label: "James"]
  maria [label: "Maria"]
  lee [label: "Lee"]
  sarah [label: "Sarah"]
  tom [label: "Tom"]
  nina [label: "Nina"]

  james -> therapist
  james <-> maria [weight: 3, label: "strong bond"]
  james -> lee
  maria -> therapist
  maria -> sarah
  lee -> therapist
  lee -.- nina
  sarah <-> nina
  sarah -> therapist
  tom -> therapist
  nina -> maria

Verify: circular layout, therapist is a star. james ↔ maria is a strong mutual pair (thick line). tom is close to an isolate (only connected to therapist). lee and nina have a neutral connection.

Case 5: Criminal Network Analysis

sociogram "Operation Sunset - Communication Network"
  config: layout = force-directed
  config: sizing = betweenness

  boss [label: "Subject Alpha"]
  lt1 [label: "Lieutenant 1"]
  lt2 [label: "Lieutenant 2"]
  courier1 [label: "Courier A"]
  courier2 [label: "Courier B"]
  contact1 [label: "External Contact 1"]
  contact2 [label: "External Contact 2"]
  associate1 [label: "Associate"]
  associate2 [label: "Associate"]

  boss <-> lt1 [weight: 4]
  boss <-> lt2 [weight: 4]
  lt1 -> courier1
  lt1 -> courier2
  lt2 -> associate1
  lt2 -> associate2
  courier1 -> contact1 [label: "supplier"]
  courier2 -> contact2 [label: "distributor"]
  lt1 <-> lt2 [weight: 2]
  associate1 -.- courier1

Verify: boss and lt1 have the highest betweenness (largest nodes). courier1 is a bridge (connecting lt1 and contact1). The hierarchical structure should emerge naturally in force-directed layout.

Case 6: Large Group Stress Test (30 nodes)

sociogram "Conference Networking"
  config: layout = force-directed

  p1 [label: "Person 1", group: a]
  p2 [label: "Person 2", group: a]
  p3 [label: "Person 3", group: a]
  p4 [label: "Person 4", group: a]
  p5 [label: "Person 5", group: a]
  p6 [label: "Person 6", group: b]
  p7 [label: "Person 7", group: b]
  p8 [label: "Person 8", group: b]
  p9 [label: "Person 9", group: b]
  p10 [label: "Person 10", group: b]
  p11 [label: "Person 11", group: c]
  p12 [label: "Person 12", group: c]
  p13 [label: "Person 13", group: c]
  p14 [label: "Person 14", group: c]
  p15 [label: "Person 15", group: c]
  p16 [label: "Person 16", group: d]
  p17 [label: "Person 17", group: d]
  p18 [label: "Person 18", group: d]
  p19 [label: "Person 19", group: d]
  p20 [label: "Person 20", group: d]
  p21 [label: "Person 21"]
  p22 [label: "Person 22"]
  p23 [label: "Person 23"]
  p24 [label: "Person 24"]
  p25 [label: "Person 25"]
  p26 [label: "Person 26"]
  p27 [label: "Person 27"]
  p28 [label: "Person 28"]
  p29 [label: "Person 29"]
  p30 [label: "Person 30"]
  p1 <-> p2
  p1 <-> p3
  p2 <-> p4
  p3 <-> p5
  p4 <-> p5
  p6 <-> p7
  p6 <-> p8
  p7 <-> p9
  p8 <-> p10
  p11 <-> p12
  p11 <-> p13
  p12 <-> p14
  p13 <-> p15
  p16 <-> p17
  p16 <-> p18
  p17 <-> p19
  p18 <-> p20
  p1 -> p6 [label: "cross-group"]
  p6 -> p11 [label: "cross-group"]
  p11 -> p16 [label: "cross-group"]
  p21 -> p1
  p22 -> p6
  p23 -> p11
  p24 -> p16
  p25 -- p26
  p27 -- p28
  p29 -- p30

Verify: 30 nodes → automatically uses 800×800 canvas. The 4 groups should naturally cluster via force-directed layout. p1, p6, p11, p16 are cross-group bridges. p25-p30 are independent pairs.

10. SVG Implementation Details

10.1 Arrow Markers

<defs>
  <!-- Positive arrow (dark gray) -->
  <marker id="sociogram-arrow" viewBox="0 0 10 10" refX="9" refY="5"
          markerWidth="8" markerHeight="8" orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 z" fill="#333"/>
  </marker>
  <!-- Rejection arrow (red) -->
  <marker id="sociogram-arrow-reject" viewBox="0 0 10 10" refX="9" refY="5"
          markerWidth="8" markerHeight="8" orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 z" fill="#D32F2F"/>
  </marker>
  <!-- Neutral arrow (gray) -->
  <marker id="sociogram-arrow-neutral" viewBox="0 0 10 10" refX="9" refY="5"
          markerWidth="8" markerHeight="8" orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 z" fill="#9E9E9E"/>
  </marker>
</defs>

10.2 Edge Rendering

Edge-to-edge calculation (same as ecomap):

Lines run from node edge to node edge, not center to center
Calculation: along the line between (center_A, center_B), subtract each respective radius + marker size

Bidirectional edges:

Mutual choice (<->): markers at both ends, using a single line
Avoid overlap: if A→B and B→A are both one-way but not mutual, draw two slightly curved lines (offset ±3px)

Self-referential edges:

Not supported (sociograms do not require self-referential relationships)

10.3 Clique Highlighting

When config: highlight = cliques:

Detect all cliques (complete subgraph, ≥3 nodes)
For each clique, compute convex hull
Render semi-transparent background <polygon> with rounded corners

<polygon points="..." fill="#42A5F5" fill-opacity="0.08"
         stroke="#42A5F5" stroke-opacity="0.2" stroke-width="1"
         class="schematex-sociogram-clique"/>

10.4 CSS Classes

.schematex-sociogram-node { }
.schematex-sociogram-node-star { }
.schematex-sociogram-node-isolate { }
.schematex-sociogram-edge { }
.schematex-sociogram-edge-positive { }
.schematex-sociogram-edge-negative { }
.schematex-sociogram-edge-neutral { }
.schematex-sociogram-label { }
.schematex-sociogram-clique { }
.schematex-sociogram-group-label { }

Priority	Feature	Complexity	Reuse
P0 (Phase 3)	Circular layout + directed edges + 3 valence types	Medium	Arrow markers reused from ecomap
P0	Node auto-detection (star/isolate)	Low	Pure data computation
P1	Force-directed layout (Fruchterman-Reingold)	High	New algorithm, but formula is well-defined
P1	Group coloring + group-based node clustering	Medium	Color palette reused from ecomap
P1	Edge weight → line thickness	Low
P2	Concentric layout	Medium	Adapted from radial layout
P2	Clique detection + convex hull highlighting	High	Graph theory algorithm
P2	Node sizing by metric (in-degree/betweenness)	Medium
P3	Edge labels	Low	Reused from ecomap
P3	Social Atom variant (egocentric view)	Low	Reused from ecomap radial
P3	Bridge detection	Medium	Betweenness centrality

On this page