Module:Sandbox/Ita140188/chartsvg

From blackwiki
Jump to navigation Jump to search


before (Module:Chart) after (this module)
25,000
50,000
75,000
100,000
125,000
150,000
Before
During
After
Post mortem
Blah
Bloh
  •   Apple
  •   Banana
  •   Orange

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
150,000
 
125,000
 
100,000
 
75,000
 
50,000
 
25,000

<svg style="height:120px;width:220px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:4px;y:88px;height:31px;width:26px;fill:green;" class="chart2-bar"><title>Apple: 40,000Kg</title></rect> <rect style="x:40px;y:80px;height:39px;width:26px;fill:green;" class="chart2-bar"><title>Apple: 50,000Kg</title></rect> <rect style="x:76px;y:72px;height:47px;width:26px;fill:green;" class="chart2-bar"><title>Apple: 60,000Kg</title></rect> <rect style="x:112px;y:104px;height:15px;width:26px;fill:green;" class="chart2-bar"><title>Apple: 20,000Kg</title></rect> <rect style="x:148px;y:96px;height:23px;width:26px;fill:green;" class="chart2-bar"><title>Apple: 30,000Kg</title></rect> <rect style="x:184px;y:92px;height:27px;width:26px;fill:green;" class="chart2-bar"><title>Apple: 35,000Kg</title></rect> <rect style="x:4px;y:72px;height:15px;width:26px;fill:yellow;" class="chart2-bar"><title>Banana: 20,000Kg</title></rect> <rect style="x:40px;y:32px;height:47px;width:26px;fill:yellow;" class="chart2-bar"><title>Banana: 60,000Kg</title></rect> <rect style="x:76px;y:62px;height:9px;width:26px;fill:yellow;" class="chart2-bar"><title>Banana: 12,000Kg</title></rect> <rect style="x:112px;y:69px;height:34px;width:26px;fill:yellow;" class="chart2-bar"><title>Banana: 44,000Kg</title></rect> <rect style="x:148px;y:86px;height:9px;width:26px;fill:yellow;" class="chart2-bar"><title>Banana: 12,000Kg</title></rect> <rect style="x:184px;y:76px;height:15px;width:26px;fill:yellow;" class="chart2-bar"><title>Banana: 20,000Kg</title></rect> <rect style="x:4px;y:28px;height:43px;width:26px;fill:orange;" class="chart2-bar"><title>Orange: 55,000Kg</title></rect> <rect style="x:40px;y:21px;height:10px;width:26px;fill:orange;" class="chart2-bar"><title>Orange: 14,000Kg</title></rect> <rect style="x:76px;y:37px;height:25px;width:26px;fill:orange;" class="chart2-bar"><title>Orange: 33,000Kg</title></rect> <rect style="x:112px;y:65px;height:3px;width:26px;fill:orange;" class="chart2-bar"><title>Orange: 5,000Kg</title></rect> <rect style="x:148px;y:71px;height:15px;width:26px;fill:orange;" class="chart2-bar"><title>Orange: 20,000Kg</title></rect> <rect style="x:184px;y:68px;height:7px;width:26px;fill:orange;" class="chart2-bar"><title>Orange: 10,000Kg</title></rect> </svg>

Before
During
After
Post mortem
Blah
Bloh
  •   Apple
  •   Banana
  •   Orange


before (Module:Chart) after (this module)
100
200
300
400
500
600
700
2000
2005
2010
2015
  •   Hydro
  •   Wind
  •   Wood
  •   Other biomass
  •   Solar
  •   Geothermal
Renewable electricity generation 1998-2017
Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.
 
700
 
600
 
500
 
400
 
300
 
200
 
100

<svg style="height:170px;width:570px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:3px;y:91px;height:78px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 323.3TWh</title></rect> <rect style="x:31px;y:92px;height:77px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 319.5TWh</title></rect> <rect style="x:59px;y:103px;height:66px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 275.6TWh</title></rect> <rect style="x:87px;y:117px;height:52px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 217TWh</title></rect> <rect style="x:115px;y:106px;height:63px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 264.3TWh</title></rect> <rect style="x:143px;y:103px;height:66px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 275.8TWh</title></rect> <rect style="x:171px;y:105px;height:64px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 268.4TWh</title></rect> <rect style="x:199px;y:104px;height:65px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 270.3TWh</title></rect> <rect style="x:227px;y:100px;height:69px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 289.2TWh</title></rect> <rect style="x:255px;y:110px;height:59px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 247.5TWh</title></rect> <rect style="x:283px;y:108px;height:61px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 254.8TWh</title></rect> <rect style="x:311px;y:104px;height:65px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 273.4TWh</title></rect> <rect style="x:339px;y:107px;height:62px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 260.2TWh</title></rect> <rect style="x:367px;y:92px;height:77px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 319.4TWh</title></rect> <rect style="x:395px;y:103px;height:66px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 276.24TWh</title></rect> <rect style="x:423px;y:105px;height:64px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 268.57TWh</title></rect> <rect style="x:451px;y:107px;height:62px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 258.75TWh</title></rect> <rect style="x:479px;y:110px;height:59px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 249.08TWh</title></rect> <rect style="x:507px;y:105px;height:64px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 265.83TWh</title></rect> <rect style="x:535px;y:97px;height:72px;width:20px;fill:blue;" class="chart2-bar"><title>Hydro: 300.05TWh</title></rect> <rect style="x:3px;y:91px;height:0px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 3TWh</title></rect> <rect style="x:31px;y:92px;height:0px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 4.5TWh</title></rect> <rect style="x:59px;y:103px;height:0px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 5.6TWh</title></rect> <rect style="x:87px;y:116px;height:1px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 6.7TWh</title></rect> <rect style="x:115px;y:103px;height:2px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 10.4TWh</title></rect> <rect style="x:143px;y:101px;height:2px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 11.2TWh</title></rect> <rect style="x:171px;y:102px;height:2px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 14.1TWh</title></rect> <rect style="x:199px;y:101px;height:3px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 17.8TWh</title></rect> <rect style="x:227px;y:94px;height:5px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 26.6TWh</title></rect> <rect style="x:255px;y:102px;height:7px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 34.5TWh</title></rect> <rect style="x:283px;y:96px;height:12px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 55.4TWh</title></rect> <rect style="x:311px;y:86px;height:17px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 73.9TWh</title></rect> <rect style="x:339px;y:84px;height:22px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 94.7TWh</title></rect> <rect style="x:367px;y:64px;height:28px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 120.2TWh</title></rect> <rect style="x:395px;y:69px;height:33px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 140.82TWh</title></rect> <rect style="x:423px;y:64px;height:40px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 167.84TWh</title></rect> <rect style="x:451px;y:64px;height:43px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 181.79TWh</title></rect> <rect style="x:479px;y:64px;height:45px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 190.72TWh</title></rect> <rect style="x:507px;y:51px;height:54px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 226.87TWh</title></rect> <rect style="x:535px;y:36px;height:61px;width:20px;fill:green;" class="chart2-bar"><title>Wind: 254.25TWh</title></rect> <rect style="x:3px;y:82px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 36.3TWh</title></rect> <rect style="x:31px;y:83px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37TWh</title></rect> <rect style="x:59px;y:93px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37.6TWh</title></rect> <rect style="x:87px;y:107px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 35.2TWh</title></rect> <rect style="x:115px;y:95px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 38.7TWh</title></rect> <rect style="x:143px;y:92px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37.5TWh</title></rect> <rect style="x:171px;y:93px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 38.1TWh</title></rect> <rect style="x:199px;y:92px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 38.9TWh</title></rect> <rect style="x:227px;y:85px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 38.8TWh</title></rect> <rect style="x:255px;y:93px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 39TWh</title></rect> <rect style="x:283px;y:86px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37.3TWh</title></rect> <rect style="x:311px;y:77px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 36.1TWh</title></rect> <rect style="x:339px;y:75px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37.2TWh</title></rect> <rect style="x:367px;y:55px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37.4TWh</title></rect> <rect style="x:395px;y:60px;height:8px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 37.8TWh</title></rect> <rect style="x:423px;y:55px;height:9px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 39.94TWh</title></rect> <rect style="x:451px;y:54px;height:9px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 43.05TWh</title></rect> <rect style="x:479px;y:54px;height:9px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 41.93TWh</title></rect> <rect style="x:507px;y:41px;height:9px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 40.5TWh</title></rect> <rect style="x:535px;y:25px;height:10px;width:20px;fill:orange;" class="chart2-bar"><title>Wood: 43.28TWh</title></rect> <rect style="x:3px;y:77px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 22.4TWh</title></rect> <rect style="x:31px;y:78px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 22.6TWh</title></rect> <rect style="x:59px;y:87px;height:5px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 23.1TWh</title></rect> <rect style="x:87px;y:104px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 14.5TWh</title></rect> <rect style="x:115px;y:90px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 15TWh</title></rect> <rect style="x:143px;y:88px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 15.8TWh</title></rect> <rect style="x:171px;y:89px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 15.4TWh</title></rect> <rect style="x:199px;y:87px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 15.4TWh</title></rect> <rect style="x:227px;y:80px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 16.1TWh</title></rect> <rect style="x:255px;y:89px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 16.5TWh</title></rect> <rect style="x:283px;y:82px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 17.7TWh</title></rect> <rect style="x:311px;y:73px;height:3px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 18.4TWh</title></rect> <rect style="x:339px;y:70px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 18.9TWh</title></rect> <rect style="x:367px;y:50px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 19.2TWh</title></rect> <rect style="x:395px;y:55px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 19.82TWh</title></rect> <rect style="x:423px;y:50px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 20.83TWh</title></rect> <rect style="x:451px;y:48px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 21.27TWh</title></rect> <rect style="x:479px;y:49px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 21.7TWh</title></rect> <rect style="x:507px;y:36px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 22.07TWh</title></rect> <rect style="x:535px;y:20px;height:4px;width:20px;fill:grey;" class="chart2-bar"><title>Other biomass: 20.77TWh</title></rect> <rect style="x:3px;y:77px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.502TWh</title></rect> <rect style="x:31px;y:77px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.495TWh</title></rect> <rect style="x:59px;y:87px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.493TWh</title></rect> <rect style="x:87px;y:104px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.543TWh</title></rect> <rect style="x:115px;y:91px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.555TWh</title></rect> <rect style="x:143px;y:88px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.534TWh</title></rect> <rect style="x:171px;y:89px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.575TWh</title></rect> <rect style="x:199px;y:87px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.55TWh</title></rect> <rect style="x:227px;y:80px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.508TWh</title></rect> <rect style="x:255px;y:89px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.612TWh</title></rect> <rect style="x:283px;y:82px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.864TWh</title></rect> <rect style="x:311px;y:73px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 0.891TWh</title></rect> <rect style="x:339px;y:71px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 1.212TWh</title></rect> <rect style="x:367px;y:50px;height:-1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 1.814TWh</title></rect> <rect style="x:395px;y:54px;height:0px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 4.33TWh</title></rect> <rect style="x:423px;y:48px;height:1px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 9.04TWh</title></rect> <rect style="x:451px;y:44px;height:3px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 18.32TWh</title></rect> <rect style="x:479px;y:42px;height:5px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 24.89TWh</title></rect> <rect style="x:507px;y:27px;height:8px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 36.75TWh</title></rect> <rect style="x:535px;y:7px;height:12px;width:20px;fill:yellow;" class="chart2-bar"><title>Solar: 52.96TWh</title></rect> <rect style="x:3px;y:73px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.8TWh</title></rect> <rect style="x:31px;y:73px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.8TWh</title></rect> <rect style="x:59px;y:84px;height:2px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.1TWh</title></rect> <rect style="x:87px;y:101px;height:2px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 13.7TWh</title></rect> <rect style="x:115px;y:87px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.5TWh</title></rect> <rect style="x:143px;y:85px;height:2px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.4TWh</title></rect> <rect style="x:171px;y:85px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.8TWh</title></rect> <rect style="x:199px;y:83px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.7TWh</title></rect> <rect style="x:227px;y:76px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.6TWh</title></rect> <rect style="x:255px;y:84px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.6TWh</title></rect> <rect style="x:283px;y:78px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 14.8TWh</title></rect> <rect style="x:311px;y:69px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15TWh</title></rect> <rect style="x:339px;y:66px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15.2TWh</title></rect> <rect style="x:367px;y:46px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15.3TWh</title></rect> <rect style="x:395px;y:50px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15.56TWh</title></rect> <rect style="x:423px;y:44px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15.78TWh</title></rect> <rect style="x:451px;y:39px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 16.63TWh</title></rect> <rect style="x:479px;y:38px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15.92TWh</title></rect> <rect style="x:507px;y:23px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 17.42TWh</title></rect> <rect style="x:535px;y:3px;height:3px;width:20px;fill:red;" class="chart2-bar"><title>Geothermal: 15.98TWh</title></rect> </svg>

