explaingit

novus/nvd3

★ 7,232JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A JavaScript charting library built on D3.js v3 that provides ready-to-use interactive chart components, line, bar, pie, scatter, candlestick, and more, with tooltips and legends included out of the box.

Mindmap

mindmap
  root((NVD3))
    What it does
      D3 charting wrapper
      Ready-to-use components
      Interactive by default
    Chart Types
      Line and bar charts
      Pie and donut charts
      Scatter and box plots
      Candlestick charts
      Sunburst charts
    Features
      Tooltips built in
      Legend included
      Reusable components
    Tech Stack
      JavaScript
      D3.js version 3
      CSS
    Limitation
      D3 v3 only
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add an interactive line chart with tooltips to a web page by including two files and writing a few lines of JavaScript.

USE CASE 2

Display financial data as a candlestick chart in a browser-based dashboard.

USE CASE 3

Create a stacked area chart to visualize multiple data series changing over time.

USE CASE 4

Build a hierarchical data visualization using the sunburst chart component.

Tech stack

JavaScriptD3.jsCSS

Getting it running

Difficulty · easy Time to first run · 30min

Requires D3.js version 3.x, does not work with D3 v4 or newer, which limits compatibility with modern D3 projects.

In plain English

NVD3 is a JavaScript charting library built on top of D3.js, a lower-level tool for drawing data-driven graphics in the browser. D3 is powerful but requires considerable effort to produce standard chart types from scratch. NVD3 wraps that complexity into ready-to-use, configurable chart components, so you can drop in a line chart, bar chart, pie chart, or scatter plot with much less code. The chart types available include line charts, bar charts, stacked area charts, pie and donut charts, scatter plots, box plots, candlestick charts for financial data, sunburst charts for hierarchical data, and a force-directed graph layout. Each chart comes with interactive features like tooltips and legends built in. Adding a chart to a page involves including two files (a JavaScript file and a CSS file) and writing a few lines to point the chart at your data. NVD3 was designed around the idea of reusable chart components, following a pattern from D3's own documentation. This means each chart type exposes a consistent set of configuration options rather than requiring you to build chart internals by hand. The documentation and live examples are hosted at the nvd3-community GitHub Pages site. One important compatibility note: NVD3 requires D3 version 3.x and does not support D3 v4 or newer. Since the broader D3 ecosystem has moved on to later versions, this is a meaningful limitation. A separate community fork at the nvd3 GitHub organization tracks D3 v4 support as a work in progress. NVD3 runs on all major browsers including Chrome, Firefox, Safari, and Internet Explorer 10 and above. It works best on WebKit-based browsers according to the README.

Copy-paste prompts

Prompt 1
Show me how to create an interactive line chart with NVD3 using a JSON dataset, with tooltips and a legend.
Prompt 2
How do I create a stacked bar chart with NVD3 that re-renders when the underlying data changes?
Prompt 3
Build a responsive pie chart with NVD3 that highlights slices on hover and shows a legend below.
Prompt 4
I'm using D3 v3, how do I add an NVD3 candlestick chart to display stock price data on a page?
Prompt 5
How do I configure NVD3 chart colors, axis labels, and margins to match my site's design?
Open on GitHub → Explain another repo

← novus on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.