Skip to main content
SimilarExport ZIP
100%

item explorer - data source - example 4

✓ Published0🌍 Public
EEE2dev
Last edited Nov 6, 2015
Created on Oct 5, 2015

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.

AI-generated description

An example how to use item explorer with data embedded in the html file which needs to be processed before it passed on to item explorer. The resulting data is assumed to be in the required format. Note that data within html must not contain empty lines, leading spaces or tabs.

This approach can be used when no web server is available.

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 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
93% match
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
89% match
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.

EEE2dev
87% 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
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
85% 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
85% 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
83% match
Loading thumbnail…

item explorer - data format - example 4

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.

EEE2dev
83% match