2000
2005
2010
2015
  •   Hydro
  •   Wind
  •   Wood
  •   Other biomass
  •   Solar
  •   Geothermal
Renewable electricity generation 1998-2017



Rocket configurations

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
20
 
15
 
10
 
5

<svg style="height:240px;width:390px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:4.5px;y:216px;height:23px;width:32px;fill:SteelBlue;" class="chart2-bar"><title>Falcon 9 v1.0: 2</title></rect> <rect style="x:90.5px;y:216px;height:23px;width:32px;fill:SteelBlue;" class="chart2-bar"><title>Falcon 9 v1.0: 2</title></rect> <rect style="x:133.5px;y:228px;height:11px;width:32px;fill:SteelBlue;" class="chart2-bar"><title>Falcon 9 v1.0: 1</title></rect> <rect style="x:133.5px;y:204px;height:23px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>Falcon 9 v1.1: 2</title></rect> <rect style="x:176.5px;y:168px;height:71px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>Falcon 9 v1.1: 6</title></rect> <rect style="x:219.5px;y:168px;height:71px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>Falcon 9 v1.1: 6</title></rect> <rect style="x:262.5px;y:228px;height:11px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>Falcon 9 v1.1: 1</title></rect> <rect style="x:219.5px;y:156px;height:11px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Falcon 9 Full Thrust: 1</title></rect> <rect style="x:262.5px;y:132px;height:95px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Falcon 9 Full Thrust: 8</title></rect> <rect style="x:305.5px;y:84px;height:155px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Falcon 9 Full Thrust: 13</title></rect> <rect style="x:348.5px;y:204px;height:35px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Falcon 9 Full Thrust: 3</title></rect> <rect style="x:305.5px;y:24px;height:59px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>Falcon 9 FT (reused): 5</title></rect> <rect style="x:348.5px;y:120px;height:83px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>Falcon 9 FT (reused): 7</title></rect> <rect style="x:348.5px;y:84px;height:35px;width:32px;fill:Teal;" class="chart2-bar"><title>Falcon 9 Block 5: 3</title></rect> <rect style="x:348.5px;y:72px;height:11px;width:32px;fill:Gold;" class="chart2-bar"><title>Falcon Heavy: 1</title></rect> </svg>

Launch sites

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
20
 
15
 
10
 
5

<svg style="height:240px;width:390px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:4.5px;y:216px;height:23px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 2</title></rect> <rect style="x:90.5px;y:216px;height:23px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 2</title></rect> <rect style="x:133.5px;y:216px;height:23px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 2</title></rect> <rect style="x:176.5px;y:168px;height:71px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 6</title></rect> <rect style="x:219.5px;y:156px;height:83px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 7</title></rect> <rect style="x:262.5px;y:144px;height:95px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 8</title></rect> <rect style="x:305.5px;y:228px;height:11px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 1</title></rect> <rect style="x:348.5px;y:144px;height:95px;width:32px;fill:Goldenrod;" class="chart2-bar"><title>Cape Canaveral LC-40: 8</title></rect> <rect style="x:305.5px;y:84px;height:143px;width:32px;fill:Chocolate;" class="chart2-bar"><title>Kennedy LC-39A: 12</title></rect> <rect style="x:348.5px;y:120px;height:23px;width:32px;fill:Chocolate;" class="chart2-bar"><title>Kennedy LC-39A: 2</title></rect> <rect style="x:133.5px;y:204px;height:11px;width:32px;fill:MediumPurple;" class="chart2-bar"><title>Vandenberg SLC-4E: 1</title></rect> <rect style="x:262.5px;y:132px;height:11px;width:32px;fill:MediumPurple;" class="chart2-bar"><title>Vandenberg SLC-4E: 1</title></rect> <rect style="x:305.5px;y:24px;height:59px;width:32px;fill:MediumPurple;" class="chart2-bar"><title>Vandenberg SLC-4E: 5</title></rect> <rect style="x:348.5px;y:72px;height:47px;width:32px;fill:MediumPurple;" class="chart2-bar"><title>Vandenberg SLC-4E: 4</title></rect> </svg>

2010
'11
'12
'13
'14
'15
'16
'17
'18

