D3 Example

100%

✓ Published0🌍 Public

Last edited May 12, 2016

Created on May 11, 2016

A horizontal bar chart compares the operations-per-second benchmark results of 10 JavaScript event-emitting libraries, sorted from fastest to slowest. Rendered as static SVG, the visualization uses D3.js (version 3.5.5) for scales, axes, and data binding, and d3-tip for tooltips that display exact values. The data comes from a CSV file. The x-axis uses SI-prefix formatting (replacing G with B), and the visualization is implemented via `d3.scale.linear`, `d3.scale.ordinal`, and `d3.svg.axis`.

AI-generated description

A bar chart showing benchmark results of various libraries (including reactive-property) emitting a single parameter. Data from Hypercubed/EventsSpeedTests node-v4.4.4.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/d9e60dd20f22e37e34e0'>Chart Types</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2102878&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

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

78% match

Loading thumbnail…

D3 Example

This example shows a horizontal bar chart comparing the number of Google search results for 14 visualization techniques, ranked from most to least common. The visualization uses D3.js version 3.5.5 to load a CSV file via `d3.csv`, then maps data to an ordinal y-scale and linear x-scale. It includes formatted tick labels that abbreviate large numbers with SI prefixes via `d3.format("s")`, plus a custom tooltip using `d3-tip` that displays exact result counts on mouseover. The chart is rendered as SVG with a Playfair Display font for axis text.

CCurran Kelleher

78% match

Loading thumbnail…

D3 Example

This example presents a horizontal bar chart of the ten most populous cities, using D3.js to render SVG elements. It compares population figures sourced from Wikipedia’s list of cities proper by population, displayed via a linear x-scale and an ordinal y-scale with rounded band padding. The chart applies Google Fonts (Poiret One) to axis text and labels, while the D3 CSV loader (`d3.csv`) parses the local `top10cities.csv` file with a custom type function to convert population values to numbers. The code explicitly configures margins, axis ticks with SI formatting, and removes the y-axis line for a clean visual.

CCurran Kelleher

76% match

Loading thumbnail…

D3 Example

A bar chart displays global religious populations, ranked by size, with tilted x-axis labels for readability. The visualization uses D3.js (v3) to bind CSV data, scale bars with `d3.scale.ordinal` and `d3.scale.linear`, and render axes via `d3.svg.axis`. Tick labels rotate by -16 degrees, and y-axis values use a custom SI formatter (e.g., "B" for billions). The chart’s SVG is built with margin conventions, while the x-axis text styling applies the Open Sans font.

CCurran Kelleher

76% match

Loading thumbnail…

D3 Chart

This example displays six D3.js charts—horizontal and vertical bar charts, a line chart, an area chart, a pie chart, and a donut chart—all rendered as SVG elements. Each visualization uses the d3.csv function to load population data by country from a local CSV file. The code applies d3.scaleLinear and d3.scaleBand for axes, d3.line and d3.area with curveBasis for path generation, and d3.scaleOrdinal with schemeSet2 for categorical colors, while d3.axisLeft and d3.axisBottom create the tick marks.

Sshadreza

75% match

Loading thumbnail…

D3

This example shows a horizontal bar chart of population data for ten countries, with population values scaled by a factor of 1,000. The visualization uses D3 v5 to load the CSV, create linear and band scales, and render SVG rectangles with axes. The code demonstrates `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and the chart is built within a React context, with the SVG element targeted by `d3.select`. The bars are styled with steelblue fill, and axes are labeled with a custom font size.

JJeffrey Miiller

74% match

Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

深深度碎片

74% match

Loading thumbnail…

D3.js Tutorial

This example shows a bar chart of test scores for seven people, sorted from highest to lowest score, with royal blue bars, labeled axes, and hover opacity feedback on each bar. The visualization uses D3.js v5 with an SVG rendering approach, creating scales via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It appends rectangles bound to an array of name-score objects, calls `d3.axisBottom` and `d3.axisLeft` for the axes, and sorts the data with `d3.descending`. The chart is embedded in a basic HTML page with a centered title.

Bbhargav83

74% match