html templates

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

Written by admin
  • Help users visualize and understand numeric data in an engaging
    and fun way
  • Help users see patterns, relationships and outliers in the
  • 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 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
  • 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

38 Configuration Options (* only the first 5 are

  • 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

Version History

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

Price: 0.00 USD
Preview: Theme Preview

About the author


Download Premium Magento Themes Free | download premium wordpress themes free | giay nam dep | giay luoi nam | giay nam cong so | giay cao got nu | giay the thao nu