Launch outcomes

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
20
 
15
 
10
 
5

<svg style="height:240px;width:390px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:262.5px;y:228px;height:11px;width:32px;fill:Black;" class="chart2-bar"><title>Loss before launch: 1</title></rect> <rect style="x:219.5px;y:228px;height:11px;width:32px;fill:FireBrick;" class="chart2-bar"><title>Loss during flight: 1</title></rect> <rect style="x:90.5px;y:228px;height:11px;width:32px;fill:Orange;" class="chart2-bar"><title>Partial failure: 1</title></rect> <rect style="x:4.5px;y:216px;height:23px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 2</title></rect> <rect style="x:90.5px;y:216px;height:11px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 1</title></rect> <rect style="x:133.5px;y:204px;height:35px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 3</title></rect> <rect style="x:176.5px;y:168px;height:71px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 6</title></rect> <rect style="x:219.5px;y:156px;height:71px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 6</title></rect> <rect style="x:262.5px;y:132px;height:95px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 8</title></rect> <rect style="x:305.5px;y:24px;height:215px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 18</title></rect> <rect style="x:348.5px;y:72px;height:167px;width:32px;fill:ForestGreen;" class="chart2-bar"><title>Success: 14</title></rect> </svg>

2010
'11
'12
'13
'14
'15
'16
'17
'18
  •   Loss before launch
  •   Loss during flight
  •   Partial failure
  •   Success

Booster landings

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
20
 
15
 
10
 
5

<svg style="height:240px;width:390px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:219.5px;y:216px;height:23px;width:32px;fill:FireBrick;" class="chart2-bar"><title>Drone ship failure: 2</title></rect> <rect style="x:262.5px;y:204px;height:35px;width:32px;fill:FireBrick;" class="chart2-bar"><title>Drone ship failure: 3</title></rect> <rect style="x:348.5px;y:228px;height:11px;width:32px;fill:FireBrick;" class="chart2-bar"><title>Drone ship failure: 1</title></rect> <rect style="x:133.5px;y:228px;height:11px;width:32px;fill:LightSalmon;" class="chart2-bar"><title>Ocean failure: 1</title></rect> <rect style="x:176.5px;y:228px;height:11px;width:32px;fill:LightSalmon;" class="chart2-bar"><title>Ocean failure: 1</title></rect> <rect style="x:4.5px;y:216px;height:23px;width:32px;fill:Gold;" class="chart2-bar"><title>Parachutes failure: 2</title></rect> <rect style="x:219.5px;y:204px;height:11px;width:32px;fill:SeaGreen;" class="chart2-bar"><title>Ground pad success: 1</title></rect> <rect style="x:262.5px;y:192px;height:11px;width:32px;fill:SeaGreen;" class="chart2-bar"><title>Ground pad success: 1</title></rect> <rect style="x:305.5px;y:168px;height:71px;width:32px;fill:SeaGreen;" class="chart2-bar"><title>Ground pad success: 6</title></rect> <rect style="x:348.5px;y:192px;height:35px;width:32px;fill:SeaGreen;" class="chart2-bar"><title>Ground pad success: 3</title></rect> <rect style="x:262.5px;y:144px;height:47px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Drone ship success: 4</title></rect> <rect style="x:305.5px;y:72px;height:95px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Drone ship success: 8</title></rect> <rect style="x:348.5px;y:144px;height:47px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>Drone ship success: 4</title></rect> <rect style="x:176.5px;y:204px;height:23px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>Ocean touchdown: 2</title></rect> <rect style="x:219.5px;y:192px;height:11px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>Ocean touchdown: 1</title></rect> <rect style="x:305.5px;y:60px;height:11px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>Ocean touchdown: 1</title></rect> <rect style="x:348.5px;y:132px;height:11px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>Ocean touchdown: 1</title></rect> <rect style="x:90.5px;y:216px;height:23px;width:32px;fill:LightGray;" class="chart2-bar"><title>No attempt: 2</title></rect> <rect style="x:133.5px;y:204px;height:23px;width:32px;fill:LightGray;" class="chart2-bar"><title>No attempt: 2</title></rect> <rect style="x:176.5px;y:168px;height:35px;width:32px;fill:LightGray;" class="chart2-bar"><title>No attempt: 3</title></rect> <rect style="x:219.5px;y:168px;height:23px;width:32px;fill:LightGray;" class="chart2-bar"><title>No attempt: 2</title></rect> <rect style="x:305.5px;y:24px;height:35px;width:32px;fill:LightGray;" class="chart2-bar"><title>No attempt: 3</title></rect> <rect style="x:348.5px;y:48px;height:83px;width:32px;fill:LightGray;" class="chart2-bar"><title>No attempt: 7</title></rect> </svg>

2010
'11
'12
'13
'14
'15
'16
'17
'18
  •   Ground pad failure
  •   Drone ship failure
  •   Ocean failure
  •   Parachutes failure
  •   Ground pad success
  •   Drone ship success
  •   Ocean touchdown
  •   No attempt


Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
15
 
12.5
 
10
 
7.5
 
5
 
2.5

<svg style="height:240px;width:390px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:4.5px;y:208px;height:31px;width:32px;fill:SteelBlue;" class="chart2-bar"><title>leg1: 2</title></rect> <rect style="x:90.5px;y:208px;height:31px;width:32px;fill:SteelBlue;" class="chart2-bar"><title>leg1: 2</title></rect> <rect style="x:133.5px;y:224px;height:15px;width:32px;fill:SteelBlue;" class="chart2-bar"><title>leg1: 1</title></rect> <rect style="x:133.5px;y:192px;height:31px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>leg2: 2</title></rect> <rect style="x:176.5px;y:144px;height:95px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>leg2: 6</title></rect> <rect style="x:219.5px;y:144px;height:95px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>leg2: 6</title></rect> <rect style="x:262.5px;y:224px;height:15px;width:32px;fill:LightSteelBlue;" class="chart2-bar"><title>leg2: 1</title></rect> <rect style="x:219.5px;y:128px;height:15px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>leg3: 1</title></rect> <rect style="x:262.5px;y:96px;height:127px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>leg3: 8</title></rect> <rect style="x:305.5px;y:128px;height:111px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>leg3: 7</title></rect> <rect style="x:348.5px;y:192px;height:47px;width:32px;fill:MediumBlue;" class="chart2-bar"><title>leg3: 3</title></rect> <rect style="x:305.5px;y:112px;height:15px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>leg4: 1</title></rect> <rect style="x:348.5px;y:80px;height:111px;width:32px;fill:CornflowerBlue;" class="chart2-bar"><title>leg4: 7</title></rect> <rect style="x:348.5px;y:32px;height:47px;width:32px;fill:Teal;" class="chart2-bar"><title>leg5: 3</title></rect> <rect style="x:348.5px;y:16px;height:15px;width:32px;fill:Gold;" class="chart2-bar"><title>leg6: 1</title></rect> </svg>

  •   leg1
  •   leg2
  •   leg3
  •   leg4
  •   leg5
  •   leg6


Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
60
 
50
 
40
 
30
 
20
 
10

<svg style="height:270px;width:170px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:4.5px;y:90px;height:179px;width:31px;fill:green;" class="chart2-bar"><title>Apple: 40</title></rect> <rect style="x:46.5px;y:45px;height:224px;width:31px;fill:green;" class="chart2-bar"><title>Apple: 50</title></rect> <rect style="x:88.5px;y:0px;height:269px;width:31px;fill:green;" class="chart2-bar"><title>Apple: 60</title></rect> <rect style="x:130.5px;y:180px;height:89px;width:31px;fill:green;" class="chart2-bar"><title>Apple: 20</title></rect> </svg>

Before
During
After
Post mortem

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
100
 
90
 
80
 
70
 
60
 
50
 
40
 
30
 
20
 
10

<svg style="height:270px;width:470px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:0px;y:0px;height:269px;width:35px;fill:green;" class="chart2-bar"><title>Apple: 100</title></rect> <rect style="x:117px;y:135px;height:134px;width:35px;fill:green;" class="chart2-bar"><title>Apple: 50</title></rect> <rect style="x:234px;y:108px;height:161px;width:35px;fill:green;" class="chart2-bar"><title>Apple: 60</title></rect> <rect style="x:351px;y:216px;height:53px;width:35px;fill:green;" class="chart2-bar"><title>Apple: 20</title></rect> <rect style="x:49px;y:216px;height:53px;width:35px;fill:yellow;" class="chart2-bar"><title>tooltip 1</title></rect> <rect style="x:166px;y:108px;height:161px;width:35px;fill:yellow;" class="chart2-bar"><title>tooltip 2</title></rect> <rect style="x:283px;y:238px;height:31px;width:35px;fill:yellow;" class="chart2-bar"><title>tooltip 3</title></rect> <rect style="x:400px;y:151px;height:118px;width:35px;fill:yellow;" class="chart2-bar"><title>tooltip 4</title></rect> </svg>

