Chapter 6 Interactive component
##Interactive
data<-read.csv(file = 'ca-educational-attainment-personal-income-2008-2014.csv', header = TRUE)
data_p<-data %>% filter(Age == '18 to 64')
data_p$Educational.Attainment<-factor(data_p$Educational.Attainment,
levels = c("Bachelor's degree or higher","Some college, less than 4-yr degree",
"High school or equivalent","No high school diploma"))
data_p$Personal.Income<-factor(data_p$Personal.Income,
levels = c('$75,000 and over','$50,000 to $74,999','$35,000 to $49,999','$25,000 to $34,999',
'$15,000 to $24,999','$10,000 to $14,999','$5,000 to $9,999','No Income'))
data_p$Year<-fct_recode(data_p$Year,
"2008"='01/01/2008 12:00:00 AM',"2009"='01/01/2009 12:00:00 AM',
"2010"='01/01/2010 12:00:00 AM',"2011"='01/01/2011 12:00:00 AM',
"2012"='01/01/2012 12:00:00 AM',"2013"='01/01/2013 12:00:00 AM',
"2014"='01/01/2014 12:00:00 AM')
data_p$Educational.Attainment<- fct_recode(data_p$Educational.Attainment,
">=Bachelor" = "Bachelor's degree or higher","College (<4year)" = "Some college, less than 4-yr degree",
"High school or equivalent" = "High school or equivalent","< high school" = "No high school diploma")
data_p$Personal.Income<- fct_recode(data_p$Personal.Income,
"[75k,inf)"='$75,000 and over',"[50k,75k)"='$50,000 to $74,999',"[35k,50k)"='$35,000 to $49,999',
"[25k,35k)"='$25,000 to $34,999',"[15k,25k)"='$15,000 to $24,999',"[10k,15k)"='$10,000 to $14,999',
"[5k,10k)"='$5,000 to $9,999','No Income'='No Income')6.0.1 line plot
population proportion for salary level for different year. interactive in showing the exact data when mouse is on points.
data_inter<-data_p %>% group_by(Year, Personal.Income) %>% #if we study gender, add Gender
mutate(total = sum(Population.Count)) %>% group_by(Year) %>%
mutate(year_total = sum(Population.Count)) %>% ungroup() %>%
summarise(Year = Year, Personal.Income = Personal.Income, ratio = total/year_total) %>%
unique()
fig1 <- ggplot(data_inter) + geom_point(aes(x = Year, y = ratio, color = Personal.Income))+
geom_line(aes(x = Year, y = ratio, group = Personal.Income, color = Personal.Income))
ggplotly(fig1)data_inter_gender<-data_p %>% group_by(Gender,Year, Personal.Income) %>% #if we study gender, add Gender
mutate(total = sum(Population.Count)) %>% group_by(Gender, Year) %>%
mutate(year_total_G = sum(Population.Count)) %>% ungroup() %>%
summarise(Year = Year, Gender = Gender, Personal.Income = Personal.Income, ratio = total/year_total_G) %>%
unique()
fig2 <- ggplot(data_inter_gender) + geom_point(aes(x = Year, y = ratio, color = Personal.Income))+
geom_line(aes(x = Year, y = ratio, group = Personal.Income, color = Personal.Income))+facet_grid(~Gender)
ggplotly(fig2)6.0.2 interactive choices for users, bar plots
#total
n1<-nPlot(ratio ~ Year, group = 'Personal.Income', data = data_inter, type = 'multiBarChart')
n1 $ yAxis(tickFormat = "#! function(d) {return d3.format(',.2f')(d)} !#")
n1$print('inline', include_assets = F, cdn = FALSE)##
## <div id = 'inline' class = 'rChart nvd3'></div>
## <script type='text/javascript'>
## $(document).ready(function(){
## drawinline()
## });
## function drawinline(){
## var opts = {
## "dom": "inline",
## "width": 800,
## "height": 400,
## "x": "Year",
## "y": "ratio",
## "group": "Personal.Income",
## "type": "multiBarChart",
## "id": "inline"
## },
## data = [
## {
## "Year": "2008",
## "Personal.Income": "No Income",
## "ratio": 0.1328750003925
## },
## {
## "Year": "2008",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.0734457745864
## },
## {
## "Year": "2008",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.08503806571889
## },
## {
## "Year": "2008",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1534461363739
## },
## {
## "Year": "2008",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.1230597796255
## },
## {
## "Year": "2008",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1388598659577
## },
## {
## "Year": "2008",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1442909903985
## },
## {
## "Year": "2008",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.1489843869466
## },
## {
## "Year": "2009",
## "Personal.Income": "No Income",
## "ratio": 0.1264817334241
## },
## {
## "Year": "2009",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.08212908730435
## },
## {
## "Year": "2009",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.08711445512933
## },
## {
## "Year": "2009",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1603310076424
## },
## {
## "Year": "2009",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.1204172326732
## },
## {
## "Year": "2009",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1321231612664
## },
## {
## "Year": "2009",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1400736224178
## },
## {
## "Year": "2009",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.1513297001425
## },
## {
## "Year": "2010",
## "Personal.Income": "No Income",
## "ratio": 0.1421173338886
## },
## {
## "Year": "2010",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.08256252306128
## },
## {
## "Year": "2010",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.09053556931225
## },
## {
## "Year": "2010",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1547553976077
## },
## {
## "Year": "2010",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.1198847402394
## },
## {
## "Year": "2010",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1305453238045
## },
## {
## "Year": "2010",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1323006130552
## },
## {
## "Year": "2010",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.147298499031
## },
## {
## "Year": "2011",
## "Personal.Income": "No Income",
## "ratio": 0.1561693017081
## },
## {
## "Year": "2011",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.07934051015295
## },
## {
## "Year": "2011",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.09661131953591
## },
## {
## "Year": "2011",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1525424678615
## },
## {
## "Year": "2011",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.1149257837959
## },
## {
## "Year": "2011",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1271933019726
## },
## {
## "Year": "2011",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1288674105369
## },
## {
## "Year": "2011",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.1443499044362
## },
## {
## "Year": "2012",
## "Personal.Income": "No Income",
## "ratio": 0.159636312384
## },
## {
## "Year": "2012",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.08930475356364
## },
## {
## "Year": "2012",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.09017279455122
## },
## {
## "Year": "2012",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1547747643757
## },
## {
## "Year": "2012",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.112236435336
## },
## {
## "Year": "2012",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1244211638817
## },
## {
## "Year": "2012",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1200526700674
## },
## {
## "Year": "2012",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.1494011058404
## },
## {
## "Year": "2013",
## "Personal.Income": "No Income",
## "ratio": 0.1521399596291
## },
## {
## "Year": "2013",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.07987895303516
## },
## {
## "Year": "2013",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.08834730948474
## },
## {
## "Year": "2013",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1520372811959
## },
## {
## "Year": "2013",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.1184967715115
## },
## {
## "Year": "2013",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1261142672134
## },
## {
## "Year": "2013",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1214883739211
## },
## {
## "Year": "2013",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.1614970840091
## },
## {
## "Year": "2014",
## "Personal.Income": "No Income",
## "ratio": 0.1632038548276
## },
## {
## "Year": "2014",
## "Personal.Income": "[5k,10k)",
## "ratio": 0.08059992610039
## },
## {
## "Year": "2014",
## "Personal.Income": "[10k,15k)",
## "ratio": 0.08401298747167
## },
## {
## "Year": "2014",
## "Personal.Income": "[15k,25k)",
## "ratio": 0.1496325995184
## },
## {
## "Year": "2014",
## "Personal.Income": "[25k,35k)",
## "ratio": 0.118963004835
## },
## {
## "Year": "2014",
## "Personal.Income": "[35k,50k)",
## "ratio": 0.1234732208919
## },
## {
## "Year": "2014",
## "Personal.Income": "[50k,75k)",
## "ratio": 0.1201359505486
## },
## {
## "Year": "2014",
## "Personal.Income": "[75k,inf)",
## "ratio": 0.1599784558064
## }
## ]
##
## if(!(opts.type==="pieChart" || opts.type==="sparklinePlus" || opts.type==="bulletChart")) {
## var data = d3.nest()
## .key(function(d){
## //return opts.group === undefined ? 'main' : d[opts.group]
## //instead of main would think a better default is opts.x
## return opts.group === undefined ? opts.y : d[opts.group];
## })
## .entries(data);
## }
##
## if (opts.disabled != undefined){
## data.map(function(d, i){
## d.disabled = opts.disabled[i]
## })
## }
##
## nv.addGraph(function() {
## var chart = nv.models[opts.type]()
## .width(opts.width)
## .height(opts.height)
##
## if (opts.type != "bulletChart"){
## chart
## .x(function(d) { return d[opts.x] })
## .y(function(d) { return d[opts.y] })
## }
##
##
##
##
##
##
##
##
## chart.yAxis
## .tickFormat( function(d) {return d3.format(',.2f')(d)} )
##
## d3.select("#" + opts.id)
## .append('svg')
## .datum(data)
## .transition().duration(500)
## .call(chart);
##
## nv.utils.windowResize(chart.update);
## return chart;
## });
## };
## </script>