Email

ExploreTheData enables you to visualize and explore your data with interactive, cross-linked charts and tables. To create a chart with automatic settings, simply select a data file and the variables to be plotted. The web app provides you different views and helps you gain useful insights about the data and create high-quality plots. It is powered by a library of Scalable Vector Graphics (SVG) components which smoothly displays large datasets. ExploreTheData runs natively in all modern browsers and as an add-in in Microsoft Excel and PowerPoint 2013 or later.

The chart can display line plots, scatter plots, and area plots with linear or logarithmic scales. Zoom-dependent rendering provides fast access to single data points of the data set. The table provides conventional functionality, such as sorting and selecting rows, reordering, resizing and switching columns, and data searching and filtering. In addition, ExploreTheData presents a zoomable graphical view of numerical data. Table column data operations (e.g., sum, mean, minimum, and maximum) are selectable from a menu, and the list of operations is extensible. The web app can handle large tables because all views are pre-calculated before rendering. The chart and table are cross-linked, meaning that the data corresponding to the selected table rows are highlighted on the chart and vice versa. In addition, filtering the data in the table updates the chart accordingly.

Data import and export is performed using text files (comma-separated values), JavaScript data files, or a range of cells selected in a worksheet open in Excel. ExploreTheData makes its own copy of the data without data binding between the source worksheet and the add-in. The chart can be exported as an SVG file.

ExploreTheData is customizable by users in two ways: style files and JavaScript configuration files. The latter enables listing multiple data and style files which are then easily accessible from the drop-down menus.

Getting started

Import and export

Styling charts and tables NEW

Chart axis titles and scales

Settings

Searching and filtering data

Graphical view of the columns with numerical data

Zooming and zoom-dependent rendering

Customizing with a script NEW

Examples

Compatibility issues

Download

Microsoft AppSource

Some features are not available in all platforms. The labels of unsupported items are dimmed, e.g., 1. Also see "Compatibility issues."








 

Getting started

To view a table and a chart:
1 Click on "Import and Export," and select an example data set, e.g., "Country Indicators."
2 Select a numerical variable for the x-axis, e.g., "GDP per capita (US$)."
3 Select a numerical variable for the y-axis, e.g., "Life expectancy at birth, male (years)."
 
4 Observe any informational and error messages, e.g., "139 of 1188 rows" after filtering the table rows.
5 Drag to change layout; click to restore previous layout.
6 Sort the rows by clicking on the header text.
7 Change the order of columns by dragging a header cell to a new location. Above the header text, the cursor changes to "Move." Start dragging to the left or to the right. An arrow and a label indicate the new location of the column. When you stop dragging, the column is moved to the new location.
8 Show or hide columns.
9 NEW Select a row operation, e.g., "Sum" or "Mean." The result of the operation for each column is displayed on the right. The row operations are customizable; see "Customizing with a script" below. The built-in operation "Selection" means that the last selected row is displayed. Click on it to display the same row in the main part of the table.
10 In text mode, you can see the full content of the cell at the mouse location on the infobar. In graphical view mode, the minimum and maximum values of a group of numerical data are displayed.
11 You can view the results of a row operation.
12 Select the y-axis for the plot (y1, y2, or y3). The y1-axis is displayed on the left side of the chart, while the y2-axis and y3-axis are shown on the right side of the chart.
13 Display data symbols, lines, and/or areas.
14 Select a logarithmic scale for the x and/or y-axis. With the logarithmic y-scale, multi-scale (y1, y2, y3) mode is not supported.
15 Show minor gridlines and tickmarks.
16 Set padding for the plot area.
17 NEW Select three plots (1-3, 4-6, 7-9, 10-12, or 13-15). The plot-specific user interface (UI) controls are shown. The plot-specific UI controls are: (i) three drop-down lists for selecting y-axis (12), (ii) three drop-down lists for selecting a numerical variable for the y-axis (3), and (iii) three groups of checkboxes for selecting data symbols, lines, and/or areas (13).
18 Hide the UI controls.
19 The chart legend.
 

Import and export