Before
During
After
very very long description just as an example
  •   Apple
  •   Banana


Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
60
 
50
 
40
 
30
 
20
 
10

<svg style="height:270px;width:470px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:0px;y:90px;height:179px;width:22px;fill:green;" class="chart2-bar"><title>Apple: 40</title></rect> <rect style="x:117px;y:45px;height:224px;width:22px;fill:green;" class="chart2-bar"><title>Apple: 50</title></rect> <rect style="x:234px;y:0px;height:269px;width:22px;fill:green;" class="chart2-bar"><title>Apple: 60</title></rect> <rect style="x:351px;y:180px;height:89px;width:22px;fill:green;" class="chart2-bar"><title>Apple: 20</title></rect> <rect style="x:33px;y:180px;height:89px;width:22px;fill:yellow;" class="chart2-bar"><title>tooltip 1</title></rect> <rect style="x:150px;y:0px;height:269px;width:22px;fill:yellow;" class="chart2-bar"><title>tooltip 2</title></rect> <rect style="x:267px;y:216px;height:53px;width:22px;fill:yellow;" class="chart2-bar"><title>tooltip 3</title></rect> <rect style="x:384px;y:72px;height:197px;width:22px;fill:yellow;" class="chart2-bar"><title>tooltip 4</title></rect> <rect style="x:66px;y:22px;height:247px;width:22px;fill:orange;" class="chart2-bar"><title>Orange: 55</title></rect> <rect style="x:183px;y:207px;height:62px;width:22px;fill:orange;" class="chart2-bar"><title>Orange: 14</title></rect> <rect style="x:300px;y:121px;height:148px;width:22px;fill:orange;" class="chart2-bar"><title>Orange: 33</title></rect> <rect style="x:417px;y:247px;height:22px;width:22px;fill:orange;" class="chart2-bar"><title>Orange: 5</title></rect> </svg>

Before
During
After
Post mortem
  •   Apple
  •   Banana
  •   Orange

Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
150
 
125
 
100
 
75
 
50
 
25

<svg style="height:170px;width:270px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:14.5px;y:125px;height:44px;width:36px;fill:green;" class="chart2-bar"><title>Apple: 40Kg</title></rect> <rect style="x:81.5px;y:113px;height:56px;width:36px;fill:green;" class="chart2-bar"><title>Apple: 50Kg</title></rect> <rect style="x:148.5px;y:102px;height:67px;width:36px;fill:green;" class="chart2-bar"><title>Apple: 60Kg</title></rect> <rect style="x:215.5px;y:147px;height:22px;width:36px;fill:green;" class="chart2-bar"><title>Apple: 20Kg</title></rect> <rect style="x:14.5px;y:102px;height:22px;width:36px;fill:yellow;" class="chart2-bar"><title>Banana: 20Kg</title></rect> <rect style="x:81.5px;y:46px;height:67px;width:36px;fill:yellow;" class="chart2-bar"><title>Banana: 60Kg</title></rect> <rect style="x:148.5px;y:88px;height:13px;width:36px;fill:yellow;" class="chart2-bar"><title>Banana: 12Kg</title></rect> <rect style="x:215.5px;y:98px;height:49px;width:36px;fill:yellow;" class="chart2-bar"><title>Banana: 44Kg</title></rect> <rect style="x:14.5px;y:40px;height:61px;width:36px;fill:orange;" class="chart2-bar"><title>Orange: 55Kg</title></rect> <rect style="x:81.5px;y:30px;height:15px;width:36px;fill:orange;" class="chart2-bar"><title>Orange: 14Kg</title></rect> <rect style="x:148.5px;y:52px;height:36px;width:36px;fill:orange;" class="chart2-bar"><title>Orange: 33Kg</title></rect> <rect style="x:215.5px;y:92px;height:5px;width:36px;fill:orange;" class="chart2-bar"><title>Orange: 5Kg</title></rect> </svg>

Before
During
After
Post mortem
  •   Apple
  •   Banana
  •   Orange


Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
150
 
125
 
100
 
75
 
50
 
25

