100%

NVD3 Bubble Chart

✓ Published0🌍 Public

Last edited Aug 7, 2017

Created on Jan 29, 2017

This example demonstrates an NVD3 bubble chart rendered through the dex.js library, plotting simulated data for ten named individuals across two years. Each data point’s Y-value and bubble size are generated randomly using the Faker API. The chart relies on NVD3 1.8.5, which runs on D3 v3, and the code explicitly switches the global `d3` object to `dex.charts.d3.d3v3` before loading NVD3 to ensure compatibility. The visualization is placed inside a full-page parent div, and the chart is configured and rendered via `dex.charts.nvd3.BubbleChart`.

AI-generated description

NVD3 Bubble Chart

This is the dex.js bubble chart leveraging NVD3. I really love how much polish the NVD3 folks have put into this chart.

Comments

NVD3 only works with D3 v3, so we switch over to D3v3 as we load scripts via:

<script src="https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.min.js"></script>
<script>d3 = dex.charts.d3.d3v3;</script>
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>

And everything works fine. We can even support chart interactions between visuals written in different versions of D3 as well as altogether different non-D3 web technologies.

References

dex.js The main site

mit Licensed

Similar vizzes

Loading thumbnail…

NVD3 Stacked Area Chart

This NVD3 Stacked Area Chart, built through the dex.js framework, visualizes 12 months of fake sales data for ten people, using 1,728 tuples of name, date, and sales values. It offers three interactive views—traditional stacked areas, a streamgraph, and an expanded percentage view—with smooth transitions preserving object constancy. Users can toggle series via the interactive legend, and the styled, semi-transparent labels keep underlying data visible. The chart leverages the NVD3 library, D3 version 3, and Faker for generating the dataset.

PPatMartin

78% match

Loading thumbnail…

Bubble Chart Example

This example visualizes a small dataset of points with x, y, and size attributes as a bubble chart, where each circle's horizontal and vertical positions map to the x and y values, and its radius corresponds to the size value. The chart is rendered as an SVG element using the d3.v6 library, including linear scales for both axes, axis ticks and labels, and steelblue filled bubbles. The code demonstrates the use of d3.select, d3.max, d3.scaleLinear, d3.axisBottom, and d3.axisLeft.

BBhavanaGIrni

70% match

Loading thumbnail…

Line Chart

This line chart visualizes three randomly generated data series over thirty samples, rendered with the dex.js charting library. The chart uses the C3 library’s line chart implementation, which is configured through a dex.charts.c3.LineChart instance. Data is generated on the fly via dex.datagen.randomIndexedMatrix, producing numeric values between 1 and 100 for columns A, B, and C. The visualization is embedded in a full-page HTML layout, with styling from Twitter Bootstrap and jQuery UI, and dependencies like Faker and Underscore loaded from CDNs.

663anp3ca

70% match

Loading thumbnail…

NVD3 Bubble Chart

This example uses a D3 Plus ring network to visualize the relationships among U.S. presidents, their political parties, and home states. The interactive chart arranges nodes in concentric rings, with arrows indicating edges between connected data points. The code loads data from a JavaScript array and renders the visualization using the `dex.charts.d3plus.RingNetwork` API, which leverages D3’s v3 force simulation for layout, along with jQuery, Bootstrap, and underscore libraries for interaction and styling. The visualization highlights categorical groupings and connections within the presidential dataset.

PPatMartin

69% match

Loading thumbnail…

dex.js : ECharts Line Chart

This interactive 3D visualization renders a line chart using the ECharts-GL library, displaying synthetic sales and revenue data generated with the Faker library. The chart plots five employees' monthly performance across x, y, and z axes within a browser via dex.js, which integrates the ECharts-GL engine and jQuery UI for configuration. Users can filter data and adjust appearance options, including chart type, colormap, and axis styling, through a configuration pane built with dex.js components.

PPatMartin

69% match

Loading thumbnail…

Fork of Fork of Bubbles with Json Data

This visualization displays a bubble chart of 18 individuals, with each bubble sized according to a monetary value and labeled with the person's name and that value. The code uses D3 v5's `d3.pack` layout to position bubbles within a hierarchical JSON dataset, rendering circles and text as SVG elements. Clicking a bubble triggers a process-loading function, and the chart is embedded in a React-based HTML page. The visualization demonstrates D3's declarative data joining with `d3.hierarchy` and `d3.pack`.

Yyuli19991001

69% match

Loading thumbnail…

React V16 + D3 + Force

This example shows a force-directed bubble chart built with React 16 and D3 v3, where each bubble’s position and size update as the simulation runs. The code uses `d3.layout.force` to calculate physics-based movement, with a negative charge proportional to each circle’s radius, and drives re-renders via React state updates in the `DataSeries` component. The visualization renders as SVG circles, and `requestAnimationFrame` in the force’s tick handler triggers continuous re-rendering, while the final `force.on("end")` logs total time, render time, and tick count to the console. Data is randomly generated as 1,000 points with radii between 2 and 10.

FFasani

68% match

Loading thumbnail…

bubble chart activity 7

This example demonstrates a bubble chart rendered with D3.js, showing data points as circles with scaled radii. The visualization is built using D3 v5, loaded via UNPKG, and the code imports API functions like `select` to manipulate the DOM. It also showcases local ES6 module imports, with a separate message module controlling text in the page. The chart’s styling is handled through a linked CSS file. The core behavior is minimal, focusing on integrating D3 with modular JavaScript rather than interactive simulation.

LLakshmanRangisetti

68% match