TimeWidget

A tool that summarizes and explores temporal data sets with quantitative values

Group Selection Detailed View
Moving Patterns Reference Lines

Try it!

You can test TimeWidget right now with your own CSV data (less than 200MB), in TimeWidget: Test your own data

Or you can test it with the KMC weights data, in TimeWidget: KMC weights

Install

npm install time-widget

Requires ^popper.js@2.11.6, ^d3@7.8.2 and ^htl@0.3.1.


        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
<!-- target for the main Widget -->
<h1>Stock Prices</h1>
<div id="target"></div>

<!-- Load the libraries -->
<!-- <script src="../dist/TimeWidget.js"></script> -->
<script src="https://d3js.org/d3.v7.js"></script>
<script src="https://unpkg.com/time-widget/dist/TimeWidget.min.js"></script>

<script>
    let data = [
        { Date: new Date("01/01/2023"), Open: 250, id: "Apple", group: "Technology" },
        { Date: new Date("01/02/2023"), Open: 240, id: "Apple", group: "Technology" },
        { Date: new Date("01/03/2023"), Open: 260, id: "Apple", group: "Technology" },
    ];

    let ts = TimeWidget(
        data,
        {
            x: "Date", // Attribute to show in the X axis (Note that it also supports functions)
            y: "Open", // Attribute to show in the Y axis (Note that it also supports functions)
            id: "stock", // Attribute to group the input data (Note that it also supports functions)
        }
    );

    ts.addEventListener("input", () => {
        console.log("Selected", ts.value);
    });

    document.getElementById("target").appendChild(ts);
</script>
</body>
</html>

Step by step

  1. HTML. Start with this template 
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- Your overview widget goes here -->
  <div id="target"></div>
  <!-- tYour detailed widget goes here -->
  <div id="targetDetailed"></div>
</body>
</html>
  2. Import TimeWidget. Create and import a new JavaScript file below the scripts (d3, and TimeWidget) or right in the html like in the example below. 
    
<script src="https://d3js.org/d3.v7.js"></script>
<script src="https://unpkg.com/time-widget/dist/TimeWidget.min.js"></script>
<script type="text/javascript">
  //   YOUR_JS_CODE_HERE
</script>

  3. Create a TimeWidget Instance

    
let data = [
    { Date: "01/01/2023", Open: 250, id: "Apple", group: "Technology" },
    { Date: "01/02/2023", Open: 240, id: "Apple", group: "Technology" },
    { Date: "01/03/2023", Open: 260, id: "Apple", group: "Technology" },
  ];

   let target = TimeWidget(data, {
      x: "Date", // Atribute to show in the X axis (Note that it also supports functions)
      y:  "Open", // Atribute to show in the Y axis (Note that it also supports functions)
      id: "stock", // Atribute to group the input data (Note that it also supports functions)
      color: "Group", // (Optional) Attribute to color by
   });

  target.addEventListener("input", () => {console.log("Selected", target.value.selectedIds)})
  4. [Optional] Configure TimeWidget render <

    You have two options: add them at initialization:

    
let target = TimeWidget(data, {
x: "Date", // Atribute to show in the X axis (Note that it also supports functions)
y:  "Open", // Atribute to show in the Y axis (Note that it also supports functions)
id: "stock", // Atribute to group the input data (Note that it also supports functions)
color: "Group", // (Optional) Attribute to color by

xPartitions: , // Partitions performed on the X-axis for the collision acceleration algorithm.
yPartitions: 10, // Partitions performed on the Y-axis for the collision acceleration algorithm.
defaultAlpha: 0.8, // Default transparency (when no selection is active) of drawn lines
selectedAlpha: 1, // Transparency of selected lines
noSelectedAlpha: 0.4, // Transparency of unselected lines
backgroundColor: "#ffffff"
            });

    Or as a subsequent step after initialization

    
// Default Parameters
target.ts.xPartitions = 10; // Partitions performed on the X-axis for the collision acceleration algorithm.
target.ts.yPartitions = 10; // Partitions performed on the Y-axis for the collision acceleration algorithm.
target.ts.defaultAlpha = 0.8; // Default transparency (when no selection is active) of drawn lines
target.ts.selectedAlpha = 1; // Transparency of selected lines
target.ts.noSelectedAlpha = 0.4; // Transparency of unselected lines
target.ts.backgroundColor = "#ffffff";
  5. **[Optional] Add the references lines 
    
target.ts.addReferenceCurves(myReferenceCurves)
    For the definition of the reference lines, see the custom formats section

Options

This section will show all possible options grouped by categories.

Elements

Data

Color Configuration

size Configuration

CallBacks

Rendering

Performance

Options

Custom Formats

This section details the different formats used by the application for some parameters. Note that the fields marked as optional are not mandatory and if not provided a default value will be used.

Reference lines

[
  {
    "name": "Line1",
    "color": "yellow", // Color in css format
    "opacity": 1, // opacity level of the line
    "data": [[p1x,p1y],[p2x,p2y],...]
  },
  {
    "name": "Line2",
    "color": "red", // Color in css format
    "opacity": 0.5, // opacity level of the line
    "data": [[p1x,p1y],[p2x,p2y],...]
  }
]

Filters


 filters: [
    {
        name: "Group 1",
        IsEnable: true, /*Optional*/
        isActive: false, /*Optional*/
        brushes: [
            {
                selectionDomain: [
                  [1.5,-7], /*[x0,y0]*/
                  [2.5, -17] /*[x1,y1]*/
                ],
                mode: "intersect", /* or "contains". Optional*/
                aggregation: "and", /* or "or". Optional */
            }
        ]
    },
    {
        Another BrushGroup
    }
]

Source Code

The widget code is available here

To compile the code you should follow the instructions:

Go to the package download location

cd /{{Route]]/timewidget

Install the project

npm install

At this point you should have the project compiled in the folder dist, with the files

License

TimeWidget.js is licensed under the MIT license. (http://opensource.org/licenses/MIT)e

Why this page?

This page has been created to maintain anonymity in the process of submitting a short-paper to ieeevis. This documentation is also available in the code repository on github (which we do not link to maintain anonymity) and on the NPM page.