1 Select data (a range of cells) in Excel, the host application.
2 Read selected data from the Excel worksheet.
3 Specify whether or not the dataset to be imported has a header row.
4 Write data to the worksheet. The rows and columns are exported in the same order as they are currently displayed in the table. Hidden columns (switched off with the checkboxes on the left) are not exported. There must be a sufficient number of empty cells in the worksheet, and the upper left cell must be selected.
5 NEW Check to write all rows available in the entire data table, regardless of filtering.
6 Import data from a CSV file (example) or a JavaScript data file (examples 1 and 2) by using the drag and drop method.
7 Select example data, or select data files specified in the configuration JavaScript.
8 NEW Import a configuration script.
9 Import a data table by selecting a CSV file (example) or a JavaScript data file (examples 1 and 2).
10 Check the box if the data to be imported has a header row.
11 Export a data table to a CSV file. Hidden columns are not exported. The comma (,) is used as the separator. If a cell string contains the separator, then the string is surrounded by double-quotes (e.g., "Distance, km").
12 NEW Check the box to export all rows available in the entire data table, regardless of filtering.
13 NEW Check the box to export the data with additional information about the chart and table (e.g., variables selected for the plots, styling). By importing the file with this option, the original chart and table are restored.
14 Export the chart.
15 Save the exported chart as an SVG file (as in the example).
16 NEW Open the exported chart as an SVG file.
17 NEW Save the exported chart as a PNG file.
Import method Data from Excel worksheet Data file Configuration script (example)
CSV file (example) JavaScript file, data as a vector (example) JavaScript file, data as a string (example)
2 "Read Data" button +
6 Drag and drop + + + +
4 "Import Data" button + + +
7 Drop-down menu for data (files listed in the configuration script) 1 + + +
8 "Import Configuration" button +
URL of a configuration script as a query string parameter in the web browser 1,2 +

Table. Methods for importing data and configuration scripts. The filename extension of the JavaScript files must be .js.
1 These import methods are subject to the restrictions imposed by browsers, such as the same-origin policy for domain isolation and security zones.
2 Example URL query string with the URL of a configuration script: https://explorethedata.com/app/index.html?etd-config=https://my-domain/config-script.js (Example 5).

The "Import and Export" section in the Excel add-in.

The "Import and Export" section in the PowerPoint add-in.

The "Import and Export" section in the web browser.

 

Styling charts and tables NEW

Style of the charts and tables can be changed using a special HTML file. There are three tables in the example file: "Style items for the chart," "Style items for the table," and "Other style items." In the tables, the column "Style item" lists various elements of the charts and tables, the column "Possible values" shows acceptable input, and the column "Selected ID or value" shows the selected value.

In most cases, the style is defined in the format id = "idSVGElement", which is a reference to an SVG graphics element displayed on the left. For example, in the section "Plot 1" of the table for chart style items, the selection for "Line" is id = "plotLineA". On the left, an SVG path element with this id is displayed. Once the style file is imported, the characteristics of the SVG graphics element, such as color (the SVG attribute stroke) and thickness (stroke-width), are applied to the plot. Editing the style file in a text editor requires some knowledge of the HTML and SVG syntax. Instructions are in the example file. The plot numbers in the file correspond to these in the UI (17 in the "Getting started" section).

1 Select a style from the list. The list includes (i) items specified in the configuration script and (ii) previously imported style files (stored in the HTML local storage).
2 Import style by selecting the file.
3 Import a style file by using the drag and drop method.
 

Chart axis titles and scales

1 If "Default" is checked, the axis title in the box is automatically updated.
2 The "Title" column specifies the axis title as it appears on the chart.
3 The scale items (e.g., "0, 50, 100, 150, 200") specify the range of and values that will be shown on each axis. Leaving this blank indicates an automatic scale.
 

Settings

1 Turn the graphical view of the table on or off.
2 Limit the number of table columns in which text is rendered while scrolling to make scrolling faster. Once scrolling ends, all columns are rendered.
3 Limit the maximum number of data symbols individually rendered on each plot. The responsiveness of the chart may deteriorate if the selected maximum number is too high. More details may be found in "Zooming and zoom-dependent rendering" section.
4 Limit the maximum number of items in the infotip. The infotip shows the values of variables closest to the mouse location.
5 NEW Enable changing the z-order of plots by clicking in the chart. The plot at the mouse location is moved to the front.
 

Searching and filtering data