<svg style="height:470px;width:770px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:23.5px;y:467px;height:2px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $1 billion</title></rect> <rect style="x:108.5px;y:464px;height:5px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $2 billion</title></rect> <rect style="x:193.5px;y:461px;height:8px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $3 billion</title></rect> <rect style="x:278.5px;y:457px;height:12px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $4 billion</title></rect> <rect style="x:363.5px;y:454px;height:15px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $5 billion</title></rect> <rect style="x:448.5px;y:457px;height:12px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $4 billion</title></rect> <rect style="x:533.5px;y:461px;height:8px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $3 billion</title></rect> <rect style="x:618.5px;y:464px;height:5px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $2 billion</title></rect> <rect style="x:703.5px;y:467px;height:2px;width:36px;fill:Silver;" class="chart2-bar"><title>Alabama: $1 billion</title></rect> <rect style="x:23.5px;y:464px;height:2px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $1 billion</title></rect> <rect style="x:108.5px;y:458px;height:5px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $2 billion</title></rect> <rect style="x:193.5px;y:452px;height:8px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $3 billion</title></rect> <rect style="x:278.5px;y:445px;height:12px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $4 billion</title></rect> <rect style="x:363.5px;y:439px;height:15px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $5 billion</title></rect> <rect style="x:448.5px;y:445px;height:12px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $4 billion</title></rect> <rect style="x:533.5px;y:452px;height:8px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $3 billion</title></rect> <rect style="x:618.5px;y:458px;height:5px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $2 billion</title></rect> <rect style="x:703.5px;y:464px;height:2px;width:36px;fill:Gray;" class="chart2-bar"><title>Alaska: $1 billion</title></rect> <rect style="x:23.5px;y:461px;height:2px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $1 billion</title></rect> <rect style="x:108.5px;y:452px;height:5px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $2 billion</title></rect> <rect style="x:193.5px;y:443px;height:8px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $3 billion</title></rect> <rect style="x:278.5px;y:432px;height:12px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $4 billion</title></rect> <rect style="x:363.5px;y:423px;height:15px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $5 billion</title></rect> <rect style="x:448.5px;y:432px;height:12px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $4 billion</title></rect> <rect style="x:533.5px;y:443px;height:8px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $3 billion</title></rect> <rect style="x:618.5px;y:452px;height:5px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $2 billion</title></rect> <rect style="x:703.5px;y:461px;height:2px;width:36px;fill:Black;" class="chart2-bar"><title>Arizona: $1 billion</title></rect> <rect style="x:23.5px;y:458px;height:2px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $1 billion</title></rect> <rect style="x:108.5px;y:446px;height:5px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $2 billion</title></rect> <rect style="x:193.5px;y:433px;height:8px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $3 billion</title></rect> <rect style="x:278.5px;y:420px;height:12px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $4 billion</title></rect> <rect style="x:363.5px;y:407px;height:15px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $5 billion</title></rect> <rect style="x:448.5px;y:420px;height:12px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $4 billion</title></rect> <rect style="x:533.5px;y:433px;height:8px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $3 billion</title></rect> <rect style="x:618.5px;y:446px;height:5px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $2 billion</title></rect> <rect style="x:703.5px;y:458px;height:2px;width:36px;fill:Red;" class="chart2-bar"><title>Arkansas: $1 billion</title></rect> <rect style="x:23.5px;y:455px;height:2px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $1 billion</title></rect> <rect style="x:108.5px;y:439px;height:5px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $2 billion</title></rect> <rect style="x:193.5px;y:424px;height:8px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $3 billion</title></rect> <rect style="x:278.5px;y:407px;height:12px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $4 billion</title></rect> <rect style="x:363.5px;y:392px;height:15px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $5 billion</title></rect> <rect style="x:448.5px;y:407px;height:12px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $4 billion</title></rect> <rect style="x:533.5px;y:424px;height:8px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $3 billion</title></rect> <rect style="x:618.5px;y:439px;height:5px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $2 billion</title></rect> <rect style="x:703.5px;y:455px;height:2px;width:36px;fill:Maroon;" class="chart2-bar"><title>California: $1 billion</title></rect> <rect style="x:23.5px;y:452px;height:2px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $1 billion</title></rect> <rect style="x:108.5px;y:433px;height:5px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $2 billion</title></rect> <rect style="x:193.5px;y:414px;height:8px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $3 billion</title></rect> <rect style="x:278.5px;y:395px;height:12px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $4 billion</title></rect> <rect style="x:363.5px;y:376px;height:15px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $5 billion</title></rect> <rect style="x:448.5px;y:395px;height:12px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $4 billion</title></rect> <rect style="x:533.5px;y:414px;height:8px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $3 billion</title></rect> <rect style="x:618.5px;y:433px;height:5px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $2 billion</title></rect> <rect style="x:703.5px;y:452px;height:2px;width:36px;fill:Yellow;" class="chart2-bar"><title>Colorado: $1 billion</title></rect> <rect style="x:23.5px;y:449px;height:2px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $1 billion</title></rect> <rect style="x:108.5px;y:427px;height:5px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $2 billion</title></rect> <rect style="x:193.5px;y:405px;height:8px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $3 billion</title></rect> <rect style="x:278.5px;y:382px;height:12px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $4 billion</title></rect> <rect style="x:363.5px;y:360px;height:15px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $5 billion</title></rect> <rect style="x:448.5px;y:382px;height:12px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $4 billion</title></rect> <rect style="x:533.5px;y:405px;height:8px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $3 billion</title></rect> <rect style="x:618.5px;y:427px;height:5px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $2 billion</title></rect> <rect style="x:703.5px;y:449px;height:2px;width:36px;fill:Olive;" class="chart2-bar"><title>Connecticut: $1 billion</title></rect> <rect style="x:23.5px;y:446px;height:2px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $1 billion</title></rect> <rect style="x:108.5px;y:421px;height:5px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $2 billion</title></rect> <rect style="x:193.5px;y:396px;height:8px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $3 billion</title></rect> <rect style="x:278.5px;y:370px;height:12px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $4 billion</title></rect> <rect style="x:363.5px;y:345px;height:15px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $5 billion</title></rect> <rect style="x:448.5px;y:370px;height:12px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $4 billion</title></rect> <rect style="x:533.5px;y:396px;height:8px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $3 billion</title></rect> <rect style="x:618.5px;y:421px;height:5px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $2 billion</title></rect> <rect style="x:703.5px;y:446px;height:2px;width:36px;fill:Lime;" class="chart2-bar"><title>Delaware: $1 billion</title></rect> <rect style="x:23.5px;y:442px;height:2px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $1 billion</title></rect> <rect style="x:108.5px;y:414px;height:5px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $2 billion</title></rect> <rect style="x:193.5px;y:386px;height:8px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $3 billion</title></rect> <rect style="x:278.5px;y:357px;height:12px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $4 billion</title></rect> <rect style="x:363.5px;y:329px;height:15px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $5 billion</title></rect> <rect style="x:448.5px;y:357px;height:12px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $4 billion</title></rect> <rect style="x:533.5px;y:386px;height:8px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $3 billion</title></rect> <rect style="x:618.5px;y:414px;height:5px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $2 billion</title></rect> <rect style="x:703.5px;y:442px;height:2px;width:36px;fill:Green;" class="chart2-bar"><title>Florida: $1 billion</title></rect> <rect style="x:23.5px;y:439px;height:2px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $1 billion</title></rect> <rect style="x:108.5px;y:408px;height:5px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $2 billion</title></rect> <rect style="x:193.5px;y:377px;height:8px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $3 billion</title></rect> <rect style="x:278.5px;y:345px;height:12px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $4 billion</title></rect> <rect style="x:363.5px;y:313px;height:15px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $5 billion</title></rect> <rect style="x:448.5px;y:345px;height:12px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $4 billion</title></rect> <rect style="x:533.5px;y:377px;height:8px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $3 billion</title></rect> <rect style="x:618.5px;y:408px;height:5px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $2 billion</title></rect> <rect style="x:703.5px;y:439px;height:2px;width:36px;fill:Aqua;" class="chart2-bar"><title>Georgia: $1 billion</title></rect> <rect style="x:23.5px;y:436px;height:2px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $1 billion</title></rect> <rect style="x:108.5px;y:402px;height:5px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $2 billion</title></rect> <rect style="x:193.5px;y:367px;height:8px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $3 billion</title></rect> <rect style="x:278.5px;y:332px;height:12px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $4 billion</title></rect> <rect style="x:363.5px;y:298px;height:15px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $5 billion</title></rect> <rect style="x:448.5px;y:332px;height:12px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $4 billion</title></rect> <rect style="x:533.5px;y:367px;height:8px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $3 billion</title></rect> <rect style="x:618.5px;y:402px;height:5px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $2 billion</title></rect> <rect style="x:703.5px;y:436px;height:2px;width:36px;fill:Teal;" class="chart2-bar"><title>Hawaii: $1 billion</title></rect> <rect style="x:23.5px;y:433px;height:2px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $1 billion</title></rect> <rect style="x:108.5px;y:396px;height:5px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $2 billion</title></rect> <rect style="x:193.5px;y:358px;height:8px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $3 billion</title></rect> <rect style="x:278.5px;y:320px;height:12px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $4 billion</title></rect> <rect style="x:363.5px;y:282px;height:15px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $5 billion</title></rect> <rect style="x:448.5px;y:320px;height:12px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $4 billion</title></rect> <rect style="x:533.5px;y:358px;height:8px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $3 billion</title></rect> <rect style="x:618.5px;y:396px;height:5px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $2 billion</title></rect> <rect style="x:703.5px;y:433px;height:2px;width:36px;fill:Blue;" class="chart2-bar"><title>Idaho: $1 billion</title></rect> <rect style="x:23.5px;y:430px;height:2px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $1 billion</title></rect> <rect style="x:108.5px;y:389px;height:5px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $2 billion</title></rect> <rect style="x:193.5px;y:349px;height:8px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $3 billion</title></rect> <rect style="x:278.5px;y:307px;height:12px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $4 billion</title></rect> <rect style="x:363.5px;y:266px;height:15px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $5 billion</title></rect> <rect style="x:448.5px;y:307px;height:12px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $4 billion</title></rect> <rect style="x:533.5px;y:349px;height:8px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $3 billion</title></rect> <rect style="x:618.5px;y:389px;height:5px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $2 billion</title></rect> <rect style="x:703.5px;y:430px;height:2px;width:36px;fill:Navy;" class="chart2-bar"><title>Illinois: $1 billion</title></rect> <rect style="x:23.5px;y:427px;height:2px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $1 billion</title></rect> <rect style="x:108.5px;y:383px;height:5px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $2 billion</title></rect> <rect style="x:193.5px;y:339px;height:8px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $3 billion</title></rect> <rect style="x:278.5px;y:295px;height:12px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $4 billion</title></rect> <rect style="x:363.5px;y:251px;height:15px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $5 billion</title></rect> <rect style="x:448.5px;y:295px;height:12px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $4 billion</title></rect> <rect style="x:533.5px;y:339px;height:8px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $3 billion</title></rect> <rect style="x:618.5px;y:383px;height:5px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $2 billion</title></rect> <rect style="x:703.5px;y:427px;height:2px;width:36px;fill:Fuchsia;" class="chart2-bar"><title>Indiana: $1 billion</title></rect> <rect style="x:23.5px;y:424px;height:2px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $1 billion</title></rect> <rect style="x:108.5px;y:377px;height:5px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $2 billion</title></rect> <rect style="x:193.5px;y:330px;height:8px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $3 billion</title></rect> <rect style="x:278.5px;y:282px;height:12px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $4 billion</title></rect> <rect style="x:363.5px;y:235px;height:15px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $5 billion</title></rect> <rect style="x:448.5px;y:282px;height:12px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $4 billion</title></rect> <rect style="x:533.5px;y:330px;height:8px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $3 billion</title></rect> <rect style="x:618.5px;y:377px;height:5px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $2 billion</title></rect> <rect style="x:703.5px;y:424px;height:2px;width:36px;fill:Purple;" class="chart2-bar"><title>Iowa: $1 billion</title></rect> <rect style="x:23.5px;y:420px;height:2px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $1 billion</title></rect> <rect style="x:108.5px;y:370px;height:5px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $2 billion</title></rect> <rect style="x:193.5px;y:320px;height:8px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $3 billion</title></rect> <rect style="x:278.5px;y:269px;height:12px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $4 billion</title></rect> <rect style="x:363.5px;y:219px;height:15px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $5 billion</title></rect> <rect style="x:448.5px;y:269px;height:12px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $4 billion</title></rect> <rect style="x:533.5px;y:320px;height:8px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $3 billion</title></rect> <rect style="x:618.5px;y:370px;height:5px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $2 billion</title></rect> <rect style="x:703.5px;y:420px;height:2px;width:36px;fill:ForestGreen;" class="chart2-bar"><title>Kansas: $1 billion</title></rect> <rect style="x:23.5px;y:408px;height:2px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $1 billion</title></rect> <rect style="x:108.5px;y:345px;height:5px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $2 billion</title></rect> <rect style="x:193.5px;y:283px;height:8px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $3 billion</title></rect> <rect style="x:278.5px;y:219px;height:12px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $4 billion</title></rect> <rect style="x:363.5px;y:157px;height:15px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $5 billion</title></rect> <rect style="x:448.5px;y:219px;height:12px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $4 billion</title></rect> <rect style="x:533.5px;y:283px;height:8px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $3 billion</title></rect> <rect style="x:618.5px;y:345px;height:5px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $2 billion</title></rect> <rect style="x:703.5px;y:408px;height:2px;width:36px;fill:DarkOliveGreen;" class="chart2-bar"><title>Maryland: $1 billion</title></rect> <rect style="x:23.5px;y:417px;height:2px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $1 billion</title></rect> <rect style="x:108.5px;y:364px;height:5px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $2 billion</title></rect> <rect style="x:193.5px;y:311px;height:8px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $3 billion</title></rect> <rect style="x:278.5px;y:257px;height:12px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $4 billion</title></rect> <rect style="x:363.5px;y:204px;height:15px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $5 billion</title></rect> <rect style="x:448.5px;y:257px;height:12px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $4 billion</title></rect> <rect style="x:533.5px;y:311px;height:8px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $3 billion</title></rect> <rect style="x:618.5px;y:364px;height:5px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $2 billion</title></rect> <rect style="x:703.5px;y:417px;height:2px;width:36px;fill:Tomato;" class="chart2-bar"><title>Kentucky: $1 billion</title></rect> <rect style="x:23.5px;y:405px;height:2px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $1 billion</title></rect> <rect style="x:108.5px;y:339px;height:5px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $2 billion</title></rect> <rect style="x:193.5px;y:273px;height:8px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $3 billion</title></rect> <rect style="x:278.5px;y:207px;height:12px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $4 billion</title></rect> <rect style="x:363.5px;y:141px;height:15px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $5 billion</title></rect> <rect style="x:448.5px;y:207px;height:12px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $4 billion</title></rect> <rect style="x:533.5px;y:273px;height:8px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $3 billion</title></rect> <rect style="x:618.5px;y:339px;height:5px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $2 billion</title></rect> <rect style="x:703.5px;y:405px;height:2px;width:36px;fill:MediumVioletRed;" class="chart2-bar"><title>Massachusetts: $1 billion</title></rect> <rect style="x:23.5px;y:414px;height:2px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $1 billion</title></rect> <rect style="x:108.5px;y:358px;height:5px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $2 billion</title></rect> <rect style="x:193.5px;y:302px;height:8px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $3 billion</title></rect> <rect style="x:278.5px;y:244px;height:12px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $4 billion</title></rect> <rect style="x:363.5px;y:188px;height:15px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $5 billion</title></rect> <rect style="x:448.5px;y:244px;height:12px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $4 billion</title></rect> <rect style="x:533.5px;y:302px;height:8px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $3 billion</title></rect> <rect style="x:618.5px;y:358px;height:5px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $2 billion</title></rect> <rect style="x:703.5px;y:414px;height:2px;width:36px;fill:LightSeaGreen;" class="chart2-bar"><title>Louisiana: $1 billion</title></rect> <rect style="x:23.5px;y:411px;height:2px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $1 billion</title></rect> <rect style="x:108.5px;y:352px;height:5px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $2 billion</title></rect> <rect style="x:193.5px;y:292px;height:8px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $3 billion</title></rect> <rect style="x:278.5px;y:232px;height:12px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $4 billion</title></rect> <rect style="x:363.5px;y:172px;height:15px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $5 billion</title></rect> <rect style="x:448.5px;y:232px;height:12px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $4 billion</title></rect> <rect style="x:533.5px;y:292px;height:8px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $3 billion</title></rect> <rect style="x:618.5px;y:352px;height:5px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $2 billion</title></rect> <rect style="x:703.5px;y:411px;height:2px;width:36px;fill:RosyBrown;" class="chart2-bar"><title>Maine: $1 billion</title></rect> </svg>

