Tile Density Heatmap — Light Tile

Mix.install([
  {:plotly_ex, "~> 0.3"},
  {:kino, "~> 0.18"},
  {:req, "~> 0.5"}
])

Section

Densitymap creates a kernel density heatmap on a tile map. lat:/lon: give point positions; z: provides optional per-point weights (defaults to 1); radius: controls the pixel spread of each point's influence. style: "carto-positron" provides a neutral light background.

alias Plotly.{Figure, Densitymap}

url = "https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv"
body = Req.get!(url).body

[header | rows] = String.split(body, "\n", trim: true)
keys = String.split(header, ",") |> Enum.map(&String.trim/1)

airports =
  rows
  |> Enum.map(fn row ->
    values = String.split(row, ",")
    Enum.zip(keys, values) |> Map.new()
  end)
  |> Enum.filter(fn a ->
    match?({_, _}, Float.parse(a["lat"] || "")) and
    match?({_, _}, Float.parse(a["long"] || ""))
  end)

lat = Enum.map(airports, &(elem(Float.parse(&1["lat"]), 0)))
lon = Enum.map(airports, &(elem(Float.parse(&1["long"]), 0)))
z = Enum.map(airports, fn a ->
  case Integer.parse(a["cnt"]) do
    {n, _} -> n
    :error -> 1
  end
end)

Figure.new()
|> Figure.add_trace(
  Densitymap.new(
    lat: lat,
    lon: lon,
    z: z,
    radius: 10,
    colorscale: "Hot",
    showscale: true,
    colorbar: %{title: %{text: "Flights"}}
  )
)
|> Figure.update_layout(
  title: "US Airport Traffic Density — Light Tile",
  map: %{
    style: "carto-positron",
    center: %{lat: 37.8, lon: -96.0},
    zoom: 3
  }
)
|> Plotly.show()