Skip to main content
SimilarExport ZIP
100%

Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

✓ Published0🌍 Public
RRestuta
Last edited Oct 13, 2019
Created on Jan 5, 2016

This example compares the minified and gzipped file sizes of popular JavaScript frameworks, including React, Angular 2, Vue, Ember, Preact, Inferno, and Aurelia, using data sourced from a gist by Restuta and downloaded from cdnjs. A horizontal bar chart visualizes the sizes for both compression states, with frameworks listed along the y-axis and file sizes (in kilobytes) along the x-axis. The visualization uses d3.scaleBand and d3.scaleLinear to map categories and values, while d3.axisBottom renders the tick marks. Two bars per framework, one for minified and one for gzipped, are drawn with distinct colors, allowing direct comparison of compression efficiency across libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

JSX Transpilers by Bundle Size

This bar chart compares the minified bundle sizes (in kB) of various JSX transpilers, from the largest at 545.7 kB (Bublé) down to the smallest at 9.6 kB (acorn-jsx). Built with React and D3 v5, it renders as an SVG using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with axis labels and bar labels positioned conditionally for values under 20 kB. Data comes from bundlephobia.com, loaded via `csv('data.csv')`, with black tick lines removed and a title displayed above the plot.

CCurran Kelleher
72% match
Loading thumbnail…

ICE7 Pie Chart

This pie chart visualizes the market share of popular JavaScript frameworks, including Vue, ReactJS, and Angular, based on values loaded from a CSV file. The chart displays each framework’s percentage via colored arcs and includes a legend with labels and values. Built with D3 v5 and React, it uses `d3.pie()` to compute arc angles, `d3.arc()` to draw SVG paths, and `scaleOrdinal` for color mapping, rendering the result as an SVG graphic.

Ggeethikal
69% match
Loading thumbnail…

Hello VizHub

A scatterplot maps the popularity of seven JavaScript frameworks, plotting years in use against GitHub stars, with circle size representing fork counts. The visualization is divided into four quadrants by reference lines, labeling categories like "In Fashion" and "Rock Stars." Built with D3 v5 and React, the code uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG elements rendered via `d3.select` and data joins. Static HTML, CSS, and a pre-bundled JavaScript file load the chart.

JJoker-tr
67% match
Loading thumbnail…

Java Script Libraries

This example visualizes popular JavaScript libraries as circles arranged along a horizontal axis. Each circle’s area corresponds to the library’s GitHub star count, while its lightness reflects the minified file size in kilobytes, with darker colors indicating larger codebases. Hovering reveals a tooltip with the library name, star count, and size. The code uses D3’s `csv`, `scaleSqrt`, `scaleLinear`, and `max` to load and scale data from a remote CSV, then renders SVG circles with appended `title` elements for interactivity.

Sserebryanaya.n@gmail.com
66% match
Loading thumbnail…

Gist af2ebfb61ff58df18497b60494e7ecc0

This example visualizes the co-occurrence of JavaScript libraries across top websites, mapping which frameworks appear together on the same pages. It uses a force-directed graph layout to position library nodes, with edges representing shared site usage. The data is collected via concurrent HTTP requests using `FuturesSession` and `ProcessPoolExecutor`, parsed from Libscore API responses and Wappalyzer HTML, then aggregated into a combined JSON dataset. The visualization is built with React, rendering the network of library relationships derived from real site rankings and script tags.

NN0taN3rd
65% match
Loading thumbnail…

Gist f0ea84b0d4d50604c405f5b74db1b498

This example visualizes the relationships between a set of JavaScript frameworks and their descriptions using a force-directed graph built with Vue.js and D3’s `d3.forceSimulation`. The graph reads from an inline `category.csv` dataset, mapping each of the three categories—Node.js, Vue.js, and Angular.js—to its respective description. Nodes are rendered as circles, with labels displayed alongside, while the simulation drives their positions through charge and link forces. The visualization demonstrates a compact, interactive network layout, though it does not include drag behavior or hover interactions beyond the static arrangement. The code relies on Vue’s reactivity to update the DOM as the simulation runs.

WWill Carter
64% match
Loading thumbnail…

Reusable Componenet

This example demonstrates a reusable D3.js chart component implemented in React, visualizing JavaScript libraries by their GitHub stars (x-axis) and minified file size (y-axis). Circle size and fill color encode star count, with a tooltip revealing library name and metrics. Built with D3's `scaleSqrt`, `scaleLinear`, `axisBottom`, and `axisLeft`, it loads data from a CSV via `d3.csv` and renders SVG, leveraging a fluent chart factory with configurable accessors for margins and data fields.

Sserebryanaya.n@gmail.com
64% match
Loading thumbnail…

Gist e92adbf79e3256a0d3e222f140a0433b

This example visualizes the relative performance of 16 JavaScript event-emitter libraries across two benchmark scenarios, “emit objects” and “emit one parameter,” using the raw output of the benchmark runner. The data, drawn from a gist by Hypercubed, is rendered as a grouped horizontal bar chart where each bar’s length corresponds to operations per second (ops/sec), with libraries sorted by speed and the fastest highlighted. The chart uses a simple SVG-based custom layout (likely with d3-scale for axes and d3-array for sorting) rather than a high-level charting library, directly mapping the numeric values to pixel widths. The visualization does not show error margins or statistical significance, only the raw ops/sec values and the benchmark’s “Fastest is” annotation for each test.

HHypercubed
64% match