1920
1930
1940
1950
1960
1970
1990
2000
2010
  •   Alabama
  •   Alaska
  •   Arizona
  •   Arkansas
  •   California
  •   Colorado
  •   Connecticut
  •   Delaware
  •   Florida
  •   Georgia
  •   Hawaii
  •   Idaho
  •   Illinois
  •   Indiana
  •   Iowa
  •   Kansas
  •   Kentucky
  •   Louisiana
  •   Maine
  •   Maryland
  •   Massachusetts


Page Template:TemplateStyles sandbox/Ita140188/styles.css has no content.

 
60
 
50
 
40
 
30
 
20
 
10

<svg style="height:270px;width:470px;border-left:1px black solid;border-bottom:1px black solid;"> <rect style="x:1px;y:265px;height:4px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 1 Things</title></rect> <rect style="x:8px;y:261px;height:8px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 2 Things</title></rect> <rect style="x:15px;y:256px;height:13px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 3 Things</title></rect> <rect style="x:22px;y:252px;height:17px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 4 Things</title></rect> <rect style="x:29px;y:247px;height:22px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 5 Things</title></rect> <rect style="x:36px;y:243px;height:26px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 6 Things</title></rect> <rect style="x:43px;y:238px;height:31px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 7 Things</title></rect> <rect style="x:50px;y:234px;height:35px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 8 Things</title></rect> <rect style="x:57px;y:229px;height:40px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 9 Things</title></rect> <rect style="x:64px;y:225px;height:44px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 10 Things</title></rect> <rect style="x:71px;y:220px;height:49px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 11 Things</title></rect> <rect style="x:78px;y:216px;height:53px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 12 Things</title></rect> <rect style="x:85px;y:211px;height:58px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 13 Things</title></rect> <rect style="x:92px;y:207px;height:62px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 14 Things</title></rect> <rect style="x:99px;y:202px;height:67px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 15 Things</title></rect> <rect style="x:106px;y:198px;height:71px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 16 Things</title></rect> <rect style="x:113px;y:193px;height:76px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 17 Things</title></rect> <rect style="x:120px;y:189px;height:80px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 18 Things</title></rect> <rect style="x:127px;y:184px;height:85px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 19 Things</title></rect> <rect style="x:134px;y:180px;height:89px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 20 Things</title></rect> <rect style="x:141px;y:175px;height:94px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 21 Things</title></rect> <rect style="x:148px;y:171px;height:98px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 22 Things</title></rect> <rect style="x:155px;y:166px;height:103px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 23 Things</title></rect> <rect style="x:162px;y:162px;height:107px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 24 Things</title></rect> <rect style="x:169px;y:157px;height:112px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 25 Things</title></rect> <rect style="x:176px;y:153px;height:116px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 26 Things</title></rect> <rect style="x:183px;y:148px;height:121px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 27 Things</title></rect> <rect style="x:190px;y:144px;height:125px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 28 Things</title></rect> <rect style="x:197px;y:139px;height:130px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 29 Things</title></rect> <rect style="x:204px;y:135px;height:134px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 30 Things</title></rect> <rect style="x:211px;y:130px;height:139px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 31 Things</title></rect> <rect style="x:218px;y:126px;height:143px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 32 Things</title></rect> <rect style="x:225px;y:121px;height:148px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 33 Things</title></rect> <rect style="x:232px;y:117px;height:152px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 34 Things</title></rect> <rect style="x:239px;y:112px;height:157px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 35 Things</title></rect> <rect style="x:246px;y:108px;height:161px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 36 Things</title></rect> <rect style="x:253px;y:103px;height:166px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 37 Things</title></rect> <rect style="x:260px;y:99px;height:170px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 38 Things</title></rect> <rect style="x:267px;y:94px;height:175px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 39 Things</title></rect> <rect style="x:274px;y:90px;height:179px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 40 Things</title></rect> <rect style="x:281px;y:85px;height:184px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 41 Things</title></rect> <rect style="x:288px;y:81px;height:188px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 42 Things</title></rect> <rect style="x:295px;y:76px;height:193px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 43 Things</title></rect> <rect style="x:302px;y:72px;height:197px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 44 Things</title></rect> <rect style="x:309px;y:67px;height:202px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 45 Things</title></rect> <rect style="x:316px;y:63px;height:206px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 46 Things</title></rect> <rect style="x:323px;y:58px;height:211px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 47 Things</title></rect> <rect style="x:330px;y:54px;height:215px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 48 Things</title></rect> <rect style="x:337px;y:49px;height:220px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 49 Things</title></rect> <rect style="x:344px;y:45px;height:224px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 50 Things</title></rect> <rect style="x:351px;y:40px;height:229px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 51 Things</title></rect> <rect style="x:358px;y:36px;height:233px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 52 Things</title></rect> <rect style="x:365px;y:31px;height:238px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 53 Things</title></rect> <rect style="x:372px;y:27px;height:242px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 54 Things</title></rect> <rect style="x:379px;y:22px;height:247px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 55 Things</title></rect> <rect style="x:386px;y:18px;height:251px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 56 Things</title></rect> <rect style="x:393px;y:13px;height:256px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 57 Things</title></rect> <rect style="x:400px;y:9px;height:260px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 58 Things</title></rect> <rect style="x:407px;y:4px;height:265px;width:3px;fill:blue;" class="chart2-bar"><title>Some: 59 Things</title></rect> </svg>

