ग्राफ़ को दृश्य रूप से प्रदर्शित करने के लिए, प्रत्येक शीर्ष को एक स्थान निर्दिष्ट किया जाना चाहिए। पिछले अनुभाग में बताया गया है कि Graph इंटरफ़ेस, AbstractGraph वर्ग, और UnweightedGraph वर्ग का उपयोग करके ग्राफ़ को कैसे मॉडल किया जाए। यह अनुभाग चर्चा करता है कि ग्राफ़ को ग्राफ़िक रूप से कैसे प्रदर्शित किया जाए। ग्राफ़ प्रदर्शित करने के लिए, आपको यह जानना होगा कि प्रत्येक शीर्ष कहाँ प्रदर्शित होता है और प्रत्येक शीर्ष का नाम क्या है। यह सुनिश्चित करने के लिए कि एक ग्राफ प्रदर्शित किया जा सकता है, हम Displayable नामक एक इंटरफ़ेस को परिभाषित करते हैं जिसमें x- और y-निर्देशांक और उनके नाम प्राप्त करने की विधियां हैं, और नीचे दिए गए कोड में Displayable के शीर्ष उदाहरण बनाएं।

Displayable शीर्षों वाला एक ग्राफ़ अब GraphView नामक फलक पर प्रदर्शित किया जा सकता है, जैसा कि नीचे दिए गए कोड में दिखाया गया है।

एक फलक पर एक ग्राफ़ प्रदर्शित करने के लिए, बस ग्राफ़ को कंस्ट्रक्टर (पंक्ति 9) में एक तर्क के रूप में पास करके GraphView का एक उदाहरण बनाएं। ग्राफ़ के शीर्ष के वर्ग को शीर्षों को प्रदर्शित करने के लिए Displayable इंटरफ़ेस को लागू करना होगा (पंक्तियाँ 13-22)। प्रत्येक शीर्ष सूचकांक के लिए i, graph.getNeighbors(i) को लागू करने से इसकी आसन्नता सूची (पंक्ति 26) वापस आ जाती है। इस सूची से, आप उन सभी शीर्षों को ढूंढ सकते हैं जो i से सटे हुए हैं और i को उसके आसन्न शीर्ष से जोड़ने के लिए एक रेखा खींच सकते हैं (रेखाएं 27-34)।

नीचे दिया गया कोड ऊपर चित्र में ग्राफ़ प्रदर्शित करने का एक उदाहरण देता है, जैसा कि नीचे चित्र में दिखाया गया है।

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class DisplayUSMap extends Application {
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        City[] vertices = {new City("Seattle", 75, 50),
                new City("San Francisco", 50, 210),
                new City("Los Angeles", 75, 275), new City("Denver", 275, 175),
                new City("Kansas City", 400, 245),
                new City("Chicago", 450, 100), new City("Boston", 700, 80),
                new City("New York", 675, 120), new City("Atlanta", 575, 295),
                new City("Miami", 600, 400), new City("Dallas", 408, 325),
                new City("Houston", 450, 360)};

        // Edge array for graph
        int[][] edges = {
                {0, 1}, {0, 3}, {0, 5}, {1, 0}, {1, 2}, {1, 3},
                {2, 1}, {2, 3}, {2, 4}, {2, 10},
                {3, 0}, {3, 1}, {3, 2}, {3, 4}, {3, 5},
                {4, 2}, {4, 3}, {4, 5}, {4, 7}, {4, 8}, {4, 10},
                {5, 0}, {5, 3}, {5, 4}, {5, 6}, {5, 7},
                {6, 5}, {6, 7}, {7, 4}, {7, 5}, {7, 6}, {7, 8},
                {8, 4}, {8, 7}, {8, 9}, {8, 10}, {8, 11},
                {9, 8}, {9, 11}, {10, 2}, {10, 4}, {10, 8}, {10, 11},
                {11, 8}, {11, 9}, {11, 10}
        };

        Graph graph = new UnweightedGraph(vertices, edges);

        // Create a scene and place it in the stage
        Scene scene = new Scene(new GraphView(graph), 750, 450);
        primaryStage.setTitle("DisplayUSMap"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

    static class City implements Displayable {
        private int x, y;
        private String name;

        City(String name, int x, int y) {
            this.name = name;
            this.x = x;
            this.y = y;
        }

        @Override
        public int getX() {
            return x;
        }

        @Override
        public int getY() {
            return y;
        }

        @Override
        public String getName() {
            return name;
        }
    }
}

वर्ग शहर को उनके निर्देशांक और नामों (पंक्तियों 39-63) के साथ शीर्षों को मॉडल करने के लिए परिभाषित किया गया है। प्रोग्राम City प्रकार (पंक्ति 30) के शीर्षों के साथ एक ग्राफ़ बनाता है। चूँकि City Displayable को लागू करता है, ग्राफ़ के लिए बनाया गया एक GraphView ऑब्जेक्ट ग्राफ़ को फलक (पंक्ति 33) में प्रदर्शित करता है।