diff --git a/early_explo/examples/menu/barChart.js b/early_explo/examples/menu/barChart.js
index 2925aba..f5317b9 100644
--- a/early_explo/examples/menu/barChart.js
+++ b/early_explo/examples/menu/barChart.js
@@ -1,7 +1,7 @@
barChart = Highcharts.chart('bar-container', {
chart: {
type: 'bar',
- height: 400
+ height: 350
},
title: {
text: 'Energy Sources',
@@ -29,7 +29,7 @@ barChart = Highcharts.chart('bar-container', {
plotOptions: {
series: {
stacking: 'normal',
- pointWidth: 25,
+ pointWidth: 20,
borderWidth: 2,
dataLabels: {
enabled: true,
diff --git a/early_explo/examples/menu/chart.js b/early_explo/examples/menu/chart.js
index 204325f..71e255b 100644
--- a/early_explo/examples/menu/chart.js
+++ b/early_explo/examples/menu/chart.js
@@ -165,7 +165,18 @@ chart = Highcharts.chart('container', {
'{point.weight}.'
}
},
+ plotOptions: {
+ series: {
+ allowPointSelect: true,
+ states: {
+ select: {
+ color: 'MidnightBlue'
+ }
+ }
+ }
+ },
series: [{
+ // allowPointSelect: true,
keys: ['from', 'to', 'weight'],
nodes: sankeyNodes, // patternNodes
data: sankeyData,
diff --git a/early_explo/examples/menu/datasets.js b/early_explo/examples/menu/datasets.js
index ab63557..905be64 100644
--- a/early_explo/examples/menu/datasets.js
+++ b/early_explo/examples/menu/datasets.js
@@ -1,3 +1,20 @@
+const descriptions = {
+ "description-sankey": {
+ "minimal": `Sankey charts are used to visualize data flow and volume between nodes.`,
+ "default": `Sankey charts are used to visualize data flow and volume between nodes. Visually wider lines indicate larger volumes.`,
+ "verbose": `Sankey charts are used to visualize data flow and volume between nodes. Visually wider lines indicate larger volumes. This chart is showing energy consumption and types. Interacting with this chart by selecting a node or flow (such as with a click) will update the stacked bar chart below.`
+ },
+ "description-bar": {
+ "minimal": `Chart showing stacked bars for comparing quantities.`,
+ "default": `Chart showing stacked bars for comparing quantities. Stacked charts are often used to visualize data that accumulates to a sum.`,
+ "verbose": `Chart showing stacked bars for comparing quantities. Stacked charts are often used to visualize data that accumulates to a sum. This chart is showing data from the energy sources, and will stack to demonstrate the proportion of an energy source that is currently selected by the previous Sankey Diagram.`
+ },
+ "description-line": {
+ "minimal": `Line chart for comparing change in data across categories.`,
+ "default": `Line chart for comparing change in data across categories. Line charts are often used to visualize change in data over time, showing important trends.`,
+ "verbose": `Line chart for comparing change in data across categories. Line charts are often used to visualize change in data over time, showing important trends. This chart is showing energy consumption over time, by type of consumption. Interacting with the legend can help focus or toggle on and off specific categories.`
+ },
+}
const multipliers = {
"flat": [
{
diff --git a/early_explo/examples/menu/lineChart.js b/early_explo/examples/menu/lineChart.js
index eddf07c..2c0b10f 100644
--- a/early_explo/examples/menu/lineChart.js
+++ b/early_explo/examples/menu/lineChart.js
@@ -1,6 +1,6 @@
lineChart = Highcharts.chart('line-container', {
chart: {
- height: 400
+ height: 350
},
title: {
text: 'Monthly Energy Consumption',
diff --git a/early_explo/examples/menu/menu.css b/early_explo/examples/menu/menu.css
index f8bb47c..a1d99fe 100644
--- a/early_explo/examples/menu/menu.css
+++ b/early_explo/examples/menu/menu.css
@@ -211,4 +211,10 @@ input:hover {
.highcharts-visible-alt {
display: block;
position: absolute;
+}
+
+.highcharts-description {
+ padding: 10px;
+ padding-top: 0;
+ margin-top: 0;
}
\ No newline at end of file
diff --git a/early_explo/examples/menu/menu.html b/early_explo/examples/menu/menu.html
index c221891..65546ad 100644
--- a/early_explo/examples/menu/menu.html
+++ b/early_explo/examples/menu/menu.html
@@ -21,30 +21,27 @@