Python NVD3

0.16.0 · maintenance · verified Sat Apr 11

Python NVD3 is a Python wrapper for the NVD3 JavaScript library, which in turn builds re-usable charts and chart components for d3.js. It enables Python developers to generate interactive D3.js charts by writing Python code. The current version, 0.16.0, was uploaded to PyPI in April 2024. While receiving recent maintenance uploads, major feature development largely concluded around 2015, indicating a maintenance-focused release cadence.

Warnings

gotcha The `python-nvd3` library primarily generates HTML and JavaScript code. It does NOT bundle or serve the D3.js and NVD3.js JavaScript libraries themselves. Users must ensure these external JS/CSS assets are available to the browser (e.g., via CDN links or by serving local files) for the charts to display.
Fix: Include `<script>` tags for `d3.min.js` and `nv.d3.min.js`, and a `<link>` tag for `nv.d3.min.css` in your HTML, pointing to either a CDN or locally served files.
gotcha When working with time-series data for charts like `lineChart`, NVD3 expects time values to be represented as milliseconds since the Unix epoch, not seconds or `datetime` objects directly. Incorrect formatting will lead to misrendered or empty charts.
Fix: Convert `datetime` objects or seconds since epoch to milliseconds since epoch before passing them to the chart data. E.g., `int(time.mktime(dt_object.timetuple()) * 1000)`.
gotcha The method to add a data series to a chart is `add_serie` (singular 'serie'), not the commonly mistaken `add_series` (plural). Using the plural form will result in an `AttributeError`.
Fix: Always use `chart.add_serie(y=ydata, x=xdata, name='Series Name')`.
deprecated Older versions of `python-nvd3` might generate HTML with relative paths to D3.js and NVD3.js assets. If these assets are not located in the expected relative directories, the browser will encounter 404 errors, and charts will not render.
Fix: Update to a newer version of the library or manually ensure correct (absolute or CDN) paths are used for the JavaScript and CSS dependencies in the generated HTML.
gotcha While PyPI shows a recent upload for version 0.16.0, the project's core feature development appears to have largely slowed down around 2015. Newer versions primarily reflect minor fixes or compatibility updates rather than significant new chart types or functionality. Users seeking actively developed, modern charting libraries might consider alternatives.
Fix: Review the GitHub repository's commit history and issue tracker to understand the current development status and decide if the library meets your project's longevity and feature requirements.

Install

pip install python-nvd3 Install latest version

Imports

pieChart
```
from nvd3 import pieChart
```
lineChart
```
from nvd3 import lineChart
```
multiBarChart
```
from nvd3 import multiBarChart
```

Quickstart

This quickstart demonstrates how to create a basic pie chart using `python-nvd3`. It initializes a `pieChart` object, adds data, builds the HTML and JavaScript content, and shows how to generate a complete HTML file ready for rendering in a web browser. Note that D3.js and NVD3.js JavaScript libraries, along with their CSS, must be included externally for the chart to render properly.

from nvd3 import pieChart

# Prepare data
xdata = ["Orange", "Banana", "Pear", "Kiwi", "Apple", "Strawberry", "Pineapple"]
ydata = [3, 4, 0, 1, 5, 7, 3]

# Create a pie chart
chart_name = 'pieChart'
chart = pieChart(name=chart_name, color_category='category20c', height=450, width=450)

# Add a series of data
extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}}
chart.add_serie(y=ydata, x=xdata, extra=extra_serie)

# Build the HTML content
chart.buildcontent()

# The generated HTML can be saved to a file or embedded in a web application
html_output = f"""
<!DOCTYPE html>
<html>
<head>
    <title>NVD3 Pie Chart</title>
    <!-- You MUST include D3.js and NVD3.js libraries -->
    <!-- For local testing, download from nvd3.org/bower_components/ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js" charset="utf-8"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet" type="text/css">
    <style>
        svg { font: 10px sans-serif; }
    </style>
</head>
<body>
    <h2>{chart_name}</h2>
    {chart.htmlcontent}
</body>
</html>
"""

# In a real application, you might pass this 'html_output' to a web framework template.
print(html_output)

# To demonstrate the generated chart in a browser, uncomment the following:
# with open('my_pie_chart.html', 'w') as f:
#     f.write(html_output)
# import webbrowser
# webbrowser.open('my_pie_chart.html')

view raw JSON →