diff --git a/docs/extra/.ipynb_checkpoints/getting-started-checkpoint.ipynb b/docs/extra/.ipynb_checkpoints/getting-started-checkpoint.ipynb
new file mode 100644
index 00000000..2d08544a
--- /dev/null
+++ b/docs/extra/.ipynb_checkpoints/getting-started-checkpoint.ipynb
@@ -0,0 +1,378 @@
+{
+ "cells": [
+ {
+ "cell_type": "markdown",
+ "id": "0d3ffc27",
+ "metadata": {},
+ "source": [
+ "# Getting started"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "6b83277d",
+ "metadata": {},
+ "source": [
+ "In this section, we will cover the very basics of creating a visualization graph using the `neo4j-viz` library.\n",
+ "We will use a small toy graph representing the purchase history of a few people and products.\n",
+ "\n",
+ "To follow along with the example below, please make sure you have [installed the library](installation.rst) first.\n",
+ "\n",
+ "We start by instantiating the [Nodes](./api-reference/node.rst) and [Relationships](./api-reference/relationship.rst) we want in our graph.\n",
+ "The only mandatory fields for a node are the \"id\", and \"source\" and \"target\" for a relationship.\n",
+ "But the other fields can optionally be used to customize the appearance of the nodes and relationships in the visualization.\n",
+ "\n",
+ "Lastly we create a [VisualizationGraph](./api-reference/visualization-graph.rst) object with the nodes and relationships we created, and call its `render` method to display the graph.\n"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 1,
+ "id": "801d0bed",
+ "metadata": {
+ "tags": [
+ "preserve-output"
+ ]
+ },
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "\n",
+ " \n",
+ "
\n",
+ "
\n",
+ " \n",
+ " \n",
+ " \n",
+ "
\n",
+ " \n",
+ "
\n",
+ "\n",
+ " \n",
+ " "
+ ],
+ "text/plain": [
+ ""
+ ]
+ },
+ "execution_count": 1,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "from neo4j_viz import Node, Relationship, VisualizationGraph\n",
+ "\n",
+ "nodes = [\n",
+ " Node(id=0, size=10, caption=\"Person\"),\n",
+ " Node(id=1, size=10, caption=\"Product\"),\n",
+ " Node(id=2, size=20, caption=\"Product\"),\n",
+ " Node(id=3, size=10, caption=\"Person\"),\n",
+ " Node(id=4, size=10, caption=\"Product\"),\n",
+ "]\n",
+ "relationships = [\n",
+ " Relationship(\n",
+ " source=0,\n",
+ " target=1,\n",
+ " caption=\"BUYS\",\n",
+ " ),\n",
+ " Relationship(\n",
+ " source=0,\n",
+ " target=2,\n",
+ " caption=\"BUYS\",\n",
+ " ),\n",
+ " Relationship(\n",
+ " source=3,\n",
+ " target=2,\n",
+ " caption=\"BUYS\",\n",
+ " ),\n",
+ "]\n",
+ "\n",
+ "VG = VisualizationGraph(nodes=nodes, relationships=relationships)\n",
+ "\n",
+ "VG.render(initial_zoom=2)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "365a1c31",
+ "metadata": {},
+ "source": [
+ "As we can see in the graph above, the radius of one of the nodes is larger than the others.\n",
+ "This is because we set the \"size\" field of the node to 20, while the others are set to 10.\n",
+ "\n",
+ "At this time all nodes have the same color.\n",
+ "If we want to distinguish between the different types of nodes, we can color them differently with the `color_nodes` method.\n",
+ "We can pass the field we want to use to color the nodes as an argument.\n",
+ "In this case, we will use the \"caption\" field.\n",
+ "Nodes with the same \"caption\" will have the same color.\n",
+ "We will use the default colorscheme, which is the Neo4j colorscheme.\n"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 2,
+ "id": "d935b3d4",
+ "metadata": {
+ "tags": [
+ "preserve-output"
+ ]
+ },
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "\n",
+ " \n",
+ "
\n",
+ "
\n",
+ " \n",
+ " \n",
+ " \n",
+ "
\n",
+ " \n",
+ "
\n",
+ "\n",
+ " \n",
+ " "
+ ],
+ "text/plain": [
+ ""
+ ]
+ },
+ "execution_count": 2,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "VG.color_nodes(field=\"caption\")\n",
+ "\n",
+ "VG.render(initial_zoom=2)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "a28bd5aa",
+ "metadata": {},
+ "source": [
+ "We are now easily able to distinguish between the different types of nodes in the graph."
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "b3bb58465761e57a",
+ "metadata": {},
+ "source": [
+ "## Next steps\n",
+ "\n",
+ "Now that we have covered the basics of creating and rendering a visualization graph, we can move on to more advanced topics.\n",
+ "\n",
+ "Here are some suggestions for what to do next:\n",
+ "\n",
+ "* Browse the [notebook examples](./tutorials/index.rst) for more examples and use cases\n",
+ "* Learn about the [integrations](./integration.rst) with other libraries such as Neo4j GDS and Pandas \n",
+ "* Check out the [rendering](./rendering.rst) options and convenience methods of `VisualizationGraph`\n",
+ "* Read about our [API reference](./api-reference/index.rst)\n"
+ ]
+ }
+ ],
+ "metadata": {
+ "kernelspec": {
+ "display_name": "Python 3 (ipykernel)",
+ "language": "python",
+ "name": "python3"
+ },
+ "language_info": {
+ "codemirror_mode": {
+ "name": "ipython",
+ "version": 3
+ },
+ "file_extension": ".py",
+ "mimetype": "text/x-python",
+ "name": "python",
+ "nbconvert_exporter": "python",
+ "pygments_lexer": "ipython3",
+ "version": "3.11.9"
+ }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/docs/extra/getting-started.ipynb b/docs/extra/getting-started.ipynb
index 6ddc83ff..6e0d4560 100644
--- a/docs/extra/getting-started.ipynb
+++ b/docs/extra/getting-started.ipynb
@@ -39,17 +39,101 @@
"data": {
"text/html": [
"\n",
- "