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

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

Bing Search as tool for OpenAI

Image
  Image from https://www.pexels.com/@skitterphoto/ Many times, we need to search for information in the web when we are working with OpenAI. One of the reasons is that the dataset for training for OpenAI is never up to date. For instance, the OpenAI GPT-4 Turbo has knowledge of events up to April 2023. Here is the Python implementation with Pydantic model. Dependencies python = "^3.10" pydantic-settings = "^2.1.0" pydantic = "^2.5.2" azure-cognitiveservices-search-websearch = "^2.0.0" Environment These are the environment parameters needed. Have the following in a .env file. azure_bing_search_endpoint="https://api.bing.microsoft.com" azure_bing_search_key="<key>" We look under "Keys and Endpoint" for these values. Pydantic Setting Model from pydantic_settings import BaseSettings class BingSearchSettings(BaseSettings): azure_bing_search_endpoint: str azure_bing_search_key: str class Config:
Read more

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