Skip to content

Commit a451d74

Browse files
xuexuexuexue
committed
population example with many interaction features
+ fixing bugs discovered through this...
1 parent 9e262f9 commit a451d74

9 files changed

Lines changed: 387 additions & 32 deletions

File tree

‎example/population.coffee‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
data = {
2+
subcontinent: ["Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "Africa", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "The Americas", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "North America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "South America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Isthmic Central America", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Greater Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Lesser Antilles", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Asia", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Western Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Eastern Europe", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "Oceania", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union", "(Former) Soviet Union"],
3+
year: ["1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", "2040", "2045", "2050"],
4+
population: ["227991", "253894", "285185", "322012", "365970", "416603", "479022", "554360", "632182", "715401", "807046", "911699", "1027923", "1154023", "1288647", "1431595", "1583358", "1744030", "1912953", "2088833", "2270576", "331388", "370348", "415818", "463605", "511080", "561009", "612589", "665149", "720304", "778664", "833295", "883416", "931740", "980248", "1027266", "1071772", "1112810", "1149849", "1182795", "1211773", "1237099", "194391", "214081", "236862", "258784", "278561", "299408", "320222", "340692", "362389", "388912", "413261", "434406", "454574", "476223", "497939", "519172", "539481", "558722", "577010", "594558", "611651", "112041", "128335", "147381", "168877", "192083", "216848", "242905", "270302", "298055", "324126", "348881", "372908", "396612", "419117", "440136", "459402", "476529", "491232", "503317", "512659", "519240", "24955", "27932", "31576", "35944", "40436", "44753", "49462", "54155", "59859", "65626", "71153", "76101", "80553", "84908", "89191", "93198", "96800", "99895", "102468", "104556", "106208", "9263", "10767", "12613", "14764", "17070", "19112", "21829", "24487", "28121", "31760", "35191", "38244", "41438", "44533", "47522", "50372", "53011", "55379", "57463", "59274", "60828", "14838", "16222", "17945", "20084", "22172", "24352", "26296", "28263", "30272", "32329", "34384", "36215", "37397", "38595", "39836", "40946", "41875", "42580", "43058", "43333", "43439", "854", "944", "1017", "1097", "1195", "1290", "1338", "1405", "1467", "1536", "1578", "1642", "1718", "1780", "1833", "1879", "1914", "1936", "1948", "1949", "1942", "1437565", "1567779", "1720291", "1911899", "2158832", "2413320", "2644214", "2907011", "3189623", "3451305", "3693640", "3919408", "4138387", "4347495", "4543042", "4715451", "4861192", "4981352", "5078184", "5153038", "5205799", "542524", "574401", "604637", "634344", "656687", "677224", "693651", "707001", "720792", "727748", "728655", "731102", "733820", "733872", "732205", "727755", "721027", "712547", "702501", "690705", "677068", "305120", "314846", "326662", "341302", "352720", "362291", "368047", "371734", "378472", "386652", "392611", "402246", "411197", "417598", "423163", "426909", "428978", "429455", "428395", "425798", "421729", "237404", "259554", "277975", "293041", "303967", "314933", "325604", "335267", "342320", "341096", "336044", "328856", "322623", "316274", "309042", "300846", "292050", "283092", "274106", "264907", "255339", "12443", "13934", "15568", "17313", "19181", "21062", "22477", "24308", "26340", "28309", "30334", "32571", "34844", "37041", "39155", "41144", "42954", "44560", "45978", "47229", "48338", "179571", "195613", "213780", "230513", "242478", "254519", "265984", "278184", "289016", "291782", "289818", "286486", "284962", "283884", "282169", "279467", "276061", "272426", "268760", "264796", "260223"]
5+
}
6+
7+
@examples ?= {}
8+
9+
@examples.population = (dom, dom2, dom3) ->
10+
polyd = polyjs.data json: data
11+
polyd.derive ((x) -> if x.year < 2012 then 'actual' else 'estimate'), 'type'
12+
today = polyjs.chart
13+
layer:
14+
data: polyd
15+
type: 'bar'
16+
x : {var:'subcontinent', sort:'population', asc: false}
17+
y : 'population'
18+
id: 'subcontinent'
19+
filter: year: in: [2010]
20+
guides: {x: numticks: 50}
21+
coord: {type: 'cartesian', flip: true}
22+
dom: dom
23+
title: 'World Population By (Sub)continent 2010'
24+
width: 400
25+
height: 400
26+
yearly_spec =
27+
layers: [
28+
{
29+
data: polyd
30+
type: 'line'
31+
x: 'year'
32+
y: 'sum(population)'
33+
size: {const: 5}
34+
color: {const: '#CCC'}
35+
}, {
36+
data: polyd
37+
type: 'point'
38+
x: 'year'
39+
y: 'sum(population)'
40+
color: 'type'
41+
}
42+
]
43+
guides:
44+
x: formatter: (year) -> ""+year
45+
y: min: 0, max: 12500000
46+
color: scale: (t) -> if t is 'actual' then '#222' else 'brown'
47+
title: "Population growth of the World (click chart to zoom)"
48+
dom: dom2
49+
width: 700
50+
height: 400
51+
yearly = polyjs.chart yearly_spec
52+
53+
breakdown_spec =
54+
layer:
55+
data: polyd
56+
type: 'bar'
57+
y: {var:'population', sort: 'population'}
58+
color: {var:'subcontinent', sort:'population'}
59+
filter: year: in: [2010]
60+
guides:
61+
x: position: 'none'
62+
color: numticks: 50
63+
coord: {type: 'cartesian', flip: 'true'}
64+
title: 'Population Breakdown in 2010'
65+
dom: dom3
66+
width: 1100
67+
height: 250
68+
paddingLeft: 20
69+
breakdown = polyjs.chart breakdown_spec
70+
71+
show_country = (type, e) ->
72+
if type is 'click'
73+
data = e.evtData
74+
filter = subcontinent: data.subcontinent
75+
for layer in yearly_spec.layers
76+
layer.filter = filter
77+
yearly_spec.title = "Population growth of #{data.subcontinent.in[0]} (click chart to zoom)"
78+
yearly_spec.guides.y.min = 0
79+
yearly_spec.guides.y.max = 5500000
80+
yearly.make yearly_spec
81+
else if type is 'reset'
82+
for layer in yearly_spec.layers
83+
delete layer.filter
84+
yearly_spec.title = "Population growth of the World (click chart to zoom)"
85+
yearly_spec.guides.y.min = 0
86+
yearly_spec.guides.y.max = 12500000
87+
yearly.make yearly_spec
88+
89+
show_breakdown = (type, e) ->
90+
if type is 'click'
91+
data = e.evtData
92+
if data.year
93+
filter = year: data.year
94+
breakdown.title = "Population Breakdown in #{data.year[0]}"
95+
breakdown_spec.layer.filter = filter
96+
breakdown.make breakdown_spec
97+
98+
yscale_toggle = () ->
99+
min = 0
100+
max = 5500000
101+
(type, e) ->
102+
if type is 'reset'
103+
if yearly_spec.guides.y.max?
104+
min = yearly_spec.guides.y.min
105+
delete yearly_spec.guides.y.min
106+
max = yearly_spec.guides.y.max
107+
delete yearly_spec.guides.y.max
108+
else
109+
yearly_spec.guides.y.min = min
110+
yearly_spec.guides.y.max = max
111+
yearly.make yearly_spec
112+
113+
today.addHandler show_country
114+
yearly.addHandler yscale_toggle()
115+
yearly.addHandler show_breakdown
116+
breakdown.addHandler show_country
117+

‎examples.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
<script type="text/javascript" src="examples.js"></script>
1414
</head>
1515
<body>
16+
<div id="nav" style="float:right; display:inline-block"></div>
1617
<div id="chart" style="display:inline-block"></div>
1718
<div id="chart2" style="display:inline-block"></div>
1819
<div id="chart3" style="display:inline-block"></div>
19-
<div id="nav" style="float:right; display:inline-block"></div>
2020
<script type="text/javascript">
2121
var selection = location.search.substr(1)
2222
if (examples[selection] !== undefined) {

0 commit comments

Comments
 (0)