Code

Data Storyteller: Responsive SVG Bubble Chart Visualization (D3js & jQuery)

Data Storyteller: Responsive SVG Bubble Chart Visualization (D3js & jQuery)

  • Help users visualize and understand numeric data in an engaging and fun way
  • Help users see patterns, relationships and outliers in the data
  • Apply to any numeric dataset (company data, scientific data, sports data, etc.)
  • Assign data columns in your CSV file to X and Y axes
  • Crisp, high resolution SVG
  • Responsive or fixed dimensions
  • Quickly locate slices of data in the visualization using filters
  • Filters are automatically created from the CSV data file
  • Animated transitions – when the user changes the X or Y axis, the data bubbles animate/transition in the visualization
  • Tooltips – there are default tooltips, but you can optionally create an HTML template that pulls in the underlying data
  • Callbacks – optionally add your own code to take action when the user clicks a bubble or selects a filter (with full access to the data associated with those bubbles from the underlying CSV file)
  • Create multiple data visualizations on the same HTML page
  • 6 examples included. Modify/add configuration options … then copy/paste into your HTML page.
  • Easy to use … no programming
Data Storyteller: responsive SVG bubble chart visualization (D3js & jQuery) - 1

38 Configuration Options (* only the first 5 are required)
  • ID location where visualization will be created *
  • Path to CSV data file *
  • Initial Y axis field *
  • Initial X axis field *
  • Specify numeric fields in data file *
  • Title
  • Subtitle
  • Width
  • Height
  • Responsive
  • Bubble color
  • Bubble opacity
  • Bubble selected color
  • Bubble selected opacity
  • Bubble hover color
  • Bubble hover border
  • Axis color
  • Bubble radius
  • Minimum bubble size
  • Maximum bubble size
  • Filters (created automatically from the data file)
  • X-axes (user can switch data displayed on the X-axis)
  • Y-axes (user can switch data displayed on the Y-axis)
  • Reverse axis direction
  • Background color
  • Background image
  • Background image position
  • Padding
  • Transition duration
  • Initial data spray direction
  • Initial data spray Y offset
  • Initial data spray X offset
  • Bubble click callback function
  • Bubble filter callback function
  • Axis formatting
  • HTML tooltip template
  • Tooltip offset X position
  • Tooltip offset Y position
3 Steps:
  1. Prepare your CSV data file
  2. Specify configuration options (use one of 6 examples as a starting point)
  3. Copy/paste setup and widget configuration lines into your HTML page

Examples website

Version History
v1.0 (02/24/2019) – Initial release

by
by
by
by
by
by