Skip to main content
Log in
P

PatMartin

@PatMartin·27 public vizzes

Loading thumbnail…

dex.js : Clustered Force

A clustered force-directed layout shows 2015 baseball salaries by team and position from a CSV file. Using the dex.js library, this visualization places each player as a node, grouping them by team while position serves as a secondary clustering attribute. The chart is interactive, with a legend that highlights nodes on mouseover, and users can adjust the visualization through a configuration pane built with dex.ui.ConfigurationPane. This example effectively combines data filters with GUI controls for exploring the salary dataset.

Aug 13, 2017
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.

Aug 13, 2017
Loading thumbnail…

dex.js : Clustered Force

This example uses dex.js and D3.js to display crime statistics as an interactive clustered force layout. The visualization groups nodes by crime type, using two custom forces—cluster and collide—to pull similar colors together while preventing overlapping. Data comes from crime2000.csv, interacting with forceSimulation to animate node positions. A separate legend highlights nodes on hover, while a configuration pane allows real-time adjustment of chart and legend settings.

Aug 11, 2017
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`.

Aug 7, 2017
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.

Aug 7, 2017
Loading thumbnail…

dex.js : Sankey Diagram

This example uses dex.js to render a Sankey diagram from a CSV of U.S. presidents, linking each presidency to its president, party, and home state. The code loads the data with `d3.csv`, then the `dex.charts.d3.Sankey` component visualizes the flow between categorical fields, with a configuration pane enabling interactive exploration of the chart’s options. The visualization relies on dex.js’s Bootstrap and jQuery UI integrations to manage layout and resizing.

Aug 7, 2017
Loading thumbnail…

Treemap

A treemap visualizes crime statistics from the crime2000.csv file, displaying a hierarchy of states, crime types, and specific offenses with rectangle sizes proportional to incident counts. The chart uses dex.js, specifically the `dex.charts.d3.Treemap` class, to render the hierarchical data with auto-sizing text and shaded partitions. It builds on Mike Bostock's treemap example, leveraging the d3.csv parser to load the data and render the visualization within the TreemapParent div.

Aug 7, 2017
Loading thumbnail…

dex.js : Clustered Force

The dex.js Sunburst visualization organizes U.S. presidential data by party and home state, using a radial hierarchical layout with colored arcs and labels. It loads `presidents.csv` via `d3.csv`, then processes the data with a `dex.csv` object and renders the chart through `dex.charts.d3.Sunburst`. The example includes an interactive configuration pane, built with `dex.ui.ConfigurationPane`, for adjusting chart settings. D3.js powers the underlying rendering, while jQuery UI and Bootstrap handle the page layout and styling. The visualization focuses on displaying categorical relationships, with label placement and dynamic sizing noted as areas for future improvement.

Aug 7, 2017
Loading thumbnail…

C3 Area Chart Example

This example renders a C3 bar chart of prescription drug spending data, comparing branded and generic drugs across metrics like total spending and per-user costs. The visualization uses the dex.js framework, which reads the DrugSpending.csv file via d3.csv and feeds it into the chart component. Interactive configuration is provided through a dex.ui.ConfigurationPane, allowing users to modify chart settings dynamically. The page layout is managed with jQuery UI’s layout system, and the chart resizes automatically to fit its container.

Aug 7, 2017
Loading thumbnail…

Features

This bump chart visualizes changes in GDP per capita rankings for countries and regions from 1980 to 2014, comparing entities like the European Union and the World. It uses dex.charts.d3.BumpChart with D3.js to render animated, hover-highlighted rank lines, while configurable parameters control line widths, circle sizes, colors, and margins. Data comes from the World Database, and the chart emphasizes relative rank shifts rather than absolute magnitudes.

Aug 7, 2017
Loading thumbnail…

C3 Area Chart Example

This example displays an interactive C3 area chart of 2015 Medicare Part D data for the ten most-claimed drugs, visualizing metrics such as claim counts, total spending, and user counts. The chart is rendered using the C3 library’s AreaChart component within a DEX.js framework, with drug spending data loaded via D3’s `d3.csv` function. A configuration pane built with `dex.ui.ConfigurationPane` allows users to filter the displayed data, though the interface remains partially unfinished. The layout is managed through jQuery UI layout plugin, and the chart resizes dynamically to fit its container.

Aug 7, 2017
Loading thumbnail…

Radar Chart

A radar chart visualizes quarterly sales data for two salesmen, comparing four metrics across Q1 through Q4 on a multi-axes spider plot. Built with dex.js, the chart uses the `dex.charts.d3.RadarChart` API, which renders CSV data into a polar coordinate layout. The example loads D3 libraries and jQuery components, then instantiates the radar chart against a DOM element, drawing each salesman as a distinct polygon overlay.

Aug 7, 2017
Loading thumbnail…

Line Chart

This example demonstrates a line chart generated using the dex.js library, which leverages the C3 charting library for rendering. The visualization plots four data series (A, B, C, and SAMPLE) across 30 data points, with values randomly generated between 1 and 100 using the `dex.datagen.randomIndexedMatrix` API. The chart is initialized via the `dex.charts.c3.LineChart` constructor, which accepts a `parent` element and a `csv` data object. The data is generated algorithmically, producing a randomized dataset for demonstration purposes.

Aug 7, 2017
Loading thumbnail…

Dendrogram

A dendrogram visualizes the hierarchical relationship among U.S. presidents, grouping them by party, then home state, and finally by presidency number. The example loads data from `presidents.csv` using D3’s `d3.csv` method and renders an interactive tree chart through the DEX library’s `dex.charts.d3.Dendrogram` component. The chart is embedded in a full-page `div` and styled with Bootstrap and jQuery UI, while the underlying D3 layout computes the branching structure.

Aug 7, 2017
Loading thumbnail…

Radial Tree

This radial tree visualization displays the sequence of U.S. presidents, branching by party affiliation and home state, using data from a CSV file. The chart, built with dex.js and D3 v4, renders a hierarchical layout with a color scale mapping parties to red, blue, green, and black. It uses `d3.csv` to load the data and `d3.scaleOrdinal` for the color scheme, though it is not interactive. The example adapts Mike Bostock’s radial tree technique for reusable presentation.

Aug 7, 2017
Loading thumbnail…

dex.js : Vis.js Network

This example shows a network visualization of U.S. presidents, where each president is a node connected to their party and home state, using data from the `presidents.csv` file. The dex.js library configures a chart via `dex.charts.vis.Network`, which leverages the Vis.js library for rendering. The interface includes a configuration pane for interactive adjustments. The network is built by including four columns of the CSV data, and the chart is responsive, resizing with the browser window.

Aug 7, 2017
Loading thumbnail…

Chord Diagram

This chord diagram visualizes the relationships between U.S. Presidents, their political parties, and home states, using data loaded from a CSV file. The code relies on the dex.js library’s `dex.charts.d3.Chord` component to render the diagram and includes an interactive `dex.ui.ConfigurationPane` for adjusting chart settings. The visualization uses D3.js internally, as dex.js builds on it, and the layout is managed with jQuery UI’s layout plugin to keep the chart and configuration panel responsive.

Aug 7, 2017
Loading thumbnail…

PC2Chord

This example links a parallel coordinates chart to a chord diagram to show relationships among US presidents’ party and home state. Selecting an axis on the parallel coordinates chart updates the chord diagram’s displayed connections via a `select` event and `setSelected` action. Both visualizations are built from a single CSV dataset using dex.js’s `dex.render` API, which constructs and wires the charts and their interaction declaratively through a JSON specification.

Aug 7, 2017
Loading thumbnail…

Stacked Bar Chart

This example shows a stacked bar chart created with dex.js and the C3 charting library, displaying 30 rows of randomized numeric data across five series (A through E). The chart renders inside an HTML page using the `dex.charts.c3.StackedBarChart` API, which binds to a `dex.csv` dataset generated by `dex.datagen.randomIndexedMatrix`. The visualization uses C3’s rendering engine, with styling and layout handled by Bootstrap, jQuery UI, and custom dex CSS, all loaded from CDNs.

Aug 7, 2017
Loading thumbnail…

Treemap Bar Chart

This example visualizes six years of crime statistics across U.S. states, using a treemap bar chart to compare counts for different offense types. The chart shows hierarchical data where each state’s total crime count is divided into rectangular sections representing specific crimes. Built with dex.js and D3.js, the visualization reads from a CSV file and renders as an interactive treemap-based bar composition. The code uses d3.csv to load data and the dex.charts.d3.TreemapBarChart component, with manual sizing and hover effects controlling opacity for emphasis.

Aug 7, 2017
Loading thumbnail…

Stacked Area Chart

This stacked area chart visualizes three synthetic data series (A, B, C) over 30 time steps, with each series’ value randomly generated between 1 and 100. The chart uses the dex.js library’s `dex.charts.c3.StackedAreaChart` component, which wraps the C3.js charting library built on D3. Rendering occurs by passing a CSV-like data structure created with `dex.csv` and `dex.datagen.randomIntegerMatrix`, then calling the `.render()` method on the configured chart instance.

Aug 7, 2017
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.

Aug 7, 2017
Loading thumbnail…

Parallel Coordinates

This example uses dex.js and D3 to create an interactive parallel coordinates chart of U.S. presidents, plotting categorical and ordinal variables such as presidency number, party, and home state along parallel axes. The `dex.charts.d3.ParallelCoordinates` component renders the lines, while a configuration pane built with `dex.ui.ConfigurationPane` exposes data filters and GUI options for narrowing the displayed presidents. The layout uses jQuery UI’s `layout` for resizable panels, and the labels on the outer axes may overflow into margins if not expanded.

Aug 7, 2017
Loading thumbnail…

Elegans 3D ScatterPlot

This interactive 3D scatterplot visualizes four series of randomly generated data points across X, Y, and Z coordinates, each series distinguished by a unique shape and color and toggled via the legend. The WebGL rendering relies on Three.js, while the chart configuration uses the dex.js library, specifically the `dex.charts.elegans.ScatterPlot` component with custom series definitions for shape and coordinate mapping. The plot supports mouse-wheel zoom, pan, and rotation with dampened inertia, but lacks tooltips and drop lines.

Aug 7, 2017
Loading thumbnail…

Chart Explorer

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.

Feb 25, 2017
Loading thumbnail…

Bounded Columns : Creating Reusable Charts

This example demonstrates how to transform a specific D3 force-directed graph into a reusable chart component through configurable parameters. It presents an energy flow network with nodes and links, where users can interactively adjust radius, gravity, and charge via sliders. The visualization uses d3.layout.force, d3.json for data loading, and SVG rendering. The chart accepts a parent selector, dimensions, color scheme, and force simulation settings as configuration options, making it adaptable to different datasets and styling needs.

Jan 29, 2017
Loading thumbnail…

White world map

A white world map displays landmasses in white against an empty background using a spherical orthographic projection. The visualization renders the globe by loading TopoJSON country data and applying it through the `d3.geo.path()` API, which projects geographic coordinates onto the screen. The code iterates through a variety of projection types, including mercator and stereographic, but selects the orthographic one with a scale of 143. This example focuses on the cartographic output rather than interactive features or data overlays.

Feb 27, 2013