https://github.com/maikroempagel/phoenix_liveview_d3js
Demonstrates how to interact with D3.js from Phoenix LiveView
https://github.com/maikroempagel/phoenix_liveview_d3js
d3 d3-js d3-visualization d3js elixir elixir-examples elixir-lang elixir-phoenix elixir-programming-language phoenix phoenix-elixir phoenix-framework phoenix-liveview
Last synced: 10 months ago
JSON representation
Demonstrates how to interact with D3.js from Phoenix LiveView
- Host: GitHub
- URL: https://github.com/maikroempagel/phoenix_liveview_d3js
- Owner: maikroempagel
- Created: 2021-10-13T16:18:01.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-30T12:53:19.000Z (over 3 years ago)
- Last Synced: 2025-04-09T17:59:35.833Z (about 1 year ago)
- Topics: d3, d3-js, d3-visualization, d3js, elixir, elixir-examples, elixir-lang, elixir-phoenix, elixir-programming-language, phoenix, phoenix-elixir, phoenix-framework, phoenix-liveview
- Language: Elixir
- Homepage:
- Size: 118 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Description
This little project demonstrates how to interact with [D3.js](https://d3js.org/) from a Phoenix LiveView using [client hooks](https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks).
Currently a simple circle object is added to the LiveView dynamically. The color of the circle changes by periodically pushing a random color to the client.
More examples might be added in the future.
## How the project was created:
```sh
mix phx.new phoenix_liveview_d3js --no-mailer --no-dashboard --no-ecto --live --module D3Demo
cd phoenix_liveview_d3js/assets
npm install d3 --save
```
To start your Phoenix server:
* Install dependencies with `mix deps.get`
* Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
## Learn more
* Official website: https://www.phoenixframework.org/
* Guides: https://hexdocs.pm/phoenix/overview.html
* Docs: https://hexdocs.pm/phoenix
* Forum: https://elixirforum.com/c/phoenix-forum
* Source: https://github.com/phoenixframework/phoenix