item explorer - visualization option 1

100%

item explorer - visualization option 1

✓ Published0🌍 Public

Last edited Nov 6, 2015

Created on Oct 14, 2015

This example demonstrates how to customize the item explorer chart’s number formatting by setting a period as the thousands separator and using SI-prefix notation for tick labels. The chart, rendered via the `itemExplorerChart` function from the itemExplorer library, loads CSV data from a remote gist source and displays it in a D3.js-based visualization. The code explicitly calls `.thousandsSeparator(".")` and `.tickFormat("s")` to alter the axis and percentage displays, while the `showChart` function appends the chart to the body. The underlying data remains unchanged, showing only formatting variations.

AI-generated description

An example of the visualization options for item explorer. Each visualization option is a function which returns the itemExplorerChart object, thus it allows method chaining.

In this example, the thousands separator is set to ".", and the tick format is set to "s". The thousands separator "." causes the decimal separator (of the percentages in the info and exploration panels) to be ",". The tick format "s" refers to the SI-prefix format type.

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 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

76% 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

76% 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

76% 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

75% 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

75% 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

74% 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

74% 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

74% match