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 @@
- +

- + are often used to visualize data that accumulates to a sum. +

- +

+ Line chart for comparing change in data across categories. Line charts are often used to visualize change in data over time, showing important trends. +

diff --git a/early_explo/examples/menu/menuFunctions.js b/early_explo/examples/menu/menuFunctions.js index 1e602f7..24b3e20 100644 --- a/early_explo/examples/menu/menuFunctions.js +++ b/early_explo/examples/menu/menuFunctions.js @@ -46,6 +46,34 @@ const menuFunctions = { } }) } + }, + "Description verbosity": { + change: option => {}, + "Chart": { + change: option => { + console.log("change chart desc!", option) + //highcharts-description-default + // description-line + let chartlist = ["sankey","bar","line"] + chartlist.forEach(c => { + let chartId = `description-${c}` + let chart = document.getElementById(chartId) + let desc = descriptions[chartId][option] + if (!desc) { + console.log("NO description!") + chart.classList.add("highcharts-menu-hidden") + } else { + chart.classList.remove("highcharts-menu-hidden") + chart.innerText = desc + } + }) + } + }, + "Region alt text": { + change: option => { + console.log("change region desc!", option) + } + } } }, Text: { @@ -370,10 +398,19 @@ const menuFunctions = { "Element size": { change: option => {}, Lines: { - change: option => {}, - Outlines : { - change: option => {}, - } + change: option => { + console.log("changing lines!") + lineChart.update({ + plotOptions: { + series: { + lineWidth: menuStateValueMap.lineWidth[option] + } + } + }) + }, + // Outlines : { + // change: option => {}, + // } } }, Audio: { diff --git a/early_explo/examples/menu/menuState.js b/early_explo/examples/menu/menuState.js index 2bb24a1..a955ba3 100644 --- a/early_explo/examples/menu/menuState.js +++ b/early_explo/examples/menu/menuState.js @@ -11,6 +11,16 @@ let menuState = { value: "", available: true, enabled: false + }, + "Description verbosity": { + value: "", + available: true, + enabled: false, + "Chart": { + value: "", + available: true, + enabled: false + } } }, Text: { @@ -121,11 +131,11 @@ let menuState = { value: "", available: true, enabled: false, - Outlines : { - value: "", - available: true, - enabled: false - } + // Outlines : { + // value: "", + // available: true, + // enabled: false + // } } }, Audio: { @@ -135,21 +145,31 @@ let menuState = { }, Motion: { value: "", - available: true, + available: false, enabled: false }, Interactivity: { value: "", - available: true, + available: false, enabled: false, "Pointer focus": { value: "", - available: true, + available: false, enabled: false } } } let overrideValues = { + "Comprehension": { + options: { + moderate: { + "Description verbosity": "minimal" + }, + robust: { + "Description verbosity": "verbose" + } + } + }, "Color and contrast": { options: { default: { @@ -187,5 +207,11 @@ const menuStateValueMap = { medium: "1.25em", "medium+": "1.5em", large: "1.75em" + }, + lineWidth: { + default: 2, + light: 1, + moderate: 3, + thick: 4 } } \ No newline at end of file diff --git a/early_explo/examples/menu/parsePreferences.js b/early_explo/examples/menu/parsePreferences.js index a8c6654..cb5418a 100644 --- a/early_explo/examples/menu/parsePreferences.js +++ b/early_explo/examples/menu/parsePreferences.js @@ -1,18 +1,18 @@ const rawPrefs = `- Comprehension (default, moderate, robust) - - Alt text appearance (default, show high level, show all) -- - Description verbosity (default, minimal, verbose) -- - - Chart (default, minimal, verbose) -- - - Region alt text (default, minimal, verbose) -- - - Mark alt text (default, minimal, verbose) -- - - Interactions (default, minimal, verbose) -- - - Animations (default, minimal, verbose) -- - - Sonification (default, minimal, verbose) -- - Explanation verbosity (default, minimal, verbose) -- - - Chart (default, minimal, verbose) -- - - Data (default, minimal, verbose) -- - - Interactions (default, minimal, verbose) -- - - Animations (default, minimal, verbose) -- - - Sonification (default, minimal, verbose) +- - Description verbosity (default, disable, minimal, verbose) +- - - Chart (default, disable, minimal, verbose) +- - - Region alt text (default, disable, minimal, verbose) +- - - Mark alt text (default, disable, minimal, verbose) +- - - Interactions (default, disable, minimal, verbose) +- - - Animations (default, disable, minimal, verbose) +- - - Sonification (default, disable, minimal, verbose) +- - Explanation verbosity (default, disable, minimal, verbose) +- - - Chart (default, disable, minimal, verbose) +- - - Data (default, disable, minimal, verbose) +- - - Interactions (default, disable, minimal, verbose) +- - - Animations (default, disable, minimal, verbose) +- - - Sonification (default, disable, minimal, verbose) - - Cues and labels (default, pattern, show) - - - Annotations (default, pattern, show) - - - Mark Labels (default, pattern, show)