JSX Transpilers by Bundle Size

100%

JSX Transpilers by Bundle Size

✓ Published0🌍 Public

Last edited Feb 16, 2019

Created on Feb 15, 2019

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.

AI-generated description

In my quest to make VizHub awesome, one of the forefront features is JSX support. Initially, Bublé was added, as this seemed the path of least resistance. Unfortunately, this adds quite a bit of heft to the overall VizHub app bundle. This chart is an exploration of comparative bundle sizes for various means of transpiling JSX into JS, for potential use within VizHub as its "JSX Engine". Bundlephobia.com was used to get bundle size (minified, not GZipped) for each package.

The clear winner looks to be acorn-jsx. Since we're already using Rollup which has a dependency on Acorn, we'd really only be adding its 9.6 kB to our bundle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter PLot

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

Sserebryanaya.n@gmail.com

66% 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

65% match

Loading thumbnail…

Stylized Barchart Test

This stylized bar chart displays mobile app download totals across devices, with the dataset filtered to two rows and the x-axis scaled beyond the maximum value to expand tick labels. The visualization is built with React (v18) and D3 v7, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. Hovering changes bar color via CSS transitions, while `<title>` tooltips show formatted values. Data loads from a CSV via `d3.csv`, and axes are generated from D3 scales rather than D3 axis components.

Ddleoenri

64% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart visualizes the basic cost of Amazon services across fifteen U.S. cities, using horizontal bars to compare each city’s Total Library Size. Built with React and D3 v5, the app loads CSV data via `d3.csv`, then renders scales and axes with `scaleBand` and `scaleLinear`. SVG rectangles are generated declaratively through React’s JSX, while D3 utilities like `max` and `tick` formatting drive the axis layout. The visualization updates reactively when new data arrives, combining React’s state management with D3’s quantitative computation for a clean, responsive chart.

Kkarnisrikanth2212

64% 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

64% match

Loading thumbnail…

Bar Chart

A bar chart displays categorical data as vertical bars, with height encoding numeric values. The visualization is built with React and rendered as SVG, using D3 v7's `select` and `attr` methods to configure the chart's width and height directly from the SVG element. The data is loaded from an external CSV file, and the chart uses a fixed 960x500 pixel viewport for consistent presentation.

BBenjamin Gorman

64% match

Loading thumbnail…

E23 - Refactoring a Bar Chart

This bar chart shows the number of trips per region, rendered as horizontal bars using SVG within a React component. The code imports `scaleBand` and `scaleLinear` from d3 to map data to pixel coordinates, while React’s `useState` and `useEffect` handle asynchronous CSV loading via d3’s `csv` method. The `AxisBottom`, `AxisLeft`, and `Marks` components are separated for reuse, producing a clean, refactored visualization with a left margin aligned to the region labels.

VVanessa

64% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the size of OTT libraries across 20 countries using a horizontal bar chart. The code leverages React’s `useState` and `useEffect` hooks to fetch CSV data via `d3.csv`, then renders SVG marks with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Blue tick lines and text labels are manually generated from `xScale.ticks()`, while bars are drawn as `rect` elements. The chart sources its data from a gist CSV file containing GDP and library-size metrics.

Ttarungunda

64% match