Skip to main content
100%

Gist d167d007264b16a0990049b042c47c84

✓ Published0🌍 Public
YYannael
Last edited Jun 26, 2024
Created on May 27, 2024

This visualization compares large language models by plotting their context window size against input and output pricing per million tokens. It uses a scatterplot with logarithmic scales, encoding each model as a point colored by organization. The code employs D3.js with `d3.forceSimulation` for label placement to avoid overlap, while the data comes from the embedded `lmm.csv` file. Tooltips reveal exact values for context size, pricing, knowledge cutoff, and privacy details, with hover interactions driven by D3 event handlers.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 80e1a06b1a785d011c15435a72e76f3a

This visualization maps the competitive landscape of large language models by plotting seven LLMs on a force-directed graph, where each node’s position reflects its Arena ELO rank from May 2024, with size encoding context window length and color indicating the organization. The chart uses `d3.forceSimulation` to calculate node placement, with tooltips revealing metadata like license, knowledge cutoff, and context size from the CSV file. Labels are positioned via a collision-avoidance force, and the graph renders with D3’s SVG API, supporting zoom and pan interactions for closer inspection of each model’s attributes.

YYannael
82% match
Loading thumbnail…

Gist 34db926c79af2bdacb2a4019eb260fbb

This visualization compares four embedding models by plotting their key specifications—embedding size, context size, model size in gigabytes, MTEB rank, and release date—as labeled points in a scatterplot-like layout. The chart uses D3.js with a force-directed simulation (`d3.forceSimulation`) to position each model’s marker, while axes encode embedding size against context size, with point color and label text revealing the remaining attributes from the `embeddings_models.csv` data source. Hovering over a point highlights its model name and shows a tooltip with all numeric values, making trade-offs between model dimensions and performance immediately visible.

YYannael
77% match
Loading thumbnail…

Large Language Model API Pricing vs Web Dev Performance

This interactive scatter plot compares the cost of API calls against web development performance scores for various large language models. Each circle represents a model, colored by provider (OpenAI, Anthropic, Google, or Other), with cross-hair lines and a dashed trend line revealing the cost-performance trade-off. Hovering over a provider in the legend highlights that provider’s models. Built with React, D3.js 7, and SVG, it reads pricing data from OpenRouter and performance benchmarks from LMArena.

CCurran Kelleher
69% match
Loading thumbnail…

Large Language Model API Pricing (October 2024)

This horizontal bar chart compares the cost per million output tokens for chat models from four API providers: Together AI, DeepInfra, OpenAI, and Anthropic, with bars colored by provider and labeled with their exact price. The visualization uses D3.js, employing a symlog scale for the x-axis to handle the wide range of prices, and custom tick selection logic to place readable axis labels. Data is sourced from a Google Sheet and filtered to chat-type models, with bars sorted by ascending price.

CCurran Kelleher
66% match
Loading thumbnail…

OpenRouter Data

A scatter plot maps the OpenRouter model catalog, with each point representing a model positioned by context length and pricing per million tokens. The visualization uses a logarithmic scale for pricing to accommodate the wide range from free models to premium tiers, while color coding distinguishes model providers and point size reflects context window capacity. Built with D3.js, the plot reads from a JSON snapshot of the OpenRouter API, fetched via curl on February 21, 2025, and renders interactive tooltips showing model names, descriptions, and tokenizer details on hover.

CCurran Kelleher
65% match
Loading thumbnail…

Gist db32a113f546aa03b43c0e1f84f80d28

The visualization shows a force-directed network graph of GitHub gist data, with nodes representing individual gists and links showing relationships between them. It uses d3.forceSimulation to compute the layout, with node size encoding gist size and color indicating file type or language. The rendering relies on SVG elements updated per tick via the simulation’s tick event. The code loads a static JSON file containing preprocessed gist metadata, and does not use canvas or WebGL. The visualization highlights clustering patterns among related gists, revealing emergent communities in the dataset.

335degrees
64% match
Loading thumbnail…

Gist 6499e03ffdfc7479408da70f20af3625

This visualization maps the semantic relationships between words extracted from a text corpus. It shows a network of nodes and edges, where connected words cluster together based on their contextual similarity. The layout uses a force-directed graph, likely powered by d3.forceSimulation, to position nodes and links. The code loads a spaCy NLP model (`en_core_web_lg`) to compute word vectors, and filters out stop words using NLTK’s stopwords list before processing the raw text.

AArizonaTay
63% match
Loading thumbnail…

Gist e049bb6d7696d1b2d4ff242e68fcd062

This example analyzes text data by performing topic modeling and visualization. It shows the resulting topics and their associated terms, revealing latent themes in the dataset. The code uses NLTK for tokenization and stopword removal, TextBlob for sentiment analysis, and Gensim’s LdaModel and CoherenceModel for topic extraction. Plotly’s `scatter` and `bar` traces render the interactive visualizations, with data processed from a pandas DataFrame. The rendering approach relies on Plotly’s offline mode, initiated via `pyo.init_notebook_mode()`.

AArizonaTay
63% match