D3 Example

100%

✓ Published0🌍 Public

Last edited May 8, 2016

Created on Jan 28, 2016

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.

AI-generated description

A bar chart showing the number of search results for a set of visualization techniques. Each term was entered into Google and the number of results for each was recorded by hand.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/4df29e2f8c6e20ed2baf'>Religions Bar Chart</a>

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

Similar vizzes

Loading thumbnail…

D3 Example

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`.

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

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

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

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

75% match

Loading thumbnail…

Data Visualization with D3

This example displays a bar chart of categorical data from a CSV file, comparing numeric values across named categories. The visualization uses an SVG canvas with axes, mapping the data's numeric values to horizontal bar lengths and category names to vertical positions. The implementation relies on D3 v5 utilities for data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis generation with `axisLeft` and `axisBottom`, while the chart is rendered as SVG rectangles within a React-based HTML page.

Ssvensonneveld

74% match

Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

SSubhamChhetri

74% match

Loading thumbnail…

D3 Example

This example visualizes the top five countries by population as a bar chart of empty, gray-outlined rectangles. It demonstrates how to scaffold a visualization with arbitrary nested layouts by rendering fixed-height placeholders for each country. The code uses D3.js (version 3.5.5) with an ordinal scale and range bands to position the bars, an SVG axis for labels, and a custom tick formatter that abbreviates billions as “B.” Data is loaded from a CSV file listing 2015 population estimates, with the x-axis mapped to country names and the y-axis left unencoded for future flexibility.

CCurran Kelleher

73% match