Skip to main content
SimilarExport ZIP
100%

Chart Explorer

✓ Published0🌍 Public
PPatMartin
Last edited Feb 25, 2017
Created on Feb 25, 2017

Chart Explorer is a drag-and-drop dashboard that lets users assemble a custom visualization workspace from available data series and chart types. It shows how the same underlying data can be explored through multiple coordinated views. Users drag two or more series onto a target area and can reorder them, while charts are added, resized, and rearranged on a gridster.js canvas. The application uses dragula for series and chart manipulation, and Gridster.js for grid-based layout. Charts are dynamically loaded from a JSON specification, including examples built with C3.js and D3.js, such as a linked parallel coordinates and chord diagram combination.

AI-generated description

Chart Explorer

This is a simple dashboard which allows the user to drag and drop series and charts onto the palette and visualize the data in a number of different ways.

  • Drag 2 or more series onto the series drag target at the very top.
  • Drag charts onto the chart drag target.

Series can be reordered via drag and drop. To remove a selected series, simply drag it to somewhere outside of the series drag area.

Charts may also be ordered, reordered, resized, added and deleted.

I am working through a number of minor bugs, but its good enough to demo.

Also noteworthy, charts are plugged in via json specifications and defined in an external json file called charts.json.

Credits

I'd like to give a shout out to a couple of authors who have made some excellent drag and drop plugins.

  • Nicolas Bevacqua - Author of Dragula. If you are in need of an intuitive drag and drop implementation, this one is awesome!
  • David S Morse - Author/maintainer of gridster.js which is a super slick drag and drop grid implementation. Dragula and Gridster work together to make this demo possible.

References

mit Licensed

Similar vizzes

Loading thumbnail…

LayoutChart

This example demonstrates a dashboard combining multiple interactive visualizations in a single resizable, draggable view using the `DockPanel` layout. It shows bar, pie, line, and hex bin charts alongside a layered map and a data table. The map layers several choropleth and thematic overlays—including countries, states, counties, GeoHash cells, a graticule, and a heat layer—using the `@hpcc-js/map` library. The code leverages APIs such as `ChoroplethCountries`, `GeoHash`, and `Layered`, with sample data derived from exam results and geographic counts.

GGordonSmith
70% match
Loading thumbnail…

sequence explorer - single chart

The sequence explorer example visualizes user navigation flows as a Sankey-style diagram, mapping event sequences from a CSV file where each row records a transition between steps (e.g., "home" to "product"). It shows the aggregated volume of paths, with the y-axis ordered by event type and the x-axis representing sequence position. The chart is built using D3 v4 and the custom `sequenceExplorer.chart` API, which loads the data from `sc.csv` and applies configuration methods like `.eventOrder()` to reorder categories and `.sequenceName()` to customize tooltip labels. Rendering relies on D3’s selection and data-join mechanics, with the chart appended to a div via `.call(myChart)`. The data originates from Kerry Rodden’s sunburst example, highlighting comparative strengths of sequential flow vs. hierarchical layouts.

EEE2dev
69% match
Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr
68% match
Loading thumbnail…

Prototyping Charts

This example demonstrates how to prototype column charts using the SVGChrt library, which extends standard SVG rendering with dynamic chart-building methods. The chart uses D3.js scales and axes (such as d3.scaleBand, d3.scaleLinear, and d3.axisBottom) to map data to visual elements. The code defines a custom SVGChrtColumn class that computes axis domains from the dataset, supports linear, power, and logarithmic scales, and handles configurable positioning of axes on all four sides. The visualization is rendered with user-supplied data through a simple HTML container and bundled JavaScript.

GGavin Sykes
68% match
Loading thumbnail…

Charts, Charts, Charts

This visualization displays four distinct chart types side by side: a doughnut chart, bar chart, radar chart, and pie chart. Each chart presents a different dataset, such as airline passenger numbers, player skill ratings, and EU population figures. The code uses Chart.js 2.8.0 for rendering all charts onto canvas elements, while D3.js v7 handles loading CSV data from a GitHub gist. The bar chart and pie chart use hardcoded arrays, but the doughnut chart demonstrates fetching and parsing external CSV data.

Ddevvansh1997
68% match
Loading thumbnail…

Line Chart

This example demonstrates two identical line charts generated side by side, each plotting two data series with different value sets. The charts are rendered using the C3.js library, which builds upon D3.js to create the visualizations. The page layout uses a CSS Grid structure to position a header, menu, content area, and footer, with one chart embedded within a quadrant of the content grid and the second placed below the main container. The code initializes each chart by calling `c3.generate()`, binding to distinct HTML elements and supplying the same two-column dataset for both, showing how the same chart configuration can be reused in different page locations.

GGerardoFurtado
68% match
Loading thumbnail…

Chiasm Charts Example

The Chiasm Charts example presents a grid of multiple coordinated visualizations—bar chart, scatter plots, box plot, heatmaps, and a line chart—arranged in a vertical layout. Built with the Chiasm framework, it links data loaders and chart components via declarative JSON state. Using d3-scale for axes and d3-time for temporal binning, it renders interactive SVG animations from CSV datasets like the Iris flower measurements and a time-series of temperatures.

CCurran Kelleher
68% match
Loading thumbnail…

Sequence explorer - single chart (with JSON file)

This example demonstrates a single-chart sequence explorer visualization built with D3 v4, loaded from an external JSON file. The chart visualizes sequential event flows, with events ordered along the y-axis using the `eventOrder` method (home, product, search, account, other) and the x-axis labeled as "visit" via the `sequenceName` setting. The JSON data defines a directed graph of transitions between events, with values representing the volume of each step. The visualization is instantiated by calling `sequenceExplorer.chart("sequence1.json")` and rendered into a div in the body. This approach highlights the sequence explorer's ability to depict multi-step event pathways, similar to a sunburst but in a linear, flow-based layout, making it easy to compare pros and cons against alternative visualization methods for the same dataset. The data is derived from Kerry Rodden's sunburst example, and the chart is configured to reorder event categories on the y-axis and customize tooltip labels. The single chart version keeps all event sequences in one view, useful for tracking navigation flows or funnel analysis.This example demonstrates how to create a **single-chart sequence explorer** using D3 v4 and data loaded from an external JSON file. The chart visualizes sequential categorical data—here, sequences of website events such as "home", "product", "search", and "account"—as a Sankey-style flow diagram. Each row represents a step in the sequence, and the width of the links corresponds to the number of visits, making it easy to identify common paths and drop-off points. The code shows how to initialize the chart with a JSON file, customize the event order on the y-axis, and rename the x-axis for tooltips. The data is derived from Kerry Rodden’s sunburst example, allowing for a direct comparison between the two visualization approaches for the same dataset.

EEE2dev
67% match