1940
1950
1960
1970
1980
1990

--<source lang=lua>
--[[
    keywords are used for languages: they are the names of the actual
    parameters of the template
]]

local keywords = {
    barChart = 'bar chart',
    width = 'width',
    height = 'height',
    stack = 'stack',
    colors = 'colors',
    group = 'group',
    xlegend = 'x legends',
    tooltip = 'tooltip',
    accumulateTooltip = 'tooltip value accumulation',
    links = 'links',
    defcolor = 'default color',
    scalePerGroup = 'scale per group',
    unitsPrefix = 'units prefix',
    unitsSuffix = 'units suffix',
    groupNames = 'group names',
    hideGroupLegends = 'hide group legends',
    slices = 'slices',
    slice = 'slice',
    radius = 'radius',
    percent = 'percent',

} -- here is what you want to translate




function barChart( frame )
	
	
    local res = {}
    local args = frame.args -- can be changed to frame:getParent().args
    local values, xlegends, colors, tooltips, yscales = {}, {}, {}, {} ,{}, {}, {}
    local groupNames, unitsSuffix, unitsPrefix, links = {}, {}, {}, {}
    local width, height, stack, delimiter = 500, 350, false, args.delimiter or ':'
    local chartWidth, chartHeight, defcolor, scalePerGroup, accumulateTooltip

    local numGroups, numValues
    local scaleWidth

	local defColors = require "Module:Plotter/DefaultColors"
	local hideGroupLegends
	
	local function nulOrWhitespace( s )
	    return not s or mw.text.trim( s ) == ''
	end

	table.insert( res, frame:extensionTag{ name = 'templatestyles', args = { src = 'TemplateStyles sandbox/Ita140188/styles.css'} })


	function createGroupList( tab, legends, cols )
	    if #legends > 1 and not hideGroupLegends then
	        table.insert( tab, mw.text.tag( 'div', { style = string.format( "width:%spx;", chartWidth ) } ) )
	        local list = {}
	        local spanStyle = "padding:0 1em;background-color:%s;border:1px solid %s;margin-right:1em;-webkit-print-color-adjust:exact;"
	        for gi = 1, #legends do
	            local span = mw.text.tag( 'span', { style = string.format( spanStyle, cols[gi], cols[gi] ) }, '&nbsp;' ) .. ' '..  legends[gi]
	            table.insert( list, mw.text.tag( 'li', {}, span ) )
	        end
	        table.insert( tab,
	            mw.text.tag( 'ul',
	                {style="width:100%;list-style:none;-webkit-column-width:12em;-moz-column-width:12em;column-width:12em;"},
	                table.concat( list, '\n' )
	            )
	        )
	        table.insert( tab, '</div>' )
	    end
	end



    function validate()
        function asGroups( name, tab, toDuplicate, emptyOK )
            if #tab == 0 and not emptyOK then
                error( "must supply values for " .. keywords[name] )
            end
            if #tab == 1 and toDuplicate then
                for i = 2, numGroups do tab[i] = tab[1] end
            end
            if #tab > 0 and #tab ~= numGroups then
                error ( keywords[name] .. ' must contain the same number of items as the number of groups, but it contains ' .. #tab .. ' items and there are ' .. numGroups .. ' groups')
            end
        end

        -- do all sorts of validation here, so we can assume all params are good from now on.
        -- among other things, replace numerical values with mw.language:parseFormattedNumber() result


        chartHeight = height - 80
        numGroups = #values
        numValues = #values[1]
        defcolor = defcolor or 'blue'
        colors[1] = colors[1] or defcolor
        scaleWidth = scalePerGroup and 80 * numGroups or 30
        chartWidth = width -scaleWidth
        asGroups( 'unitsPrefix', unitsPrefix, true, true )
        asGroups( 'unitsSuffix', unitsSuffix, true, true )
        asGroups( 'colors', colors, true, true )
        asGroups( 'groupNames', groupNames, false, false )
        if stack and scalePerGroup then
            error( string.format( 'Illegal settings: %s and %s are incompatible.', keyword.stack, keyword.scalePerGroup ) )
        end
        for gi = 2, numGroups do
            if #values[gi] ~= numValues then error( keywords.group .. " " .. gi .. " does not have same number of values as " .. keywords.group .. " 1" ) end
        end
        if #xlegends ~= numValues then error( 'Illegal number of ' .. keywords.xlegend .. '. Should be exactly ' .. numValues ) end
    end

    function extractParams()
        function testone( keyword, key, val, tab )
            i = keyword == key and 0 or key:match( keyword .. "%s+(%d+)" )
            if not i then return end
            i = tonumber( i ) or error("Expect numerical index for key " .. keyword .. " instead of '" .. key .. "'")
            if i > 0 then tab[i] = {} end
            for s in mw.text.gsplit( val, '%s*' .. delimiter .. '%s*' ) do
                table.insert( i == 0 and tab or tab[i], s )
            end
            return true
        end

        for k, v in pairs( args ) do
            if k == keywords.width then
                width = tonumber( v )
                if not width or width < 200 then
                    error( 'Illegal width value (must be a number, and at least 200): ' .. v )
                end
            elseif k == keywords.height then
                height = tonumber( v )
                if not height or height < 200 then
                    error( 'Illegal height value (must be a number, and at least 200): ' .. v )
                end
            elseif k == keywords.stack then stack = true
            elseif k == keywords.scalePerGroup then scalePerGroup = true
            elseif k == keywords.defcolor then defcolor = v
            elseif k == keywords.accumulateTooltip then accumulateTooltip = not nulOrWhitespace( v )
            elseif k == keywords.hideGroupLegends then hideGroupLegends = not nulOrWhitespace( v )
            else
                for keyword, tab in pairs( {
                    group = values,
                    xlegend = xlegends,
                    colors = colors,
                    tooltip = tooltips,
                    unitsPrefix = unitsPrefix,
                    unitsSuffix = unitsSuffix,
                    groupNames = groupNames,
                    links = links,
                    } ) do
                        if testone( keywords[keyword], k, v, tab )
                            then break
                        end
                end
            end
        end
    end

    function roundup( x ) -- returns the next round number: eg., for 30 to 39.999 will return 40, for 3000 to 3999.99 wil return 4000. for 10 - 14.999 will return 15.
        local ordermag = 10 ^ math.floor( math.log10( x ) )
        local normalized = x /  ordermag
        local top = normalized >= 1.5 and ( math.floor( normalized + 1 ) ) or 1.5
        return ordermag * top, top, ordermag
    end

    function calcHeightLimits() -- if limits were passed by user, use them, otherwise calculate. for "stack" there's only one limet.
        if stack then
            local sums = {}
            for _, group in pairs( values ) do
                for i, val in ipairs( group ) do sums[i] = ( sums[i] or 0 ) + val end
            end
            local sum = math.max( unpack( sums ) )
            for i = 1, #values do yscales[i] = sum end
        else
            for i, group in ipairs( values ) do yscales[i] = math.max( unpack( group ) ) end
        end
        for i, scale in ipairs( yscales ) do yscales[i] = roundup( scale * 0.9999 ) end
        if not scalePerGroup then for i = 1, #values do yscales[i] = math.max( unpack( yscales ) ) end end
    end

    function tooltip( gi, i, val )
        if tooltips and tooltips[gi] and not nulOrWhitespace( tooltips[gi][i] ) then return tooltips[gi][i], true end
        local groupName = not nulOrWhitespace( groupNames[gi] ) and groupNames[gi] .. ': ' or ''
        local prefix = unitsPrefix[gi] or unitsPrefix[1] or ''
        local suffix = unitsSuffix[gi] or unitsSuffix[1] or ''
        return mw.ustring.gsub(groupName .. prefix .. mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) .. suffix, '_', ' '), false
    end

    function calcHeights( gi, i, val )
        local barHeight = math.floor( val / yscales[gi] * chartHeight + 0.5 ) -- add half to make it "round" instead of "trunc"
        local top, base = chartHeight - barHeight, 0
        if stack then
            local rawbase = 0
            for j = 1, gi - 1 do rawbase = rawbase + values[j][i] end -- sum the "i" value of all the groups below our group, gi.
            base = math.floor( chartHeight * rawbase / yscales[gi] ) -- normally, and especially if it's "stack", all the yscales must be equal.
        end
        return barHeight, top - base
    end

    function groupBounds( i )
        local setWidth = math.floor( chartWidth / numValues )
        -- local setOffset = ( i - 1 ) * setWidth
        local setOffset = ( i - 1 ) * setWidth
        return setOffset, setWidth
    end

    function calcx( gi, i )
        local setOffset, setWidth = groupBounds( i )
        if stack or numGroups == 1 then
            local barWidth = math.min( 38, math.floor( 0.8 * setWidth ) )
            return setOffset + (setWidth - barWidth) / 2, barWidth
        end
        setWidth = 0.85 * setWidth
        local barWidth = math.floor( 0.75 * setWidth / numGroups )
        local left = setOffset + math.floor( ( gi - 1 ) / numGroups * setWidth )
        return left, barWidth
    end

    function drawbar( gi, i, val, ttval )
        if val == '0' then return end -- do not show single line (borders....) if value is 0, or rather, '0'. see talkpage

        local color, tooltip, custom = colors[gi] or defcolor or 'blue', tooltip( gi, i, ttval or val )
        local left, barWidth = calcx( gi, i )
        local barHeight, top = calcHeights( gi, i, val )
        
        -- borders so it shows up when printing
        local style = string.format("x:%spx;y:%spx;height:%spx;width:%spx;fill:%s;", left, top, barHeight-1, barWidth-2, color)
        local link = links[gi] and links[gi][i] or ''
        -- local img = not nulOrWhitespace( link ) and mw.ustring.format( '[[File:Transparent.png|1000px|link=%s|%s]]', link, custom and tooltip or '' ) or ''
        local img = string.format("<title>%s</title>",tooltip);
        table.insert( res, mw.text.tag( 'rect', { style = style, class = "chart2-bar" }, img ) )
    end





    function drawYScale()
    	
        function drawSingle( gi, color, single )
            local yscale = yscales[gi]
            local _, top, ordermag = roundup( yscale * 0.999 )
            local numnotches = top <= 1.5 and top * 4
                    or top < 4  and top * 2
                    or top
            local valStyleStrCntnr = 'display:block;position:relative;height:%spx;text-align:right;margin:0px;' -- SINGLE ELEMENT OF Y AXIS
            local valStyleStrValue = 'display:block;position:relative;float:right;height:%spx;text-align:right;margin:%spx 0px 0px 0px;vertical-align:middle;line-height:%spx;' -- value
            local valStyleStrNotch = 'display:block;position:relative;float:right;height:%spx;text-align:right;width:5px; border-top:1px solid black' -- notch
                -- or 'position:relative;height=20px;text-align:right;vertical-align:middle;max-width:%spx;top:%spx;left:3px;background-color:%s;color:white;font-weight:bold;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;padding:0 2px'
            -- local notchStyleStr = 'position:absolute;height=1px;min-width:5px;top:%spx;left:%spx;border:1px solid %s;'
            for i = 1, numnotches do
                local val = (numnotches - i + 1) / numnotches * yscale -- value of this notch
                local y = ( 1 / numnotches * chartHeight )   --chartHeight - calcHeights( gi, 1, val ) -- height of a single notch
                local divCntnr = mw.text.tag( 'div', { style = string.format( valStyleStrCntnr, y, color ) } )
                local divValue = mw.text.tag( 'div', { style = string.format( valStyleStrValue, y, -y/2, y, color ) }, mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) )
                local divNotch = mw.text.tag( 'div', { style = string.format( valStyleStrNotch, y, color ) }, '&nbsp;' ) 
                table.insert( res, divCntnr )
                table.insert( res, divNotch )
                table.insert( res, divValue )
                table.insert( res, '</div>' )
                table.insert( res, '<div style="clear:right;display:block"></div>' )
                
                
                -- div = mw.text.tag( 'div', { style = string.format( notchStyleStr, y, width - 4, color ) }, '' )
                -- table.insert( res, div )
            end
        end

        if scalePerGroup then
            -- local colWidth = 80
            -- local colStyle = "position:absolute;height:%spx;min-width:%spx;left:%spx;border-right:1px solid %s;color:%s"
            
            
            -- local colStyle = "height:%spx;border-right:1px solid %s;color:%s;display:inline-block;text-align:right"
            -- for gi = 1, numGroups do
            --     -- local left = ( gi - 1 ) * colWidth
            --     local color = colors[gi] or defcolor
            --     -- table.insert( res, mw.text.tag( 'div', { style = string.format( colStyle, chartHeight, colWidth, left, color, color ) } ) )
            --     table.insert( res, mw.text.tag( 'div', { style = string.format( colStyle, chartHeight, color, color ) } ) )
            --     drawSingle( gi, color )
            --     table.insert( res, '</div>' )
            -- end
        else
            drawSingle( 1, 'black',  true ) -- gi is the id of y axis when more than 1 
        end
    end




    function drawXlegends()
        local setOffset, setWidth
        local legendDivStyleFormat = "display:block;float:left;position:relative;vertical-align:top;width:%spx;text-align:center;margin:0px 0px 0px %spx;"
        -- local tickDivstyleFormat = "position:absolute;left:%spx;height:10px;width:1px;border-left:1px solid black;"
        local offsetleft = 0;
        setOffset, setWidth = groupBounds( 1 )
        for i = 1, numValues do
            if not nulOrWhitespace( xlegends[i] ) then
                table.insert( res, mw.text.tag( 'div', { style = string.format( legendDivStyleFormat, setWidth, offsetleft ) }, xlegends[i] or '' ) )
                offsetleft=0;
            else
            	offsetleft=offsetleft+setWidth;
            end
            
                -- setOffset, setWidth = groupBounds( i )
                -- table.insert( res, mw.text.tag( 'div', { style = string.format( legendDivStyleFormat, setWidth ) }, xlegends[i] or '' ) )
            
        end
    end




    function drawChart()
        table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;padding:1em 0em 1em 0em;") } ) ) -- container div
        table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;" ) } ) ) -- container div
		table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;height:%spx;display:inline-block;text-align:right;vertical-align:top;", chartHeight ) } ) )
        drawYScale()
        table.insert( res, '</div><div style="position:relative;display:inline-block">' )
        
        -- table.insert( res, mw.text.tag( 'div', { style = string.format("height:%spx;width:%spx;border-left:1px black solid;border-bottom:1px black solid;display:block;margin:0px;padding:0px;", chartHeight, chartWidth ) } ) ) -- the actual chart
        table.insert( res, mw.text.tag( 'svg', { style = string.format("height:%spx;width:%spx;border-left:1px black solid;border-bottom:1px black solid;", chartHeight, chartWidth ) } ) ) -- the actual chart
        local acum = stack and accumulateTooltip and {}
        for gi, group in pairs( values ) do
            for i, val in ipairs( group ) do
                if acum then acum[i] = ( acum[i] or 0 ) + val end
                drawbar( gi, i, val, acum and acum[i] )
            end
        end
        -- table.insert( res, '</div>' )
        table.insert( res, '</svg>' )
        
        table.insert( res, mw.text.tag( 'div', { style = string.format( "position:relative;width:%spx;", chartWidth ) } ) ) -- X legends
        drawXlegends()
        table.insert( res, '</div>' )
        table.insert( res, '</div>' )
        table.insert( res, '</div>' )
        createGroupList( res, groupNames, colors )
        table.insert( res, '</div>' )
    end

    extractParams()
    validate()
    calcHeightLimits()
    drawChart()
    return table.concat( res, "\n" )
end

return {
    ['bar-chart'] = barChart,
    [keywords.barChart] = barChart,
}
--</source>