You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/** * Creates a range bar chart using Plotly.js. * * @param {Object} data - The dataset, with keys as categories (e.g., cities) and values as arrays of measurements. * @param {Array} labels - The labels for each measurement (e.g., temperature metrics). * @param {string} containerId - The ID of the HTML container to render the chart. * @param {string} title - The title of the chart. */functionrangeChart(data,labels,containerId,title){constcategories=Object.keys(data);// Extract categories (e.g., cities)// Generate bar traces for each labelconstbarTraces=labels.map((label,index)=>{constbases=categories.map((category)=>index===0 ? data[category][index] : data[category][index-1]);// base, i.e. the previous valueconstheights=categories.map((category)=>data[category][index]-bases[categories.indexOf(category)]);// Height relative to the base, i.e. the current valuereturn{x: categories,y: heights,// Bar heightsbase: bases,// Starting points for each barname: label,type: "bar"};});// Layout for the chartconstlayout={title: title,barmode: "overlay",// Overlapping bars to show rangesxaxis: {title: "Category"},yaxis: {title: "Value"}};// Render the chartPlotly.newPlot(containerId,barTraces,layout);}constranges={Ontario: [-9,3,8,13,27],England: [3,8,12,16,24],Kentucky: [-3,8,14,20,30]};constlabels=["Winter mean low","Annual mean low","Annual mean","Annual mean high","Summer mean high"];rangeChart(ranges,labels,"rangePlot","Temperature Ranges in Three Londons (range)");
That being said, having this chart-type built in would be great. The mental gymnastics are a bit tricky to get a true range chart working correctly.
Here are the built-in ways to achieve a similar chart:
Code snippet
// Data for the three Londonsconstranges={Ontario: [-9,3,8,13,27],England: [3,8,12,16,24],Kentucky: [-3,8,14,20,30]};constlabels=["Winter mean low","Annual mean low","Annual mean","Annual mean high","Summer mean high"];constcities=Object.keys(ranges);// Scatter plot tracesconstscatterTraces=labels.map((label,index)=>({x: cities,y: cities.map((city)=>ranges[city][index]),mode: "markers",name: label,type: "scatter"}));constscatterLayout={title: "Temperature Ranges in Three Londons (scatter)",xaxis: {title: "City"},yaxis: {title: "Temperature"}};Plotly.newPlot("scatterPlot",scatterTraces,scatterLayout);// Bar plot tracesconstbarTraces=labels.map((label,index)=>({x: cities,y: cities.map((city)=>ranges[city][index]),name: label,type: "bar"}));constbarLayout={title: "Temperature Ranges in Three Londons (overlay)",barmode: "overlay",xaxis: {title: "City"},yaxis: {title: "Temperature"}};Plotly.newPlot("barPlot",barTraces,barLayout);// Bar plot tracesconststackedBarTraces=labels.map((label,index)=>({x: cities,y: cities.map((city)=>ranges[city][index]),name: label,type: "bar"}));conststackedBarLayout={title: "Temperature Ranges in Three Londons (stacked)",barmode: "stack",xaxis: {title: "City"},yaxis: {title: "Temperature"}};Plotly.newPlot("stackedBarPlot",stackedBarTraces,stackedBarLayout);
However, these aren't quite right.
The scatter plot is most legible, but doesn't depict a range
The overlaid bar shows the right data, but because the base of all positive points is 0, they actually overlap on top of each other. We want the base to he previous, and for England, we want the base to be 3, not 0.
The stacked bar chart looks right at first glance, but it's actually summing all the temperatures (and of course, the base for England is at 0, not 3. And the negative values stack a bit weirdly.
The text was updated successfully, but these errors were encountered:
ndrezn
changed the title
Feature Request: Range Charts
Feature Request: Native Range Charts
Nov 26, 2024
MinutePhysics called us out (by name!) for not having native support for range charts: https://www.youtube.com/watch?v=5zBg9pH_6bE
However, to be clear, it is possible to build this chart type in Plotly using the
base
attribute for bar charts and doing a bit of data preparation.Here's a live demo of a custom range chart and our built-ins: https://codepen.io/ndrezn/pen/XJrWboB
Code snippet
That being said, having this chart-type built in would be great. The mental gymnastics are a bit tricky to get a true range chart working correctly.
Here are the built-in ways to achieve a similar chart:
Code snippet
However, these aren't quite right.
base
of all positive points is0
, they actually overlap on top of each other. We want the base to he previous, and for England, we want the base to be3
, not0
.base
for England is at0
, not3
. And the negative values stack a bit weirdly.The text was updated successfully, but these errors were encountered: