Visualizing Blockbusters Data with ggstream
Streamgraph, a variation of the area chart, visualizes data changes over time. Unlike traditional area charts, it uses stacked areas to represent multiple categories, creating a flowing, river-like effect. This makes it ideal for showing proportions of categories within a whole over time, highlighting trends and comparisons. Streamgraph visual appeal aids in understanding complex data. Its flowing nature makes it easier to spot significant shifts in proportions and dominance of various categories. Applications range from visualizing website traffic sources to showing trends in market shares. The graph flexibility and intuitive nature enhances data comprehension.
<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" : {
"data" : [
[1977,2.98352055383543],[1977,0.208779979021173],[1977,0.516481540415995],[1977,2.53976485019248],[1978,1.9151703507814],[1978,0.759825520111634],[1978,1.03860095207035],[1978,0.202470341300132],[1979,1.14792971136568],[1979,0.311883101170813],[1979,0.563253921276056],[1979,1.02456306640513],[1980,1.79670756515802],[1980,0.582556071531046],[1980,1.19765746934593],[1981,1.75253466486853],[1981,0.126020739800791],[1981,0.687687301783687],[1981,0.3548266784798],[1982,0.772998732184293],[1982,0.96256403679119],[1982,0.693643443163038],[1983,1.34240625354026],[1983,0.231538068780438],[1983,0.523216944287757],[1983,0.415287446331524],[1984,3.20429872928358],[1984,0.581484140227707],[1984,0.202902969019087],[1985,0.969105664668943],[1985,1.07970086960618],[1985,0.208164452717254],[1985,0.962946940662372],[1986,2.36947854869278],[1986,0.257900380794335],[1986,0.19873112827474],[1986,0.433487795618009],[1986,0.325676339731071],[1987,1.20542580102935],[1987,0.83568475831665],[1987,1.24065658624523],[1988,1.26809380655125],[1988,0.734509774164577],[1988,2.37053694802624],[1988,0.790235361971302],[1989,2.8345939330505],[1989,1.183257218705],[1989,0.392850009024575],[1989,0.975295860979896],[1990,1.43432710148099],[1990,1.3638434298331],[1990,2.32913215092843],[1990,1.03134676102818],[1991,2.09237049470402],[1991,0.578297249830432],[1991,0.637985426686524],[1991,0.712237460968582],[1991,0.394826426277535],[1992,1.86345156369203],[1992,0.669304433859284],[1992,0.939743415440202],[1992,0.773164862702933],[1992,1.11148526359353],[1993,2.78397343443086],[1993,1.21227766252726],[1993,1.34717790627949],[1994,1.66756117115677],[1994,1.34689403050433],[1994,2.09268674885444],[1994,1.58964327246239],[1995,2.26588673127609],[1995,1.05808840022356],[1995,1.21808807562042],[1995,0.494610594718905],[1996,4.45196804519666],[1996,0.537452166405297],[1996,0.545244489158906],[1996,0.917593389844618],[1997,3.4396551458772],[1997,1.90487287118962],[1997,3.00173975952858],[1998,2.50079778314104],[1998,1.06496864648014],[1998,1.52134326539668],[1998,0.768666141111714],[1999,3.89020480233631],[1999,1.46848253404405],[1999,0.571360365364134],[1999,1.61584304389576],[2000,2.49515813598875],[2000,0.656850742240402],[2000,0.534832756630298],[2000,1.60484816657267],[2000,0.445543187172222],[2001,2.38530990233043],[2001,2.74794266343131],[2001,1.49808707723351],[2002,3.92806928627862],[2002,2.64236282386198],[2002,0.55775816094974],[2002,0.536637104762506],[2002,0.59412750868514],[2003,4.81797167728548],[2003,1.62113924543217],[2003,1.23788799207691],[2003,0.688704230032928],[2004,1.87115506572587],[2004,1.10967273201966],[2004,2.69845167824367],[2004,0.728952268826084],[2004,1.54658071376937],[2005,3.09164528909704],[2005,3.67209885228953],[2005,0.731866154643863],[2005,0.501706999216886],[2006,4.80814720283751],[2006,0.750129477646631],[2006,1.96818277996204],[2007,5.6340673212717],[2007,0.745756406056602],[2007,2.5140600690924],[2008,4.91665279954387],[2008,2.15004309317357],[2008,0.746282332590566],[2009,7.69476242868302],[2009,0.867770351316001],[2009,1.98264760758801],[2009,0.573127786486015],[2010,2.56018196508162],[2010,2.38312330442034],[2010,4.10764745138057],[2011,4.92867228518735],[2011,2.23444617612844],[2011,1.43729088848008],[2011,0.688143814818957],[2012,6.58664420676336],[2012,2.10274446596042],[2012,1.84930579045572],[2013,4.68135900459318],[2013,1.07297383618593],[2013,3.35330239096453],[2013,0.809676218388758],[2014,6.91682462363139],[2014,1.8017979289302],[2015,10.6713065247899],[2015,2.20718497678301],[2016,4.79935180490655],[2016,1.9349278997775],[2016,3.18159312703779],[2017,8.32378616397747],[2017,1.10136616854165],[2018,8.58306091718948],[2018,0.681499340170737],[2018,1.29554629001988],[2019,7.023685375938],[2019,1.074859913919],[2019,4.246369107189]
],
"smps" : ["year","box_office"],
"vars" : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157"]
},
"z" : {
"genre" : ["Action","Adventure","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Adventure","Comedy","Action","Adventure","Comedy","Drama","Action","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Comedy","Action","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Action","Adventure","Animation","Action","Animation","Comedy","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Action","Adventure","Animation","Drama","Action","Adventure","Action","Animation","Action","Adventure","Animation","Action","Animation","Action","Adventure","Animation","Action","Adventure","Animation"]
}
}
// Create the configuration for the graph
var config = {
"backgroundType" : "panel",
"colorBy" : "genre",
"colors" : ["rgb(255,180,0)","rgb(255,199,64)","rgb(194,0,8)","rgb(255,2,13)","rgb(19,175,239)"],
"dataPointSizeScaleFactor" : 0,
"graphType" : "Scatter2D",
"panelBackgroundColor" : "rgb(222,222,222)",
"scatterStreamBandwidth" : 0.75,
"scatterStreamExtraSpan" : 0.1,
"scatterStreamNumber" : 1000,
"scatterStreamTrueRange" : "both",
"scatterStreamType" : "mirror",
"scatterType" : "stream",
"showConfidenceIntervals" : false,
"showLoessFit" : "genre",
"xAxisGridMinorShow" : false,
"xAxis": ["year"],
"yAxisGridMinorShow" : false,
"yAxis": ["box_office"]
}
// 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-blockbusters-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/r/cX-blockbusters-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
varAnnot=z,
backgroundType="panel",
colorBy="genre",
colors=list("rgb(255,180,0)", "rgb(255,199,64)", "rgb(194,0,8)", "rgb(255,2,13)", "rgb(19,175,239)"),
dataPointSizeScaleFactor=0,
graphType="Scatter2D",
panelBackgroundColor="rgb(222,222,222)",
scatterStreamBandwidth=0.75,
scatterStreamExtraSpan=0.1,
scatterStreamNumber=1000,
scatterStreamTrueRange="both",
scatterStreamType="mirror",
scatterType="stream",
showConfidenceIntervals=FALSE,
showLoessFit="genre",
xAxis=list("year"),
xAxisGridMinorShow=FALSE,
yAxis=list("box_office"),
yAxisGridMinorShow=FALSE
)
