Yet Another D3 DAG Sample code

 

Photo by Pixabay from Pexels.com
Photo by Pixabay from Pexels.com

In many cases when we need visualize relations and associations between entities, graph visualization tools are valuable. One of the great open source libraries for rendering graphs on web pages is D3.js. I use it in the past and yesterday, I spent some time to play with it. I have created a simple directed acyclic graph, DAG with it. The source code is in https://github.com/dennisseah/d3_dag.

D3.js is widely used because it is easy to learn and there are abundant of great examples. Recently, I used it for Microsoft Summer Hackathon where we used its map and charting API. Images of them can be found in my previous blog, deaths due to police actions in USA.

When talk about D3.js, it is almost impossible to miss this guy, Mike Bostock who is the creator of D3.js. Before his creation, it is extremely painful to draw on svg. And even if we are able to create svg drawings, they usually looks ugly. :-)

This is short blog to share my code in https://github.com/dennisseah/d3_dag. In there, you can see how to draw a node with a circle (stroke without fill), edges with arrowheads, tooltip (when mouse hover nodes and edges), and how to handle browser resize event.

demo at https://dennisseah.github.io/d3_dag/index.html




Comments

Post a Comment

Popular posts from this blog

OpenAI: Functions Feature in 2023-07-01-preview API version

Image
  Image from https://www.pexels.com/@pavel-danilyuk/ One of the cool features of OpenAI version 2023-07-01 is its custom Functions feature. This feature is close to me because I am working on a project where we require OpenAI to generate JSON responses. We always want the generated JSON to be consistent, otherwise, we need to do some post-processing tasks to get the JSON object in the correct schema. In the blog, we observe the completion with and without this new feature. Development Setup python -m venv .venv poetry init poetry shell poetry add openai poetry add python-dotenv poetry add pydantic I am using Python version 3.11 Create .env file OPENAI_API_TYPE="azure" OPENAI_API_BASE="<OpenAI endpoint>" OPENAI_API_KEY="<OpenAI secret>" OPENAI_API_VERSION="2023-07-01-preview" OPENAI_DEPLOYMENT_ID="<deployment identifier>" Without OpenAI functions feature We use two sample texts for experimentation. We want to get the na
Read more

Storing embedding in Azure Database for PostgreSQL

Image
  Image from https://www.pexels.com/@tara-winstead/ There are many options to store text embeddings. In this blog, we shall look at storing embedding in Azure Database for PostgreSQL. Installing Azure Database for PostgreSQL Install Azure Database for PostgreSQL Flexible Server.  Once it is deployed, enable two extensions. Install Python modules python -m venv .venv poetry init poetry shell poetry add openai[datalib] poetry add python-dotenv poetry add psycopg2-binary My Python version is 3.10. Create .env OPENAI_API_TYPE="azure" OPENAI_API_BASE="<HTTP endpoint to Azure OpenAI Service>" OPENAI_API_KEY="<secret to Azure OpenAI Service>" OPENAI_API_VERSION="2023-05-15" TEXT_MODEL="<deployment id of text embedding model>" PGHOST="<my-service>.postgres.database.azure.com" PGUSER="<user name>" PGPASSWORD="<secret>" PGPORT="5432" PGDATABASE="< database name
Read more

Happy New Year, 2024 from DALL-E

Image
generated by DALL-E Wishing everyone a happy new year. Year 2023 is great for me because I learned much about OpenAI. I am involved in a live deployment with it, and involved in a handful of interesting user scenarios around it. On top of this, a copilot hackathon. The image above is generated by DALL-E and following is the code. 1. Dependencies python = "^3.10" pydantic-settings = "^2.1.0" openai = "^1.3.8" 2. Environment Parameters OPENAI_AZURE_ENDPOINT="<your azure openai endpoint>" AZURE_OPENAI_API_KEY="<your azure openai secret>" OPENAI_API_VERSION="2023-12-01-preview" OPENAI_DALLE_MODEL="dalle" Note: OPENAI_API_VERSION has to be 2023-12-01-preview otherwise you will get an exception openai.NotFoundError: Error code: 404 - {'error': {'code': '404', 'message': 'Resource not found'}} dalle  is the name of my dall-e-3 deployment model. You need to change it to
Read more