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 is available as a Windows 10 app, and as an add-in in Microsoft Excel and PowerPoint (2013 or later). ExploreTheData also runs natively in all modern browsers.
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, or CSV), 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.
Some features are not available in all platforms. The labels of unsupported items are dimmed, e.g., 1. Also see "Compatibility issues." |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Getting startedImport and exportStyling charts and tables NEWChart axis titles and scalesSettingsSearching and filtering dataGraphical view of the columns with numerical dataZooming and zoom-dependent renderingCustomizing with a script NEWExamplesCompatibility issuesDownload |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Getting started
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Import and export
Table. Methods for importing data and configuration scripts.
The filename extension of the JavaScript files must be .js.
|
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 NEWStyle 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).
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Chart axis titles and scales
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Settings
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Searching and filtering data
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Graphical view of the columns with numerical data
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zooming and zoom-dependent rendering
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 NEWA 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 plotPlots 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 barsIn 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 domainIn 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 iframeHere 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 issuesImport 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. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
DownloadYou may download ExploreTheData as a ZIP file for accessing from a web server or a local folder. |