University Course Structure

An academic curriculum visualization using image nodes to display course progression from foundation to specialization tracks with instructor photos and course details.

import React from 'react';
import { TreeChart } from 'treecharts-react';

// University course structure data
const universityCourseData = {
  value: "Computer Science Degree",
  imageUrl:
    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face",
  title: "Computer Science Degree",
  subtitle: "4-year program structure",
  child: [
    {
      value: "Foundation Courses",
      imageUrl:
        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=80&h=80&fit=crop&crop=face",
      title: "Foundation Courses",
      subtitle: "Year 1-2 Prerequisites",
      edgeText: "Core",
      child: [
        {
          value: "Programming I",
          imageUrl:
            "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=80&h=80&fit=crop&crop=face",
          title: "Programming I",
          subtitle: "CS 101 • Python basics",
          edgeText: "Prerequisite",
          child: [],
        },
        {
          value: "Mathematics",
          imageUrl:
            "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=80&h=80&fit=crop&crop=face",
          title: "Mathematics",
          subtitle: "Calculus & Statistics",
          edgeText: "Foundation",
          child: [],
        },
      ],
    },
    {
      value: "Specialization Tracks",
      imageUrl:
        "https://images.unsplash.com/photo-1556157382-97eda2d62296?w=80&h=80&fit=crop&crop=face",
      title: "Specialization Tracks",
      subtitle: "Year 3-4 Focus Areas",
      edgeText: "Advanced",
      child: [
        {
          value: "AI/Machine Learning",
          imageUrl:
            "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=80&h=80&fit=crop&crop=face",
          title: "AI/Machine Learning",
          subtitle: "Artificial Intelligence track",
          edgeText: "Elective",
          child: [],
        },
        {
          value: "Software Engineering",
          imageUrl:
            "https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=80&h=80&fit=crop&crop=face",
          title: "Software Engineering",
          subtitle: "Enterprise development",
          edgeText: "Elective",
          child: [],
        },
      ],
    },
  ],
};

export default function UniversityCourseExample() {
  return (
    <div className="w-full">
      <TreeChart
        data={universityCourseData}
        type="right-angle"
        verticalAlign="center"
        horizontalGap={100}
        verticalGap={70}
        nodeConfig={{
          type: "image",
          width: 120,
          height: 80,
          color: "#F0F4FF",
          borderColor: "#E1E9FF",
          borderWidth: 1,
          borderRadius: 8,
          imageConfig: {
            imageWidth: 40,
            imageHeight: 40,
          },
          imageTextPositionConfig: {
            position: "right",
            padding: 8,
            spacing: 2,
          },
        }}
        edgeConfig={{
          color: "gray",
        }}
        titleConfig={{
          title: "Computer Science Curriculum",
          description: "Academic pathway from prerequisites to specializations",
        }}
      />
    </div>
  );
}

Expected Output

Output for University Course Structure
right-angleimage-node