var render_chart;
$(document).ready(function() {
var chart;
where = 'where ';
if (getQueryVariable('neighborhood')) {
var neighborhood = getQueryVariable('neighborhood');
neighborhood = neighborhood.replace(/\+/g, ' ');
where += "neighborhood='"+neighborhood+"' AND ";
$('#current-hood').html('Current View: '+neighborhood);
}
where += timeclause;
render_chart = function(mywidth,myheight){
//create murder breaktown
$.ajax({
url: cdaSettings.cartodb.base_url+"?q="+
"SELECT case when cause in ('Stabbing','Assault','Strangulation','Shooting') then cause else 'other' end as cause,count(*) as count,cast((cast(count(*) as decimal(8,2))/(select count(*) from " + table_prefix + "homicide_20130104_di where" + timeclause + ")) as decimal(4,2)) as percent, (select count(*) from " + table_prefix + "homicide_20130104_di where " + timeclause + ") as total FROM " + table_prefix + "homicide_20130104_di "+where+" group by case when cause in ('Stabbing','Assault','Strangulation','Shooting') then cause else 'other' end"+"&api_key="+cdaSettings.cartodb.api_key,
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
var category = new Array();
var category_data = new Array();
_.each(data.rows, function(datum) {
//category += "'" + datum.cause + "',";
category.push(datum.cause.toUpperCase());
category_data.push(datum.count);
});
// Highcharts.setBorderColor(coo)
Highcharts.setOptions({
colors: ['#b20017']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'murder-breakdown',
type: 'bar'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: category,
title: {text: null},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
y:10,
style: {
fontSize: '30px',
fontFamily: '"Titillium Web",Arial',
color: 'black',
fontWeight:700
}
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
gridLineColor:'#ffffff',
labels: {
y:10,
style:{
/*overflow: 'justify',*/
color:'white'
}
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style:{
fontSize:'30px',
fontFamily: "Titillium Web",
color: 'black',
border:'none',
fontWeight:700
}
}
}
},
tooltip: false,
exporting: {
buttons: {
printButton:{
enabled:false
},
exportButton: {
enabled:false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
backgroundColor: '#FFFFFF',
shadow: true
},
legend:{
enabled:false
},
credits: {
enabled: false
},
series: [{
name: 'death count',
data: category_data,
shadow: false
}]
});
}
});
//create distance chart
$.ajax({
url: cdaSettings.cartodb.base_url+"?q="+
"SELECT sum(case when distance::float <0.5 then 1 else 0 end) as d1, "+
" sum(case when distance::float >=0.5 and distance::float <1 then 1 else 0 end) as d2, "+
" sum(case when distance::float >=1 and distance::float <2 then 1 else 0 end) as d3, "+
" sum(case when distance::float >=2 and distance::float <5 then 1 else 0 end) as d4, "+
" sum(case when distance::float >=5 and distance::float <10 then 1 else 0 end) as d5, "+
" sum(case when distance::float >=10 then 1 else 0 end) as d6 "+
"FROM " + table_prefix + "homicide_20130104_di "+where+"&api_key="+cdaSettings.cartodb.api_key,
//select distance from homicide_20130104_di
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
_.each(data.rows, function(datum) {
var category_data = new Array();
category_data.push(datum.d1);
category_data.push(datum.d2);
category_data.push(datum.d3);
category_data.push(datum.d4);
category_data.push(datum.d5);
category_data.push(datum.d6);
Highcharts.setOptions({
colors: ['#4d94b0']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'distance-from-home',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['0-.5','.5-1','1-2','2-5','5-10','10+'],
title: {
text: 'MILES FROM HOME',
margin:15,
style:{
fontFamily: '"Titillium Web",Arial',
fontWeight:700
}
},
gridLineWidth:0,
minorGridLineWidth:0,
tickWidth:0,
minorTickWidth:0,
plotLines: [{
value: 0,
width: 0,
color: '#ffffff'
}],
labels: {
y:26,
style: {
fontSize: '16px',
fontFamily: '"Titillium Web",Arial',
color: 'black',
fontWeight:700
}
}
},
yAxis: {
min: 0,
title: {
text: 'MURDER VICTIMS',
align: 'middle',
margin:10,
style:{
fontFamily: '"Titillium Web",Arial',
fontWeight:700
}
},
gridLineWidth:0,
minorGridLineWidth:0,
tickWidth:0,
lineWidth:1,
plotLines: [{
value: 0,
width: 0,
color: '#ffffff'
}],
minorTickWidth:0,
labels: {
y:10,
style:{
fontSize: '17px',
fontFamily: '"Titillium Web",Arial',
color: 'black',
fontWeight:700
}
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style:{
fontSize:'20px',
color: 'black',
border:'none'
}
}
}
},
exporting: {
buttons: {
printButton:{
enabled:false
},
exportButton: {
enabled:false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
backgroundColor: '#FFFFFF',
shadow: true
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'death count',
data: category_data,
shadow: false,
pointWidth: 32
}]
});
});
}
});
$.ajax({
url: cdaSettings.cartodb.base_url+"?q="+
"SELECT sum(case when extract(dow from date::timestamp)=0 then 1 else 0 end) as sun ,"+
"sum(case when extract(dow from date::timestamp)=1 then 1 else 0 end) as mon ,"+
"sum(case when extract(dow from date::timestamp)=2 then 1 else 0 end) as tue ,"+
"sum(case when extract(dow from date::timestamp)=3 then 1 else 0 end) as wed ,"+
"sum(case when extract(dow from date::timestamp)=4 then 1 else 0 end) as thr ,"+
"sum(case when extract(dow from date::timestamp)=5 then 1 else 0 end) as fri ,"+
"sum(case when extract(dow from date::timestamp)=6 then 1 else 0 end) as sat "+
"FROM " + table_prefix + "homicide_20130104_di "+where+"&api_key="+cdaSettings.cartodb.api_key,
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
_.each(data.rows, function(datum) {
Highcharts.setOptions({
colors: ['#f17544']
});
var category_data = new Array();
category_data.push(datum.sun);
category_data.push(datum.mon);
category_data.push(datum.tue);
category_data.push(datum.wed);
category_data.push(datum.thr);
category_data.push(datum.fri);
category_data.push(datum.sat);
chart = new Highcharts.Chart({
chart: {
renderTo: 'murder-by-days',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['SUN','MON','TUE','WED','THR','FRI','SAT'],
title: {
text: null
},
gridLineWidth:0,
minorGridLineWidth:0,
tickWidth:0,
minorTickWidth:0,
labels: {
y:26,
style: {
fontSize: '18px',
fontFamily: '"Titillium Web",Arial',
color: 'black',
fontWeight:700
}
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
gridLineWidth:0,
minorGridLineWidth:0,
tickWidth:0,
minorTickWidth:0,
lineWidth:1,
labels: {
y:10,
style:{
fontSize: '18px',
fontFamily: '"Titillium Web",Arial',
color: 'black',
fontWeight:700
}
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style:{
fontSize:'20px',
color: 'black',
border:'none'
}
}
}
},
exporting: {
buttons: {
printButton:{
enabled:false
},
exportButton: {
enabled:false
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'death count',
data: category_data,
shadow: false,
pointWidth: 24
}]
});
});
}
});
//Create pie chart
$.ajax({
url: cdaSettings.cartodb.base_url+"?q="+
"select count(*) as total,"+
"round((sum((case when age IS NULL or age = '' then 0 else (case when(nullif(age, 'NaN')::decimal) <=12 then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case1,"+
"round((sum((case when age IS NULL or age = '' then 0 else (case when((nullif(age, 'NaN')::decimal) >=13 and (nullif(age, 'NaN')::decimal) <= 17) then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case2,"+
"round((sum((case when age IS NULL or age = '' then 0 else (case when((nullif(age, 'NaN')::decimal) >=18 and (nullif(age, 'NaN')::decimal) <= 24) then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case3,"+
"round((sum((case when age IS NULL or age = '' then 0 else (case when((nullif(age, 'NaN')::decimal) >=25 and (nullif(age, 'NaN')::decimal) <= 34) then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case4,"+
"round((sum((case when age IS NULL or age = '' then 0 else (case when((nullif(age, 'NaN')::decimal) >=35 and (nullif(age, 'NaN')::decimal) <= 44) then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case5,"+
"round((sum((case when age IS NULL or age = '' then 0 else (case when((nullif(age, 'NaN')::decimal) >=45 and (nullif(age, 'NaN')::decimal) <=65) then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case6, "+
"round((sum((case when age IS NULL or age = '' then 0 else (case when((nullif(age, 'NaN')::decimal) >65) then 1 else 0 end) end))/cast(count(*) as decimal(5,2)))*100,1) as case7 from " + table_prefix + "homicide_20130104_di "+where+"&api_key="+cdaSettings.cartodb.api_key,
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
_.each(data.rows, function(datum) {
/* [datum.case1+"%", datum.case1],
[datum.case2+"%", datum.case2],
[datum.case3+"%", datum.case3],
[datum.case4+"%", datum.case4],
[datum.case5+"%", datum.case5],
[datum.case6+"%", datum.case6]*/
var neighborhood = getQueryVariable('neighborhood');
var categories = new Array();
var labelColors = new Array();
if(datum.case1!==0){
if(neighborhood=='Lawndale' ){
categories.push(new Array('12 OR
YOUNGER
'+datum.case1+"%",datum.case1));
}else if(neighborhood=='Little+Village' ){
categories.push(new Array('12 OR YOUNGER
'+datum.case1+"%",datum.case1));
}else{
categories.push(new Array('12 OR YOUNGER
'+datum.case1+"%",datum.case1));
}
labelColors.push('#debd20');
}
if(datum.case2!==0){
if(neighborhood==''||neighborhood=='Back+of+the+Yards' || neighborhood=='Calumet+Heights'|| neighborhood=='Auburn+Gresham'||neighborhood=='Englewood'|| neighborhood=='North+Lawndale' || neighborhood=='Washington+Park' || neighborhood=='Ashburn'|| neighborhood=='Belmont+Cragin'|| neighborhood=='Grand+Crossing'|| neighborhood=='Greater+Grand+Crossing' || neighborhood=='Humboldt+Park'|| neighborhood=='New+City'|| neighborhood=='South+Shore' || neighborhood=='Uptown' || neighborhood=='West+Pullman' || neighborhood=='Woodlawn'){
categories.push(new Array('13-17
'+datum.case2+"%",datum.case2));
}else{
categories.push(new Array('13-17
'+datum.case2+"%",datum.case2));
}
labelColors.push('#5194ad');
}
if(datum.case3!==0){
if(neighborhood=='Calumet+Heights'||neighborhood=='Englewood' ||neighborhood=='North+Lawndale' || neighborhood=='Washington+Park' ){
categories.push(new Array('18-24
'+datum.case3+"%",datum.case3));
}else if(neighborhood=='Pullman'){
categories.push(new Array('18-24'+datum.case3+"%",datum.case3));
}else{
categories.push(new Array('18-24
'+datum.case3+"%",datum.case3));
}
labelColors.push('#3a7646');
}
if(datum.case4!==0){
if(neighborhood=='Back+of+the+Yards'|| neighborhood=='Auburn+Gresham'){
categories.push(new Array('25-34
'+datum.case4+"%",datum.case4));
}else{
categories.push(new Array('25-34
'+datum.case4+"%",datum.case4));
}
labelColors.push('#b20017');
}
if(datum.case5!==0){
if(neighborhood=='Back+of+the+Yards' || neighborhood=='Auburn+Gresham'||neighborhood=='Englewood'||neighborhood=='South+Lawndale' || neighborhood=='Washington+Park'|| neighborhood=='Gage+Park'){
categories.push(new Array('35-44
'+datum.case5+"%",datum.case5));
}else{
categories.push(new Array('35-44
'+datum.case5+"%",datum.case5));
}
labelColors.push('#57490c');
}
if(datum.case6!==0){
if(neighborhood=='Greater+Grand+Crossing' || neighborhood=='Uptown'){
categories.push(new Array('45-64
'+datum.case6+"%",datum.case6));
}else{
categories.push(new Array('45-64
'+datum.case6+"%",datum.case6));
}
labelColors.push('#383662');
}
if(datum.case7!==0){
categories.push(new Array('65+
'+datum.case7+"%",datum.case7));
labelColors.push('#f17544');
}
Highcharts.setOptions({colors:labelColors});
chart = new Highcharts.Chart({
chart: {
renderTo: 'age-breakdown',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
spacingLelft: 0,
events:{
load : function(){
//$('#age-breakdown path').attr('stroke-width',0)
//alert($('.highcharts-data-labels g').attr('transform','translate(150,150)'))
}
}
},
title: {
text: ''
},
tooltip: {
enabled:false
},
exporting: {
buttons: {
printButton:{
enabled:false
},
exportButton: {
enabled:false
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
color: '#000000',
distance: 25,
connectorColor: '#cccccc',
formatter: function() {
/*if(this.y>15){
this.point.dataLabels.distance = -10;
}else{
this.point.dataLabels.distance = 10;
}*/
return ''+ this.point.name +'
';
}
}
}
},
credits: {
enabled: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: categories,
pointHeight: 20
}]
});
});
}
});
//time-of-occurance
$.ajax({
url: cdaSettings.cartodb.base_url+"?q="+
"select sum(morning) as morning,sum(midday) as midday,sum(evening) as evening from " + table_prefix + "homicide_20130104_di "+where+"&api_key="+cdaSettings.cartodb.api_key,
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
_.each(data.rows, function(datum) {
$('#time-of-occurance .num:eq(0)').html(datum.morning);
$('#time-of-occurance .num:eq(1)').html(datum.midday);
$('#time-of-occurance .num:eq(2)').html(datum.evening);
var total = (datum.morning+datum.midday+datum.evening)
$('#explore-murder-type .info').html('* Calculations based off of '+total+' reported times of death.')
});
}
});
//chicago-murders by month
$.ajax({
url: cdaSettings.cartodb.base_url+"?q="+
"select sum(case when extract(month from date_backup)=1 then 1 else 0 end) as Jan,"+
"sum(case when extract(month from date_backup)=2 then 1 else 0 end) as Feb, "+
"sum(case when extract(month from date_backup)=3 then 1 else 0 end) as Mar, "+
"sum(case when extract(month from date_backup)=4 then 1 else 0 end) as Apr, "+
"sum(case when extract(month from date_backup)=5 then 1 else 0 end) as May, "+
"sum(case when extract(month from date_backup)=6 then 1 else 0 end) as Jun, "+
"sum(case when extract(month from date_backup)=7 then 1 else 0 end) as Jul, "+
"sum(case when extract(month from date_backup)=8 then 1 else 0 end) as Aug, "+
"sum(case when extract(month from date_backup)=9 then 1 else 0 end) as Sep, "+
"sum(case when extract(month from date_backup)=10 then 1 else 0 end) as Oct, "+
"sum(case when extract(month from date_backup)=11 then 1 else 0 end) as Nov, "+
"sum(case when extract(month from date_backup)=12 then 1 else 0 end) as Dec "+
"from " + table_prefix + "homicide_20130104_di "+where+"&api_key="+cdaSettings.cartodb.api_key,
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
_.each(data.rows, function(datum) {
Highcharts.setOptions({
colors: ['#B20017','#B20017']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'murders-by-month',
zoomType: 'x',
spacingRight: 20
},
title: {
text:''
},
xAxis: {
tickWidth:0,
minorTickWidth:0,
tickPosition:'inside',
startOnTick: false,
endOnTick: false,
categories: [
'JAN',
'FEB',
'MAR',
'APR',
'MAY',
'JUN',
'JUL',
'AUG',
'SEP',
'OCT',
'NOV',
'DEC'
],
plotLines: [{
value: 0,
width: 0,
color: '#ffffff'
}],
minPadding:2,
gridLineWidth:0,
minorGridLineWidth:0,
labels: {
y:10,
style: {
fontFamily: '"Titillium Web",Arial',
fontWeight:700,
}
}
},
exporting: {
buttons: {
printButton:{
enabled:false
},
exportButton: {
enabled:false
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
y:10,
style: {
fontFamily: '"Titillium Web",Arial',
fontWeight: 700
}
},
tickWidth:0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineWidth: 1,
showFirstLabel: false,
plotLines: [{
value: 0,
width: 0,
color: '#ffffff'
}]
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
area: {
fillColor:'#e7ced1',
lineWidth: 2,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 1
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 3
}
},
threshold: null,
padding:2
},
},
series: [{
type: 'area',
name: 'death',
data: [
datum.jan,datum.feb,datum.mar,datum.apr,datum.may,datum.jun,datum.jul,datum.aug,datum.sep,datum.oct,datum.nov,datum.dec
],
lineWidth:4
}]
});
});
}
});
};
init_funcs['tall'].push([explore_tall,'']);
init_funcs['default'].push([explore_default,'']);
$(window).resize();
// render_chart();
});
var explore_tall = function(){
$('#murder-breakdown').css('width','620px');
$('#murder-breakdown').css('height','326px');
$('#murder-breakdown').css('float','none');
$('#murder-breakdown').css('margin','0');
$('#murder-breakdown').css('position','relative');
$('#murder-breakdown').css('left','-10px');
$('#explore-murder-type.column2').css('width','600px');
$('#murders-by-month').css('width','600px');
$('#murders-by-month').css('min-width','600px');
$('#explore-murders-by-month').css('margin-top','15px');
$('#explore-murder-by-day.column2').css('min-width','600px');
$('#time-of-occurance').css('margin-left','auto');
$('#time-of-occurance').css('margin-right','auto');
$('#time-of-occurance').css('width','420px');
render_chart();
};
var explore_default = function(){
$('#murder-breakdown').css('width','700px');
$('#murder-breakdown').css('height','380px');
$('#murder-breakdown').css('float','right');
$('#murder-breakdown').css('position','static');
$('#explore-murder-type.column2').css('width','419px');
$('#explore-murders-by-month').css('margin-top','0px');
$('#murders-by-month').css('width','800px');
$('#murders-by-month').css('min-width','800px');
$('#explore-murder-by-day.column2').css('min-width','419px');
render_chart();
};