├── .gitignore
├── img
├── og_image.png
├── random.png
├── stalin.png
├── slice.svg
├── line_segment.svg
├── bracket.svg
├── person
│ ├── red.svg
│ └── blue.svg
├── funnel_d.svg
├── funnel_m.svg
├── bubble_background.svg
├── correlation_d.svg
├── correlation_m.svg
├── curve.svg
├── eu.svg
├── lifetime
│ ├── White Women.svg
│ ├── White men.svg
│ ├── Black women.svg
│ ├── Hispanic Women.svg
│ ├── Hispanic Men.svg
│ └── Black Men.svg
├── bg
│ ├── grey.svg
│ └── black-sparse.svg
└── hypothetical.svg
├── favicon.ico
├── README.md
└── js
├── script.js
└── bubbles.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | private
3 |
--------------------------------------------------------------------------------
/img/og_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkorostoff/incarceration-in-real-numbers/HEAD/img/og_image.png
--------------------------------------------------------------------------------
/img/random.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkorostoff/incarceration-in-real-numbers/HEAD/img/random.png
--------------------------------------------------------------------------------
/img/stalin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkorostoff/incarceration-in-real-numbers/HEAD/img/stalin.png
--------------------------------------------------------------------------------
/img/slice.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/img/line_segment.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/img/bracket.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
21 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
1 | h (
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/img/person/red.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
20 |
--------------------------------------------------------------------------------
/img/person/blue.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
20 |
--------------------------------------------------------------------------------
/img/funnel_d.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
--------------------------------------------------------------------------------
/img/funnel_m.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Incarceration in Real Numbers
2 |
3 | ## About
4 |
5 | [Incarceration in real numbers](https://jerseylen.github.io/incarceration-in-real-numbers) is a data visualization project that launched in autumn 2020.
6 |
7 | ## A word about words
8 |
9 | The terms "jail" and "prison" are not interchangeable. A jail is a place where accused criminals are held while awaiting trial, or where convicted criminals serve short sentences for minor crimes. Jails are typically operated by county or city governments. A prison is an institution where convicted criminals are held for serious crimes, typically serving sentences of a year or more. Prisons are typically operated by the federal or state governments. [Rikers Island](https://en.wikipedia.org/wiki/Rikers_Island) is a jail. [Sing sing](https://en.wikipedia.org/wiki/Sing_Sing) is a prison.
10 |
11 | ## Alternate Versions
12 |
13 | - [Click here to view a version with just the icons](https://jerseylen.github.io/incarceration-in-real-numbers/?mute=1), without all the commentary
14 | - Github user [SMSadegh19](https://github.com/SMSadegh19) has published a [version translated into Persian](https://persianhodhod.ir/prisoners/).
15 |
16 |
17 | ## Table of Contents
18 |
19 | #### Understanding the size of the problem
20 |
21 | * [Incarceration per capita](https://jerseylen.github.io/incarceration-in-real-numbers/#per-one-hundred)
22 | * [Incarceration in absolute numbers](https://jerseylen.github.io/incarceration-in-real-numbers/#country-rank)
23 | * [Incarceration compared to casualties of war](https://jerseylen.github.io/incarceration-in-real-numbers/#casualties)
24 | * [Total correctional population](https://jerseylen.github.io/incarceration-in-real-numbers/#correctional-population)
25 | * [Over-use of plea bargains](https://jerseylen.github.io/incarceration-in-real-numbers/#blue)
26 | * [People held without trial](https://jerseylen.github.io/incarceration-in-real-numbers/#red)
27 | * [Comparison to Europe](https://jerseylen.github.io/incarceration-in-real-numbers/#subgroup)
28 | * [Comparison to USSR](https://jerseylen.github.io/incarceration-in-real-numbers/#stalin)
29 | * [Racial Disparities](https://jerseylen.github.io/incarceration-in-real-numbers/#dots)
30 | * [Comparison to police shooting](https://jerseylen.github.io/incarceration-in-real-numbers/#thousand)
31 | * [Discussion of George Floyd](https://jerseylen.github.io/incarceration-in-real-numbers/#floyd)
32 | * [Comparison to Estimated Incarceration Abroad](https://jerseylen.github.io/incarceration-in-real-numbers/#estimated)
33 | * [Political commentary on the nature of freedom](https://jerseylen.github.io/incarceration-in-real-numbers/#freedom-wrapper)
34 |
35 | #### Solutions to mass incarceration
36 |
37 | * [Impact on public safety](https://jerseylen.github.io/incarceration-in-real-numbers/#none-of-this)
38 | * [Impact of reduced criminalization](https://jerseylen.github.io/incarceration-in-real-numbers/#bubbles-outer)
39 | * [Impact of preventative strategies](https://jerseylen.github.io/incarceration-in-real-numbers/#invest-in-prevention)
40 | * [Table comparing preventative and punitive strategies](https://jerseylen.github.io/incarceration-in-real-numbers/#table)
41 | * [Commentary on the importance of preventative measures](https://jerseylen.github.io/incarceration-in-real-numbers/#essay)
42 |
43 | ## Sources and Methodology
44 |
45 | See [SOURCES.md](https://github.com/jerseylen/incarceration-in-real-numbers/blob/master/SOURCES.md)
46 |
47 | ## Related works
48 |
49 | Incarceration in Real Numbers is part of my ongoing war on [scope insensitivity](https://www.lesswrong.com/posts/2ftJ38y9SRBCBsCzy/scope-insensitivity). If you enjoyed this project, you may also enjoy [Wealth Shown To Scale](https://jerseylen.github.io/1-pixel-wealth/) and [Hundred Thousand Faces](https://jerseylen.github.io/hundred-thousand-faces/).
50 |
51 |
--------------------------------------------------------------------------------
/img/bubble_background.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
72 |
--------------------------------------------------------------------------------
/img/correlation_d.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
88 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | var prisoners = document.getElementById('prisoners');
2 | var thousand = document.getElementById('thousand');
3 | var counter = document.getElementById('counter');
4 | var title = document.getElementById('title');
5 | var html = document.getElementsByTagName('html');
6 | var curve_wrapper_outer = document.getElementById('curve-wrapper-outer');
7 | var url_params = new URLSearchParams(window.location.search);
8 | var mute = url_params.get('mute');
9 | var unscroll = url_params.get('unscroll');
10 | var scroll_count = 0;
11 |
12 | if (mute) {
13 | html[0].classList.add('mute')
14 | }
15 | if (unscroll) {
16 | html[0].classList.add('unscroll')
17 | }
18 |
19 | if (!mute) {
20 | var citations = document.querySelectorAll('.citation');
21 | citations.forEach(function(citation, i){
22 | citation.innerHTML = i+1;
23 | })
24 |
25 | var observer = new IntersectionObserver(function(entries){
26 | entries.forEach(function(entry){
27 | if (entry.isIntersecting || entry.intersectionRatio > 0) {
28 | html[0].classList = (unscroll) ? "unscroll" : "";
29 | html[0].classList.add(entry.target.dataset.background);
30 | }
31 | })
32 | })
33 | document.querySelectorAll('[data-background]').forEach(function(target){
34 | observer.observe(target);
35 | });
36 |
37 | var until_recently_shown = false;
38 | var since_it_began_shown = false;
39 |
40 | var curveObserver = new IntersectionObserver(function(entries){
41 | entries.forEach(function(entry){
42 | if (entry.isIntersecting || entry.intersectionRatio > 0) {
43 | if (entry.target.id === 'since-it-began') {
44 | since_it_began_shown = true;
45 | }
46 | if (entry.target.id === 'until-recently') {
47 | until_recently_shown = true;
48 | }
49 | if (entry.target.id === 'none-of-this') {
50 | since_it_began_shown = false;
51 | until_recently_shown = false;
52 | curve_wrapper_outer.classList.remove('stretched');
53 | curve_wrapper_outer.classList.remove('show-correlation');
54 | }
55 | }
56 | //Item leaves the screen by scroll down
57 | if (entry.target.id === 'until-recently'
58 | && !entry.isIntersecting
59 | && until_recently_shown === true) {
60 | if ((entry.target.offsetTop - window.scrollY - window.innerHeight) < 0) {
61 | //User is scrolling down (i.e. normal scroll)
62 | curve_wrapper_outer.classList.add('stretched');
63 | }
64 | else {
65 | //User is scrolling up (i.e. reverse scroll)
66 | curve_wrapper_outer.classList.remove('stretched');
67 | }
68 | }
69 |
70 | //Item leaves the screen by scroll down
71 | if (entry.target.id === 'since-it-began'
72 | && !entry.isIntersecting
73 | && until_recently_shown === true) {
74 | if ((entry.target.offsetTop - window.scrollY - window.innerHeight) < 0) {
75 | curve_wrapper_outer.classList.add('show-correlation');
76 | }
77 | else {
78 | curve_wrapper_outer.classList.remove('show-correlation');
79 | }
80 | }
81 | })
82 | })
83 | document.querySelectorAll('.curve-section').forEach(function(target){
84 | curveObserver.observe(target);
85 | });
86 | var letterObserver = new IntersectionObserver(function(entries){
87 | entries.forEach(function(entry){
88 | if (entry.isIntersecting) {
89 | entry.target.classList.add('animate');
90 | }
91 | else {
92 | entry.target.classList.remove('animate');
93 | }
94 | })
95 | })
96 | var letters = document.getElementById('animated-letters');
97 | letterObserver.observe(letters);
98 |
99 | function toggleExpand(outer, inner) {
100 | var outerEl = document.getElementById(outer);
101 | var innerEl = document.getElementById(inner);
102 | var offset = Math.abs(outerEl.offsetTop - innerEl.offsetTop);
103 | innerEl.style.top = offset + 'px';
104 | outerEl.classList.add('expanded')
105 | }
106 |
107 | function showTooltip(e) {
108 | var tooltip = e.parentElement.getElementsByClassName('tooltip')[0]
109 | tooltip.classList.add('open')
110 | }
111 | function closeTooltip(e) {
112 | e.parentElement.classList.remove('open');
113 | }
114 | }
115 |
116 | window.addEventListener('scroll', function(e) {
117 | scroll_count = getScrollCount();
118 | if (scroll_count > 2000) {
119 | counter.innerHTML = scroll_count.toLocaleString();
120 | }
121 | else {
122 | counter.innerHTML = '';
123 | }
124 | });
125 |
126 | function getScrollCount() {
127 | var body = document.documentElement || document.body;
128 | var total_height = prisoners.clientHeight;
129 | var scroll_percent = (body.scrollTop - prisoners.offsetTop + body.clientHeight) / total_height;
130 | var count = Math.floor(scroll_percent * 2300000);
131 | return count;
132 | }
133 |
134 | function setHeight() {
135 | var browser_width = window.innerWidth || document.body.clientWidth;
136 | var icons_per_card = 200;
137 | var pixel_height_per_card = 500;
138 | var pixel_width_per_card = 400;
139 |
140 | var cards_per_row = browser_width / pixel_width_per_card;
141 | var icons_per_row = icons_per_card * cards_per_row;
142 | var number_of_rows = 2300000/icons_per_row;
143 |
144 | var height = Math.floor(number_of_rows * pixel_height_per_card);
145 | prisoners.style.height = height + "px";
146 |
147 | if (!mute) {
148 | var thousand_height = Math.floor((1000/icons_per_row) * pixel_height_per_card);
149 | thousand.style.height = thousand_height + "px";
150 | }
151 | }
152 | setHeight();
153 | window.addEventListener("orientationchange", setHeight);
154 | window.addEventListener("resize", setHeight);
155 |
--------------------------------------------------------------------------------
/img/correlation_m.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
88 |
--------------------------------------------------------------------------------
/img/curve.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
74 |
--------------------------------------------------------------------------------
/img/eu.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
195 |
--------------------------------------------------------------------------------
/js/bubbles.js:
--------------------------------------------------------------------------------
1 | var data = [
2 | {name: "USA", rate: 701, population: 2300000},
3 | {name: "China", rate: 120, population: 1700000},
4 | {name: "Brazil", rate: 348, population: 746532},
5 | {name: "Russia", rate: 346, population: 499406},
6 | {name: "India", rate: 34, population: 466084},
7 | {name: "Thailand", rate: 531, population: 367993},
8 | {name: "Indonesia", rate: 99, population: 266584},
9 | {name: "Turkey", rate: 324, population: 264842},
10 | {name: "Iran", rate: 294, population: 240000},
11 | {name: "Philippines", rate: 179, population: 215000},
12 | {name: "Mexico", rate: 163, population: 203364},
13 | {name: "South Africa", rate: 275, population: 163015},
14 | {name: "Vietnam", rate: 128, population: 123697},
15 | {name: "Colombia", rate: 246, population: 123005},
16 | {name: "Ethiopia", rate: 127, population: 113727},
17 | {name: "Egypt", rate: 116, population: 106000},
18 | {name: "Argentina", rate: 230, population: 103209},
19 | {name: "Myanmar", rate: 171, population: 92000},
20 | {name: "Peru", rate: 278, population: 90934},
21 | {name: "Bangladesh", rate: 52, population: 88211},
22 | {name: "Morocco", rate: 237, population: 85767},
23 | {name: "Pakistan", rate: 38, population: 77275},
24 | {name: "Poland", rate: 195, population: 74130},
25 | {name: "Malaysia", rate: 230, population: 74000},
26 | {name: "Nigeria", rate: 36, population: 72627},
27 | {name: "France", rate: 105, population: 70818},
28 | {name: "Germany", rate: 77, population: 63851},
29 | {name: "Algeria", rate: 151, population: 63000},
30 | {name: "Saudi Arabia", rate: 197, population: 61000},
31 | {name: "Taiwan", rate: 258, population: 60956},
32 | {name: "Italy", rate: 101, population: 60769},
33 | {name: "Spain", rate: 124, population: 58457},
34 | {name: "Cuba", rate: 510, population: 57337},
35 | {name: "Venezuela", rate: 178, population: 57096},
36 | {name: "Uganda", rate: 124, population: 55229},
37 | {name: "South Korea", rate: 109, population: 55198},
38 | {name: "Ukraine", rate: 148, population: 52863},
39 | {name: "Kenya", rate: 102, population: 51130},
40 | {name: "Japan", rate: 39, population: 48802},
41 | {name: "Iraq", rate: 126, population: 45000},
42 | {name: "Uzbekistan", rate: 150, population: 43900},
43 | {name: "Australia", rate: 170, population: 43032},
44 | {name: "Chile", rate: 232, population: 42921},
45 | {name: "Ecuador", rate: 233, population: 40006},
46 | {name: "Canada", rate: 107, population: 39579},
47 | {name: "El Salvador", rate: 590, population: 38114},
48 | {name: "Cambodia", rate: 220, population: 36600},
49 | {name: "Tanzania", rate: 59, population: 35803},
50 | {name: "Belarus", rate: 343, population: 32500},
51 | {name: "Afghanistan", rate: 87, population: 30748},
52 | {name: "Cameroon", rate: 124, population: 30701},
53 | {name: "Turkmenistan", rate: 552, population: 30452},
54 | {name: "Kazakhstan", rate: 156, population: 29081},
55 | {name: "Dominican Republic", rate: 237, population: 26045},
56 | {name: "Guatemala", rate: 143, population: 25414},
57 | {name: "Madagascar", rate: 93, population: 24928},
58 | {name: "Angola", rate: 93, population: 24000},
59 | {name: "Nepal", rate: 79, population: 23775},
60 | {name: "Sri Lanka", rate: 105, population: 23355},
61 | {name: "Azerbaijan", rate: 235, population: 23319},
62 | {name: "Zambia", rate: 123, population: 22823},
63 | {name: "Tunisia", rate: 195, population: 22663},
64 | {name: "Cote d'Ivoire", rate: 82, population: 21186},
65 | {name: "Czech Republic", rate: 197, population: 21048},
66 | {name: "Sudan", rate: 52, population: 21000},
67 | {name: "Nicaragua", rate: 332, population: 20918},
68 | {name: "Romania", rate: 107, population: 20578},
69 | {name: "Democratic Republic of Congo", rate: 29, population: 20550},
70 | {name: "Honduras", rate: 229, population: 20506},
71 | {name: "Jordan", rate: 198, population: 20060},
72 | {name: "Mozambique", rate: 63, population: 19832},
73 | {name: "Zimbabwe", rate: 114, population: 19382},
74 | {name: "Israel", rate: 234, population: 19376},
75 | {name: "Costa Rica", rate: 374, population: 19226},
76 | {name: "Bolivia", rate: 158, population: 18195},
77 | {name: "Panama", rate: 401, population: 16953},
78 | {name: "Hungary", rate: 173, population: 16947},
79 | {name: "Ghana", rate: 52, population: 15463},
80 | {name: "Malawi", rate: 76, population: 14778},
81 | {name: "Yemen", rate: 53, population: 14000},
82 | {name: "Paraguay", rate: 199, population: 13607},
83 | {name: "Portugal", rate: 125, population: 12789},
84 | {name: "Singapore", rate: 199, population: 11737},
85 | {name: "Senegal", rate: 68, population: 11547},
86 | {name: "Belgium", rate: 95, population: 10883},
87 | {name: "Serbia", rate: 156, population: 10852},
88 | {name: "Burundi", rate: 85, population: 10832},
89 | {name: "Slovakia", rate: 195, population: 10665},
90 | {name: "Syria", rate: 60, population: 10599},
91 | {name: "Netherlands", rate: 61, population: 10464},
92 | {name: "Uruguay", rate: 295, population: 10243},
93 | {name: "Greece", rate: 95, population: 10216},
94 | {name: "Kyrgyzstan", rate: 161, population: 10142},
95 | {name: "New Zealand", rate: 201, population: 9893},
96 | {name: "United Arab Emirates", rate: 104, population: 9826},
97 | {name: "Georgia", rate: 262, population: 9740},
98 | {name: "Niger", rate: 44, population: 9570},
99 | {name: "Tajikistan", rate: 121, population: 9317},
100 | {name: "Libya", rate: 139, population: 9100},
101 | {name: "Bulgaria", rate: 125, population: 9028},
102 | {name: "Laos", rate: 130, population: 9000},
103 | {name: "Haiti", rate: 80, population: 8882},
104 | {name: "Chad", rate: 59, population: 8700},
105 | {name: "Austria", rate: 98, population: 8692},
106 | {name: "Benin", rate: 68, population: 7890},
107 | {name: "Burkina Faso", rate: 39, population: 7812},
108 | {name: "Namibia", rate: 295, population: 7400},
109 | {name: "South Sudan", rate: 50, population: 7000},
110 | {name: "Lebanon", rate: 144, population: 6966},
111 | {name: "Switzerland", rate: 81, population: 6943},
112 | {name: "Moldova", rate: 194, population: 6855},
113 | {name: "Sweden", rate: 61, population: 6210},
114 | {name: "Lithuania", rate: 221, population: 6138},
115 | {name: "Mali", rate: 33, population: 5209},
116 | {name: "Togo", rate: 66, population: 5109},
117 | {name: "Papua New Guinea", rate: 62, population: 5087},
118 | {name: "Albania", rate: 177, population: 5045},
119 | {name: "Sierra Leone", rate: 60, population: 4732},
120 | {name: "Kuwait", rate: 117, population: 4662},
121 | {name: "Gabon", rate: 241, population: 4476},
122 | {name: "Botswana", rate: 208, population: 4343},
123 | {name: "Trinidad and Tobago", rate: 292, population: 3999},
124 | {name: "Ireland, Republic of", rate: 79, population: 3950},
125 | {name: "Jamaica", rate: 138, population: 3866},
126 | {name: "Guinea", rate: 28, population: 3782},
127 | {name: "Denmark", rate: 63, population: 3635},
128 | {name: "Latvia", rate: 183, population: 3522},
129 | {name: "Bahrain", rate: 234, population: 3485},
130 | {name: "Swaziland", rate: 258, population: 3453},
131 | {name: "Mongolia", rate: 110, population: 3398},
132 | {name: "Croatia", rate: 79, population: 3217},
133 | {name: "Norway", rate: 60, population: 3190},
134 | {name: "Finland", rate: 53, population: 2910}
135 | ];
136 | var containerWidth = 1230;
137 | var containerHeight = 830;
138 | var diameterRatio = 5000;
139 | var leftRatio = 3000;
140 | var topRatio = 1.25;
141 |
142 | if (window.innerWidth < 451) {
143 | containerWidth = window.innerWidth;
144 | containerHeight = window.innerHeight * .9;
145 | diameterRatio = 10000;
146 | leftRatio = 13500;
147 | topRatio = 1.5;
148 | }
149 |
150 | var bubbles = document.getElementById('bubbles');
151 | var bubblesInner = document.getElementById('bubbles-inner');
152 | var bubbleHeader = document.getElementById('bubble-header');
153 |
154 | function scaleBubbles() {
155 | var heightRatio = window.innerHeight/(containerHeight + 150);
156 | var widthRatio = window.innerWidth/(containerWidth + 150);
157 | var smallestRatio = (heightRatio > widthRatio) ? widthRatio : heightRatio;
158 |
159 | if (window.innerHeight < containerHeight || window.innerWidth < containerWidth) {
160 | bubbles.style.transform = 'scale(' + smallestRatio + ')';
161 | }
162 | }
163 | scaleBubbles();
164 | window.addEventListener("orientationchange", scaleBubbles);
165 | window.addEventListener("resize", scaleBubbles);
166 | //todo: redraw bubbles when switching from desktop to mobile?
167 |
168 | bubbles.style.display = "block";
169 | data.forEach(function(country, i){
170 |
171 | var div = document.createElement("div");
172 |
173 | var innerDiv = document.createElement("div");
174 | innerDiv.classList = "country-bubble-inner";
175 | innerDiv.innerHTML = country.name;
176 | div.appendChild(innerDiv);
177 |
178 | div.classList = 'country-bubble';
179 | if (country.population < 250000) {
180 | div.classList.add('country-bubble-small');
181 | }
182 | if (country.rate > 400) {
183 | div.classList.add('country-bubble-high-rate');
184 | }
185 | if (country.name === "USA") {
186 | div.id = "country-bubble-usa";
187 | var innerUSA = div.querySelectorAll(".country-bubble-inner");
188 |
189 | var usaRate = document.createElement("div");
190 | usaRate.id = "usa-bubble-rate";
191 | usaRate.innerHTML = "Rank per capita: 1";
192 | innerUSA[0].appendChild(usaRate);
193 |
194 | var usaCount = document.createElement("div");
195 | usaCount.id = "usa-bubble-count";
196 | usaCount.innerHTML = "Rank in absolute: 1";
197 | innerUSA[0].appendChild(usaCount);
198 | }
199 | div.style.position = 'absolute';
200 |
201 | var diameter = Math.floor(country.population / diameterRatio);
202 | div.style.left = Math.floor(country.population / leftRatio) + 'px';
203 | div.style.top = containerHeight - (diameter/2) - Math.floor(country.rate / topRatio) + 'px';
204 | div.style.width = diameter + 'px';
205 | div.style.height = diameter + 'px';
206 | div.style.zIndex = data.length - i;
207 |
208 | if (country.name == 'Japan') {
209 | div.classList.add('japan');
210 | div.style.zIndex = 1000;
211 | }
212 |
213 | bubblesInner.appendChild(div);
214 | })
215 |
216 | function recalculateUSA(prisoners) {
217 | var usa = document.getElementById("country-bubble-usa");
218 | var rate = (prisoners/328000000) * 100000;
219 |
220 | var usaCount = document.getElementById("usa-bubble-count");
221 | usaCount.innerHTML = "Rank in absolute: " + getRankPopulation(prisoners);
222 |
223 | var usaRate = document.getElementById("usa-bubble-rate");
224 | usaRate.innerHTML = "Rank per capita: " + getRankRate(rate);
225 |
226 | var diameter = Math.floor(prisoners / diameterRatio);
227 | usa.style.left = Math.floor(prisoners / leftRatio) + 'px';
228 | usa.style.top = containerHeight - (diameter/2) - Math.floor(rate / topRatio) + 'px';
229 | usa.style.width = diameter + 'px';
230 | usa.style.height = diameter + 'px';
231 | }
232 |
233 | function getRankPopulation(population) {
234 | var rank = 0;
235 | data.forEach(function(country){
236 | if (country.population > population) {
237 | rank++;
238 | }
239 | });
240 | return rank || 1;
241 | }
242 |
243 | function getRankRate(rate) {
244 | var rank = 0;
245 | data.forEach(function(country){
246 | if (country.rate > rate) {
247 | rank++;
248 | }
249 | });
250 | return rank || 1;
251 | }
252 |
253 | var usa_prisoners = 2300000;
254 | var checks = document.querySelectorAll('.release');
255 | checks.forEach(function(check) {
256 | check.addEventListener('change', function(e){
257 | var change = parseInt(e.target.value);
258 |
259 | if (e.target.checked) {
260 | usa_prisoners -= change;
261 | }
262 | else {
263 | usa_prisoners += change;
264 | }
265 | recalculateUSA(usa_prisoners);
266 | });
267 | })
268 |
269 | var radios = document.querySelectorAll('.release-radio');
270 | radios.forEach(function(radio){
271 | radio.addEventListener('change', function(e){
272 | var change = parseInt(e.target.value);
273 | var sibiling = document.getElementById(e.target.dataset.sibiling);
274 | sibiling.checked = false;
275 | usa_prisoners -= change;
276 | recalculateUSA(usa_prisoners);
277 | })
278 | })
279 |
--------------------------------------------------------------------------------
/img/lifetime/White Women.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
357 |
--------------------------------------------------------------------------------
/img/lifetime/White men.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
357 |
--------------------------------------------------------------------------------
/img/lifetime/Black women.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
357 |
--------------------------------------------------------------------------------
/img/lifetime/Hispanic Women.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
357 |
--------------------------------------------------------------------------------
/img/lifetime/Hispanic Men.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
357 |
--------------------------------------------------------------------------------
/img/lifetime/Black Men.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
357 |
--------------------------------------------------------------------------------
/img/bg/grey.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
147 |
--------------------------------------------------------------------------------
/img/bg/black-sparse.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
147 |
--------------------------------------------------------------------------------
/img/hypothetical.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
339 |
--------------------------------------------------------------------------------