(365);
- const now = new Date();
- const baseIndex = new EpiDate(now.getFullYear(), now.getMonth() + 1, now.getDate()).getIndex() - 182;
- for (let i = 0; i < data.length; i++) {
- const x = 6 - (12 * i) / (data.length - 1);
- const xp = x * Math.PI;
- const v = x === 0 ? 1 : Math.sin(xp) / xp;
- data[i] = new EpiPoint(EpiDate.fromIndex(baseIndex + i), v);
- }
- const ds = new DataSet(data, 'EpiVis Sample');
-
- //sampleDataset.lineWidth = 5;
- //sampleDataset.color = '#dd3311';
- return ds;
-})();
-
export class DataGroup {
public parent?: DataGroup;
@@ -134,7 +116,7 @@ export class DataGroup {
}
}
-export const DEFAULT_GROUP: DataGroup = new DataGroup('All Datasets', [SAMPLE_DATASET]);
+export const DEFAULT_GROUP: DataGroup = new DataGroup('All Datasets', []);
export function flatten(dataset: DataSet | DataGroup): DataSet[] {
if (dataset instanceof DataSet) {
diff --git a/src/deriveLinkDefaults.ts b/src/deriveLinkDefaults.ts
index 0c1c140..e7ab79e 100644
--- a/src/deriveLinkDefaults.ts
+++ b/src/deriveLinkDefaults.ts
@@ -14,7 +14,7 @@ import {
importTwitter,
importWiki,
} from './api/EpiData';
-import DataSet, { DataGroup, DEFAULT_GROUP, flatten, SAMPLE_DATASET, DEFAULT_VIEWPORT } from './data/DataSet';
+import DataSet, { DataGroup, DEFAULT_GROUP, flatten, DEFAULT_VIEWPORT } from './data/DataSet';
import EpiDate from './data/EpiDate';
import EpiPoint from './data/EpiPoint';
@@ -35,13 +35,15 @@ export interface SharedState {
active: DataSet[];
viewport: null | [number, number, number, number];
showPoints: boolean;
+ autoFit: boolean;
}
const DEFAULT_VALUES: SharedState = {
group: DEFAULT_GROUP,
- active: [SAMPLE_DATASET],
+ active: [],
viewport: DEFAULT_VIEWPORT,
showPoints: false,
+ autoFit: true,
};
const lookups = {
@@ -130,11 +132,6 @@ export function initialLoader(datasets: ILinkConfig['datasets']) {
}
for (const ds of datasets) {
- if (ds.title === SAMPLE_DATASET.title) {
- SAMPLE_DATASET.color = ds.color;
- resolvedDataSets.push(SAMPLE_DATASET);
- continue;
- }
if (ds.params && ds.params._type === 'line') {
const d = new DataSet(
[
@@ -158,7 +155,17 @@ export function initialLoader(datasets: ILinkConfig['datasets']) {
}
}
- return Promise.all(resolvedDataSets).then((data) => data.filter((d): d is DataSet => d != null));
+ return Promise.all(resolvedDataSets).then((data) => {
+ const cleaned = data.filter((d): d is DataSet => d != null);
+ cleaned.forEach((d) => {
+ if (d.params && !Array.isArray(d.params) && d.params._endpoint && d.params.regions) {
+ // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+ d.title = `${d.params._endpoint} | ${d.params.regions} | ${d.title}`;
+ }
+ add(d);
+ });
+ return cleaned;
+ });
};
}
@@ -194,10 +201,6 @@ export function getDirectLinkImpl(state: SharedState): { url: URL; anySkipped: b
};
let anySkipped = false;
state.active.forEach((data) => {
- if (data === SAMPLE_DATASET) {
- config.datasets.push({ title: data.title, color: data.color, params: {} });
- return;
- }
if (data.params) {
config.datasets.push({
color: data.color,
diff --git a/src/store.ts b/src/store.ts
index 581b818..22adbea 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -16,6 +16,7 @@ export const expandedDataGroups = writable([defaults.group]);
export const isShowingPoints = writable(defaults.showPoints);
export const initialViewport = writable(defaults.viewport);
export const navMode = writable(NavMode.pan);
+export const autoFit = writable(defaults.autoFit);
export function addDataSet(dataset: DataSet | DataGroup): void {
const root = get(datasetTree);
diff --git a/src/tour.ts b/src/tour.ts
index d0270da..86ee130 100644
--- a/src/tour.ts
+++ b/src/tour.ts
@@ -16,6 +16,15 @@ export const tour = new Shepherd.Tour({
const next = tour.next.bind(tour);
const cancel = tour.cancel.bind(tour);
+// Dismiss tour on future runs once it is cancelled or completed.
+function dismissTour() {
+ if (!localStorage.getItem('shepherd-tour')) {
+ localStorage.setItem('shepherd-tour', 'yes');
+ }
+}
+tour.on('cancel', dismissTour);
+tour.on('complete', dismissTour);
+
const nextCancel = [
{
text: 'Next',
@@ -28,8 +37,14 @@ const nextCancel = [
];
tour.addStep({
+ attachTo: {
+ element: '[data-tour=datatour]',
+ on: 'auto',
+ },
title: 'Welcome to EpiVis',
- text: `EpiVis is an interactive tool for visualizing epidemiological time-series data. This tour will introduce its main features
`,
+ text: `EpiVis is an interactive tool for visualizing epidemiological time-series data. This tour will introduce its main features.
+
+ To review this information later on, use the "?" button in the upper right corner of the interface, or the 'h' hotkey.
`,
buttons: nextCancel,
});
@@ -40,7 +55,7 @@ tour.addStep({
},
title: 'Data Browser',
text: `
- The left shows shows the loaded datasets. One has several options to load new datasets which are going to be explained as part of this tour.
+ The left panel shows the loaded datasets. It has several options to load new datasets, which are going to be explained as part of this tour.
The datasets are organized in a hierarchial structure. Each dataset can be individually shown in the chart by clicking on it.
@@ -55,9 +70,9 @@ tour.addStep({
},
title: 'Main Chart',
text: `
- The main views shows the time series of the selected datasets. The view is freely navigable using mouse or touch.
+ The main view shows a time-based chart of the selected datasets. This view is freely navigable using mouse or touch controls.
- The axis on the left side and on the top shows the currently selected date / value range.
+ The axes on the left side and on the top show the currently selected date / value range.
`,
buttons: nextCancel,
});
@@ -68,7 +83,7 @@ tour.addStep({
on: 'auto',
},
title: 'Chart Menu',
- text: `The menu on top of the chart allows customizing the chart, such as changing colors or exporting the image`,
+ text: `The menu on top of the chart features several different options, such as changing colors or exporting the chart as an image.`,
buttons: nextCancel,
});
@@ -78,7 +93,7 @@ tour.addStep({
on: 'auto',
},
title: 'Load CSV File',
- text: `EpiVis allows one to upload CSV files to explore custom datasets`,
+ text: `EpiVis supports loading CSV files to explore custom datasets.`,
buttons: nextCancel,
});
@@ -88,7 +103,7 @@ tour.addStep({
on: 'auto',
},
title: 'Load Data from EpiData API',
- text: `The more common option is to load existing time series from the numerous data sources provided by the EpiData API`,
+ text: `A more common option is to load existing time series from numerous data sources provided by the EpiData API.`,
buttons: nextCancel,
});
@@ -98,7 +113,7 @@ tour.addStep({
on: 'auto',
},
title: 'Draw a custom line (Advanced)',
- text: `A more advanced option is to define a custom line that should be drawn in the chart`,
+ text: `Another more advanced option is to define a custom line that should be drawn in the chart.`,
buttons: nextCancel,
});
@@ -108,7 +123,7 @@ tour.addStep({
on: 'auto',
},
title: 'Derive via a kernel function (Advanced)',
- text: `Another option is to derive one dataset by applying a kernel function to combine other datasets. For example, create a new dataset representing the average of two other datasets.`,
+ text: `And another option is to derive one dataset by applying a kernel function to combine other datasets. For example, create a new dataset representing the average of two other datasets.`,
buttons: nextCancel,
});
@@ -130,6 +145,15 @@ tour.addStep({
text: `This action will changes the chart view such that all selected datasets are fully shown. Keyboard Shortcut: f`,
buttons: nextCancel,
});
+tour.addStep({
+ attachTo: {
+ element: '[data-tour=autofit]',
+ on: 'auto',
+ },
+ title: 'Automatically Fit Data',
+ text: `This action changes whether the chart should be re-scaled every time a dataset is added or removed, to ensure all datasets are fully shown. Keyboard Shortcut: a`,
+ buttons: nextCancel,
+});
tour.addStep({
attachTo: {
element: '[data-tour=points]',
@@ -146,7 +170,7 @@ tour.addStep({
on: 'auto',
},
title: 'Download Screenshot',
- text: `This action will download the current view in PNG format`,
+ text: `This action will download the current view in PNG format.`,
buttons: nextCancel,
});
tour.addStep({
@@ -155,7 +179,7 @@ tour.addStep({
on: 'auto',
},
title: 'Create Shareable Link',
- text: `This action will show a shareable link that can be used to reproduce the current view (if possible)`,
+ text: `This action will show a shareable link that can be used to reproduce the current view (if possible).`,
buttons: nextCancel,
});
tour.addStep({
@@ -164,7 +188,7 @@ tour.addStep({
on: 'auto',
},
title: 'Toggle between Navigation Modes',
- text: `EpiVis supports three navigation modes: Pan, Crop, and Zoom to manipulate the view`,
+ text: `EpiVis supports three navigation modes: Pan, Crop, and Zoom to manipulate the view.`,
buttons: nextCancel,
});
tour.addStep({
@@ -182,7 +206,7 @@ tour.addStep({
on: 'bottom-end',
},
title: 'Mouse Cropping',
- text: `Dragging the mouse while the Shift key is pressed will temporarily switch to the Crop navigation mode allowing to span a rectangle of interest`,
+ text: `Dragging the mouse while the Shift key is pressed will temporarily switch to the Crop navigation mode, which will span a rectangle of interest.`,
buttons: nextCancel,
});
tour.addStep({
@@ -191,13 +215,13 @@ tour.addStep({
on: 'bottom-end',
},
title: 'Mouse Zooming',
- text: `Dragging the mouse while pressing the Ctrl/Control key is pressed will temporarily switch to the zoom mode. Moving the mouse up will zoom in and down will zoom out in the value domain. Similarly moving the mouse left will zoom in the date domain and moving right out of the date domain.`,
+ text: `Dragging the mouse while the Ctrl/Control key is pressed will temporarily switch to the zoom mode. Moving the mouse up will zoom in and down will zoom out in the value domain. Similarly, moving the mouse left or right will zoom in or out on the date domain.`,
buttons: nextCancel,
});
tour.addStep({
title: 'Finish',
- text: `This concludes this overview about EpiVis. Have fun exploring time-series data`,
+ text: `This concludes this overview about EpiVis. Have fun exploring time-series data!`,
buttons: [
{
text: 'Finish',