Skip to main content
100%

Gist 80e1a06b1a785d011c15435a72e76f3a

✓ Published0🌍 Public
YYannael
Last edited May 31, 2024
Created on May 17, 2024

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist d167d007264b16a0990049b042c47c84

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.

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
75% match
Loading thumbnail…

Gist e5b685ab28be02728c48

The visualization charts seventeen potential next-platform technologies as nodes in a force-directed network, with node size and link thickness reflecting candidate prominence. It uses `d3.forceSimulation` to position the labels and `d3.drag` for interaction, while each node’s circular shape and grayscale shading derive from SVG circles styled via CSS. The underlying data is a static array of strings from the author’s gist, rendered without external datasets or geographic mapping. All elements respond to mouse events, but no filtering or temporal transitions are present.

TTheLady
69% 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
68% match
Loading thumbnail…

Gist 2186477931c9166d8a5f26d5ebcd0e55

This visualization shows a simulated ranking of soccer players based on their fantasy-league value, where each player’s node weight reflects a blend of difficulty, form, and chance of playing. A force-directed layout using d3.forceSimulation positions the labeled nodes, while their size and color encode the computed weight. The chart draws directly from the CSV data in out_weights.csv, with player names as text labels. The code relies on D3’s selection and data-binding methods to bind the tabular rows to circle and text elements, and it uses the simulation’s tick event to update positions dynamically, though no explicit interaction or animation beyond the layout is implemented.

CConorAspell
67% match
Loading thumbnail…

Gist 8bb4970e2700b40a3dce1d785654d907

This visualization uses a force-directed graph to map the relationships between identifiers extracted from a Power Query M codebase. The data originates from a gist by Hugoberry, showing dependencies among functions, modules, and error-handling patterns. The rendering relies on D3.js’s `forceSimulation` with custom link and node positioning, while each node’s label is drawn using SVG text. The code specifically highlights groupings like `TableAction.*`, `ValueAction.*`, and `Pattern.*`, revealing hierarchical clusters of related API calls. The graph’s layout is animated via D3’s tick handler, and the visible node sizes suggest a metric like degree centrality, though the exact encoding is not explicit in the snippet.

HHugoberry
66% match
Loading thumbnail…

LSA-G1

This visualization presents a knowledge graph of five terms, showing the strength of connections between them through directed, weighted links. Node size represents a value from a hidden dataset, and the layout distributes nodes in a circle. The graph uses SVG rendering with D3.js v5, utilizing a custom self-loop arc function to draw curved edges. The code applies a color scale for team categories and displays numeric link weights. The graph is presented as an LSA (Latent Semantic Analysis) of the high practice, low tests group G1.

Aanching0312.hs11@nycu.edu.tw
65% 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
65% match