100%

NVD3 Bubble Chart

✓ Published0🌍 Public

Last edited Jun 15, 2018

Created on Jun 15, 2018

This example uses the NVD3 library to render a bubble chart from synthetic data generated with Faker.js. The chart displays ten named series across two years of monthly data, with random Y values and bubble sizes. The code loads D3 v3 via dex.js’s compatibility layer, then delegates to `nv.d3.min.js` to produce the interactive NVD3 visualization. The data is structured as CSV and passed directly to the `dex.charts.nvd3.BubbleChart` component, which handles rendering within the specified parent div.

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

forked from <a href='http://bl.ocks.org/PatMartin/'>PatMartin</a>'s block: <a href='http://bl.ocks.org/PatMartin/8184531920febc87269322f46e172322'>NVD3BubbleChart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

NVD3 Bubble Chart

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

PPatMartin

91% match

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

77% match

Loading thumbnail…

Bubble Chart with D3.js

This example presents a bubble chart that visualizes product data from a CSV file, mapping Revenue to bubble radius and Profit to a secondary size influence, with colors assigned by category index. It uses D3.js v5 with an SVG rendering approach, reading data via `d3.csv()`, scaling values with `d3.scaleLinear()` and `d3.scaleOrdinal()`, and randomly positioning bubbles within the chart area. Each bubble includes a text label and a tooltip via appended `title` elements, while axis names for Revenue and Profit are added manually.

NNukaShravanKumar

71% match

Loading thumbnail…

Interactive Bubble Chart

This interactive bubble chart displays risk assessment ratings for dummy data across 2014 and 2015. Users toggle between years and risk categories, causing the circles to regroup through animated transitions. The visualization uses D3.js version 3 with a force layout, collision detection, and SVG rendering. Data is loaded from CSV files representing individual assessments, with popovers showing details on hover and color gradients indicating combined risk levels.

AAjayyy

71% match

Loading thumbnail…

Fork of bubblechart

This interactive bubble chart allows users to explore a multivariate dataset by selecting which numeric columns to map to the x-axis, y-axis, and bubble radius, and which categorical column to use for color encoding. The visualization updates dynamically, using D3.js v7 scales and SVG circles to render the data. Dropdown menus filter numeric and categorical columns from the loaded CSV file, which is fetched from a GitHub repository. The chart employs `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

LLayaMyadam@my.unt.edu

70% match

Loading thumbnail…

NVD3

This example demonstrates an interactive multi-bar chart built with the NVD3 library, rendered through Vue.js and rCharts. The visualization uses SVG with animation to display categorical data across grouped bars, featuring hover effects that change bar opacity and display tooltips with detailed values. The chart includes standard NVD3 components such as axes, legend, and brush functionality, all styled through the included CSS. The base64-encoded stylesheet defines the visual appearance, including tooltip formatting, bar coloring, and SVG element styling. The implementation leverages NVD3's built-in chart types for grouped bar displays, with the rCharts wrapper providing the R-to-JavaScript bridge.

JJverma

70% 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…

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

70% match