Waterfall: start total, signed changes, end total
Waterfall graphs provide a clear, visual representation of data over time, making them ideal for tracking project progress or budget allocation. They are particularly useful for illustrating cumulative effects, showing how individual components contribute to a final total. Understanding waterfall charts enhances data interpretation, leading to better decision-making across various fields, from finance to software development. Their simplicity facilitates quick comprehension of complex datasets, enabling effective communication of key trends and insights.
<html>
<head>
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"></canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
// Use a data frame (2D-array) for the graph
var data =
// Create the configuration for the graph
var config = {
"graphType" : "Waterfall",
"theme" : "paulTol",
"waterfallNetColor" : "#4477AA",
"waterfallIncreaseColor" : "#EE6677",
"waterfallDecreaseColor" : "#228833",
"graphOrientation" : "vertical",
"xAxis" : [
"Gt C per year"
],
"xAxisTitle" : "Gt C per year",
"showLegend" : false,
"smpTextRotate" : 45,
"smpTextScaleFontFactor" : 0.8,
"title" : "Oceans and land absorb about half of fossil CO2",
"subtitle" : "Annual carbon budget in Gt C per year, synthetic round numbers",
"showDataValues" : true,
"dataValuesPosition" : "outside"
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
</script>
</body>
</html>
<html>
<head>
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"></canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
// Create the data for the graph
var data = {
"y" : {
"vars" : [
"Gt C per year"
],
"smps" : [
"Fossil CO2",
"Cement",
"Land-use change",
"Peat fires",
"Ocean uptake",
"Land uptake",
"Freshwater burial",
"Rock weathering",
"Imbalance",
"Atmospheric growth"
],
"data" : [
[
9,
0.4,
1.1,
0.2,
-2.8,
-3.1,
-0.2,
-0.3,
0.5,
0
]
]
}
}
// Create the configuration for the graph
var config = {
"graphType" : "Waterfall",
"theme" : "paulTol",
"waterfallNetColor" : "#4477AA",
"waterfallIncreaseColor" : "#EE6677",
"waterfallDecreaseColor" : "#228833",
"graphOrientation" : "vertical",
"xAxis" : [
"Gt C per year"
],
"xAxisTitle" : "Gt C per year",
"showLegend" : false,
"smpTextRotate" : 45,
"smpTextScaleFontFactor" : 0.8,
"title" : "Oceans and land absorb about half of fossil CO2",
"subtitle" : "Annual carbon budget in Gt C per year, synthetic round numbers",
"showDataValues" : true,
"dataValuesPosition" : "outside"
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
</script>
</body>
</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-waterfall6-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
dataValuesPosition="outside",
graphOrientation="vertical",
graphType="Waterfall",
showDataValues=TRUE,
showLegend=FALSE,
smpTextRotate=45,
smpTextScaleFontFactor=0.8,
subtitle="Annual carbon budget in Gt C per year, synthetic round numbers",
theme="paulTol",
title="Oceans and land absorb about half of fossil CO2",
waterfallDecreaseColor="#228833",
waterfallIncreaseColor="#EE6677",
waterfallNetColor="#4477AA",
xAxis=list("Gt C per year"),
xAxisTitle="Gt C per year"
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser
if __name__ == "__main__":
# Define the chart with its data and configuration
chart: CanvasXpress = CanvasXpress(
render_to = "waterfall6",
data = {
"y": {
"vars": ["Gt C per year"],
"smps": ["Fossil CO2", "Cement", "Land-use change", "Peat fires", "Ocean uptake", "Land uptake", "Freshwater burial", "Rock weathering", "Imbalance", "Atmospheric growth"],
"data": [
[9, 0.4, 1.1, 0.2, -2.8, -3.1, -0.2, -0.3, 0.5, 0]
]
}
},
config = {
"graphType": "Waterfall",
"theme": "paulTol",
"waterfallNetColor": "#4477AA",
"waterfallIncreaseColor": "#EE6677",
"waterfallDecreaseColor": "#228833",
"graphOrientation": "vertical",
"xAxis": ["Gt C per year"],
"xAxisTitle": "Gt C per year",
"showLegend": False,
"smpTextRotate": 45,
"smpTextScaleFontFactor": 0.8,
"title": "Oceans and land absorb about half of fossil CO2",
"subtitle": "Annual carbon budget in Gt C per year, synthetic round numbers",
"showDataValues": True,
"dataValuesPosition": "outside"
},
width = 760,
height = 560
)
# Display the chart in its own Web page
show_in_browser(chart)
Run this notebook:
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph
graph(
CanvasXpress(
render_to = "waterfall6",
data = {
"y": {
"vars": ["Gt C per year"],
"smps": ["Fossil CO2", "Cement", "Land-use change", "Peat fires", "Ocean uptake", "Land uptake", "Freshwater burial", "Rock weathering", "Imbalance", "Atmospheric growth"],
"data": [
[9, 0.4, 1.1, 0.2, -2.8, -3.1, -0.2, -0.3, 0.5, 0]
]
}
},
config = {
"graphType": "Waterfall",
"theme": "paulTol",
"waterfallNetColor": "#4477AA",
"waterfallIncreaseColor": "#EE6677",
"waterfallDecreaseColor": "#228833",
"graphOrientation": "vertical",
"xAxis": ["Gt C per year"],
"xAxisTitle": "Gt C per year",
"showLegend": False,
"smpTextRotate": 45,
"smpTextScaleFontFactor": 0.8,
"title": "Oceans and land absorb about half of fossil CO2",
"subtitle": "Annual carbon budget in Gt C per year, synthetic round numbers",
"showDataValues": True,
"dataValuesPosition": "outside"
},
width = 760,
height = 560
)
)
using CanvasXpress
canvasxpress(Dict(
"y" => Dict(
"vars" => ["Gt C per year"],
"smps" => ["Fossil CO2", "Cement", "Land-use change", "Peat fires", "Ocean uptake", "Land uptake", "Freshwater burial", "Rock weathering", "Imbalance", "Atmospheric growth"],
"data" => [
[9, 0.4, 1.1, 0.2, -2.8, -3.1, -0.2, -0.3, 0.5, 0]
]
)
);
graphType = "Waterfall",
theme = "paulTol",
waterfallNetColor = "#4477AA",
waterfallIncreaseColor = "#EE6677",
waterfallDecreaseColor = "#228833",
graphOrientation = "vertical",
xAxis = ["Gt C per year"],
xAxisTitle = "Gt C per year",
showLegend = false,
smpTextRotate = 45,
smpTextScaleFontFactor = 0.8,
title = "Oceans and land absorb about half of fossil CO2",
subtitle = "Annual carbon budget in Gt C per year, synthetic round numbers",
showDataValues = true,
dataValuesPosition = "outside"
)
