item explorer - data format - example 4 — VizHub

SimilarExport ZIP

100%

item explorer - data format - example 4

✓ Published0🌍 Public

Last edited Nov 6, 2015

Created on Oct 12, 2015

This example demonstrates how the item explorer visualization assigns different dimensions to items, separating purchases by item type and by payment method. The data is loaded from the CSV file `items_5d.csv`, and each dimension produces its own chart with a distinct x-axis label. The code uses the D3.js library, specifically the `itemExplorerChart` function, to render the visualization, with the chart appended to the body via `d3.select`. The CSV format encodes dimensions using the `:DI=` suffix, as shown in the header. Sorting is applied per dimension, and the example highlights how multiple dimensions can be visualized simultaneously.

AI-generated description

An example of the required format for item explorer. This example shows how to use dimensions. Introducing different dimensions for the items typically means that each dimension is refering to something different. In this example dimensions distinguish between items (bought) and payment method. Using dimensions has two effects:

for each dimension the corresponding items are shown in a separate chart with the dimension label for the x axis
when sorting is applied each dimension is sorted separately

More examples

The main example is here.

Complete list of examples:

Data formatting

Including data

Visualization options

changing the thousands separator and the tick format

Similar vizzes

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.

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.

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.

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.

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.

Loading thumbnail…

item explorer - demo

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.

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.

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.