Skip to main content
SimilarExport ZIP
100%

item explorer - demo

✓ Published0🌍 Public
EEE2dev
Last edited Nov 9, 2015
Created on Oct 14, 2015

This demo shows how the reusable **item explorer** chart type can be used to visualize binary item-by-customer data. It loads a CSV file containing 21 customers (rows) and 21 items (columns) and displays the co-occurrence of item purchases as an interactive matrix or explorer view. The data uses a custom encoded header format to define item metadata, including labels, colors, and dimensions. The visualization is rendered using D3.js and the itemExplorer library, with the chart appended to the page body. The example serves as a simple template for creating an item explorer chart with a single function call to `itemExplorerChart()`, which can be extended with options like data preprocessing or formatting.

AI-generated description

This is a demo to show how to use item explorer.

More examples

The main example is here.

Complete list of examples:

  1. Data formatting
  1. Including data
  1. Visualization options

Similar vizzes

Loading thumbnail…

item explorer - data source - example 1

This example demonstrates how to load and visualize a basic item-explorer chart by referencing an external CSV file. The visualization shows binary presence-absence patterns across four items for a large customer group, with each row representing a unique combination. The code uses the D3.js library (version 3.5.6) and the custom `itemExplorerChart` API, passing the filename `items_small.csv` directly to initialize the chart. After creating the chart instance, the `showChart` function appends a `div` element to the body and calls the chart, rendering the data-driven view. The CSV file supplies the raw data, making this a standard example of data inclusion via an external file reference.

EEE2dev
88% match
Loading thumbnail…

item explorer - data source - example 4

This example demonstrates how to display an item explorer visualization using data embedded directly within the HTML file. It shows a matrix of customer counts across combinations of four binary items, with the chart rendered using the itemExplorerChart function from the itemExplorer library. The embedded data is parsed with d3.csv.parse, then converted to numeric values via a custom convertToNumber function before being passed to the chart. This approach avoids the need for a web server, making it suitable for local file usage. The code relies on D3.js version 3.5.6 for data parsing and DOM manipulation.

EEE2dev
87% match
Loading thumbnail…

item explorer - data format - example 5

This example demonstrates the full column-feature support of the item-explorer chart, combining custom colors, display names, and item dimensions for a hierarchical basket analysis. The visualization loads a CSV file (`items_5cld.csv`) containing transaction data, where each row represents a customer order with binary item indicators. The chart is rendered using D3.js version 3.5.6 and the custom `itemExplorerChart` function, which is instantiated with a file reference and then called via `d3.select("body").append("div").call(myIEChart)`. The data includes multiple item categories (beverages, food, other) and payment methods, with custom RGB colors and labels defined in the CSV’s column headers, illustrating how the tool parses these metadata attributes for display.

EEE2dev
87% match
Loading thumbnail…

item explorer - data format - example 1

This example demonstrates the basic CSV data format required by the item-explorer visualization library, using a small dataset of customer segments and their product category preferences. The visualization renders a dot-matrix chart where rows represent customer groups and columns represent product categories, with filled cells indicating a purchase. The code loads the CSV file `items_5.csv` via D3.js, then initializes an `itemExplorerChart` instance and appends it to the body. The example relies on the custom `itemExplorer_10.min.js` library and D3.js 3.5.6, highlighting how the simplest data structure maps directly to the chart’s default rendering without additional configuration.

EEE2dev
86% match
Loading thumbnail…

item explorer - data source - example 3

This example demonstrates how to preprocess a CSV file before passing it to the item explorer chart, converting all values from strings to numbers using a custom `convertToNumber` function. The chart visualizes customer counts across four binary item columns, showing patterns of co-occurrence. The code uses D3.js version 3.5.6 for CSV loading and parsing via `d3.csv`, while the `itemExplorerChart` from the external itemExplorer library handles rendering. Data is loaded from `items_small.csv` with 100,000 customers per row, and the preprocessing ensures numeric formatting before the visualization is appended to the body.

EEE2dev
84% match
Loading thumbnail…

item explorer - data format - example 3

This example demonstrates how to display item explorer charts with abbreviated item names and full descriptive long names shown in tooltips, using a CSV data file with 18 items and five customer segments. The visualization uses the itemExplorerChart function from the EE2dev item explorer library, which relies on D3.js v3.5.6. Data is loaded from the external file items_5l.csv, where each column header combines a short name, a long name prefixed with "LN=", and the chart is rendered by calling the chart function inside a d3.select("body").append("div") chain. The code specifically uses the d3.csv-like loading and the .call() method to bind the chart to a div, with no additional JavaScript libraries beyond D3.

EEE2dev
84% match
Loading thumbnail…

item explorer - data source - example 2

This example demonstrates how to embed data directly within an HTML file for use with the item explorer visualization, eliminating the need for a web server. The embedded dataset, formatted as comma-separated values, describes customer counts for combinations of four binary items. The visualization is rendered using the D3.js library (version 3.5.6) and the custom `itemExplorerChart()` function, which is initialized and then appended to the body via a chained `.call()` method. This approach is suitable for offline or static-file scenarios where external data files are unavailable.

EEE2dev
83% match
Loading thumbnail…

item explorer - data format - example 2

This example demonstrates how to color-code items in the item explorer visualization, using colors to group related items into categories. The chart loads data from a CSV file (`items_5c.csv`) and renders an interactive explorer where each item’s color indicates its category, such as blue for customers, orange for food items, and green for other products. The visualization uses the D3.js library (version 3.5.6) to create the chart, relying on the custom `itemExplorerChart` function from the itemExplorer library. Colors are specified directly in the CSV column headers using an RGB format, and the data is passed to the chart after being loaded from the file.

EEE2dev
83% match