1 Press Enter or click the search icon to search the table.
2 In the search field, enter or paste a search string, RegEx, or JavaScript formula. Non-matching rows are removed from the table view, and the chart is updated accordingly. If there are no matches, all rows are displayed. RegEx example: two\b (matches "two" at the end of a word). JavaScript example: y=(x>250) (matches numbers greater than 250). Here x stands for the cell content, and y is a variable defined with the search formula. If y is evaluated as true, the table cell matches.
3 Check the box to specify a case-sensitive search. This option applies to string search and RegEx search.
4 Check the box for whole word search. This option only applies to string search.
5 Select the search mode: String, RegEx, or JavaScript.
6 Select the column to search. The column names are listed, along with the option "All columns." Invisible columns (switched off with the checkboxes on the left) and the column "Row No" are excluded in a search of "All columns."
7 Rows with highlighted matches.
8 To edit the contents of a cell, double-click on the cell, edit the value in the text box, and press Enter.
 

Graphical view of the columns with numerical data

1 Use the "Graphical view of the table" drop-down menu (in the folder "Settings") to switch to the graphical view. Numerical data are plotted against the line number running from top to bottom. The data are sortable.
2 Use the mouse's scroll wheel to zoom. In addition, there is a button in the lower right corner for zooming and resetting the zoom.
 

Zooming and zoom-dependent rendering

The chart supports scroll wheel zooming and zooming by dragging.
1 Zoom in by dragging a rectangle in the chart.
2 If the rectangle does not cover any data points, the zoom is reset.

With large datasets composed of thousands of data points, poor responsiveness of the charts is a potential problem. Zoom-dependent rendering improves the responsiveness significantly. In the charts, the regions where data points overlap or are relatively close to each other are filled without rendering each symbol separately. The darker such a region is, the more data points it contains. Zoom in to see more data symbols in a specific region of the chart. Zoom-dependent rendering is controlled by selecting the maximum number of data symbols per plot (3 in "Settings") and by using the plot style item "Unresolved data."

Zoom-dependent rendering is also used in the graphical view of the tables.

 

Customizing with a script NEW

A JavaScript configuration script can be applied for changing: (a) the data sets selectable from the drop-down menu (in the folder "Import and Export"), (b) the style files selectable from the drop-down menu (in the folder "Style"), (c) table operations (e.g., sum and mean) and their implementation, and (d) a few additional settings.

By default, this script is used as the configuration script. Download the script, and change it according to the instructions in the file. Then select the script by clicking on the "Import Configuration" button (8 in the "Import and export" section) and selecting the file, or by dragging and dropping the file into the web app. (The filename extension must be .js.) In a web browser, the script URL may be added to the URL of the web app, e.g., https://explorethedata.com/app/index.html?etd-config=https://my-domain/config-script.js.


 

Examples

Example 1: Line plot

Example 2: Scatter plot

Plots 1 and 7 correspond to the dark red data symbols and the line of best fit, while plots 2 and 8 correspond to the dark blue data symbols and the line.

Example 3: Line plot with error bars

In the style file, "Error bar" is defined for the plots 10 and 13. If plot 10 and plots 11 and 12 (always two plots following the one with the error bars defined) are selected in the UI, the data symbols of the three plots are connected with the error bars that indicate the mean, minimum, and maximum values. The same applies to plots 13, 14, and 15.

Example 4: Example with a large data set (provided by MaxMind)

This example, created in Google Chrome, contains the latitude and longitude of more than 444,000 geographical locations.

 

Example 5: Configuration and data files loaded from another domain

In this example, the web app is loaded with a configuration file specified in the URL. The configuration file lists the data and style files that are used. The data and style files, and the configuration file itself are downloaded from another domain (excel.explorethedata.com).



Example 6: The web app within iframe

Here the web app runs within the HTML iframe. The configuration file is specified in the src attribute of the iframe (src='https://explorethedata.com/app/index.html?etd-config=https://chartthedata.com/etd-examples/config/etd-config-02-ul.js'). In the file, the initial layout is defined by setting layoutLeft=0 and layoutTop=0. As a result, the chart is visible and the table is hidden. Otherwise the example is similar to the previous one.

Example 7
 

Compatibility issues

Import via drag and drop is not supported in all browsers and operating systems.

Safari: Instead of saving to a file, the browser may display the contents of the exported CSV or SVG file. The file should be saved using the "Save As" command or by copying its contents into a text editor. A CSV file should be saved to a file with the extension .csv or .txt. An SVG file should be saved to a file with the extension .svg. In older versions of Safari, the "Block pop-up windows" check box (in the Security tab of Safari Preferences) should be cleared for the export.

Safari version 6: Data import with the "Import Data" button, script import with the "Import Script" button, and data and configuration script import via drag and drop are not supported.

 

Download

You may download ExploreTheData as a ZIP file for accessing from a web server or a local folder.