Building a Live Interactive Data Visualization with Phoenix LiveView

Phoenix LiveView is an incredibly versatile tool, and while it’s often used for building real-time applications like chat and notifications, it’s also perfect for creating interactive data visualizations. In this tutorial, we’ll use Phoenix LiveView to create a real-time interactive graph that updates dynamically based on user input—without writing any JavaScript.

Step 1: Set Up Your Phoenix Project

Start by creating a new Phoenix project:

mix phx.new live_graph --live
cd live_graph
mix phx.server

Make sure Phoenix LiveView is included in your mix.exs:

defp deps do
  [
    {:phoenix_live_view, "~> 0.17.5"}
  ]
end

Run mix deps.get to install the dependencies.

Step 2: Create the LiveView for the Graph

Next, let’s create a LiveView that will handle the graph and allow users to manipulate data points interactively.

Create a new file called graph_live.ex:

# lib/live_graph_web/live/graph_live.ex
defmodule LiveGraphWeb.GraphLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, assign(socket, data: generate_random_data(), x_axis: 1, y_axis: 10)}
  end

  def handle_event("update_data", %{"x" => x, "y" => y}, socket) do
    data = update_data(socket.assigns.data, String.to_integer(x), String.to_integer(y))
    {:noreply, assign(socket, data: data)}
  end

  defp generate_random_data do
    Enum.map(1..10, fn _ -> {rand() * 10, rand() * 10} end)
  end

  defp update_data(data, x, y) do
    data |> List.delete_at(0) |> Enum.concat([{x, y}])
  end

  def render(assigns) do
    ~L"""

      <h1>Live Interactive Graph</h1>

        &lt;%= for {x, y} &lt;- @data do %&gt;

        &lt;% end %&gt;





        Update Graph


    """
  end
end

This code creates a LiveView that renders a simple graph where each data point is represented by a square. When the user submits new data points, the graph updates in real-time.

Step 3: Set Up the Route for the Graph

Now, we need to configure the route for the LiveView in router.ex:

# lib/live_graph_web/router.ex
defmodule LiveGraphWeb.Router do
  use LiveGraphWeb, :router

  live "/graph", LiveGraphWeb.GraphLive
end

Step 4: Run the Application

You can now start the Phoenix server:

mix phx.server

Navigate to http://localhost:4000/graph in your browser, and you’ll see the interactive graph. You can add new data points by typing values into the input fields and submitting the form. The graph will update in real-time as you enter new data.

✅ Pros and ❌ Cons of Building an Interactive Data Visualization with Phoenix LiveView

✅ Pros:

• 📊 Real-time data manipulation and visualization without any JavaScript
• 🧠 Phoenix handles the data processing and updates in the backend
• 🚀 Scalable solution for building interactive visualizations
• 🔄 Easy to integrate with other real-time features like chat or notifications

❌ Cons:

• 🔧 Requires backend processing for real-time updates, which may be slower than client-side JavaScript solutions for large datasets
• 🖼 Limited in terms of advanced front-end customization, as it relies on LiveView’s rendering engine
• 📈 Complex visualizations might require integration with external libraries for more sophisticated charts

Summary

With Phoenix LiveView, you can easily build interactive data visualizations that update in real-time. In this tutorial, we created a simple graph where users can input data, and the graph updates dynamically with each submission. While the example is simple, Phoenix LiveView’s real-time capabilities can be scaled to build more complex and powerful interactive visualizations for your applications.

If you’re interested in diving deeper into Phoenix LiveView and building scalable UIs, check out my 20-page PDF guide:

Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns available for $10.

If this was helpful, you can also support me here: Buy Me a Coffee ☕