Beijing TV viewership in 2017
vegalite = require("@observablehq/vega-lite@0.1")
z = require('https://bundle.run/zebras@0.0.11')
TV = d3.csv(TVurl)
TVParsed={
var TVParse=z.parseNums(["open rate"], TV)
var TVParse2=z.parseNums(["Time"], TVParse)
return TVParse2
}
bikeParseFilter0={
return z.filter(r=> r.Bike_t=="0", bikeshareParsed)
}
vegalite({
title: "2017 TV viewership of Beijing",
data: {values: TVParsed},
mark: "point",
encoding: {
x: {timeUnit: "month", field: "Date", type: "temporal",
axis: {title: "Date"}}, // this allows us to change the property of axis
y: {aggregate: "mean",field: "Time", type: "quantitative",
scale: {"domain": [100,200]},
axis: {title: "Number of minutes"}} // this allows us to change the property of axis
}
})
viewof view_line_plot = embed({
title: "Subway Ridership by Bike Sharing Intensity",
data: {values: bikeshareParsed},
encoding: {
x: {timeUnit: "yearmonth", field: "Date", type: "temporal",
axis: {title: "Date"}}
},
layer: [
{ mark: {type: "errorband", extent: "ci"},
encoding: {
y: {
field: "meanDaily",type: "quantitative",
scale: {"domain": [50,100]},
axis: {title: "Mean Subway Daily Ridership (95% CI)"}
}
}},
{mark: "line",
encoding: {
y: {
aggregate: "mean",field: "meanDaily", type: "quantitative",
scale: {"domain": [50,100]}}
},
color: {field: "high", type: "nominal"}
},
{mark: {type: "errorband", extent: "ci"},
encoding: {
y: {
field: "meanDaily",type: "quantitative",
scale: {"domain": [50,100]},
axis: {title: "Mean Subway Daily Ridership (95% CI)"}
}
}},
{mark: "line",
encoding: {
y: {
aggregate: "mean",field: "meanDaily", type: "quantitative",
scale: {"domain": [50,100]}}
},
color: {field: "high", type: "nominal"}
}]
})
viewof view_line_plot2 = embed({
title: "Subway Ridership by Bike Sharing Intensity",
data: {values: bikeshareParsed},
mark: {type: "errorband", extent: "stdev", opacity: 0.2},
encoding: {
x: {timeUnit: "yearmonth", field: "Date", type: "temporal",
axis: {title: "Date"}},
y: {
field: "meanDaily", type: "quantitative",scale: {"domain": [40,100]},
title:"Mean of Subway Ridership (95% CIs)"
},
color: {field: "high", type: "nominal"}
}
})
viewof view_2 = embed({
title: "Subway Ridership by Bike Sharing Intensity",
data: {values: bikeParseFilter0},
mark:"line",
encoding:{
x: {timeUnit: "year", field: "Date", type: "temporal", axis: {title: "Date"}},
y:{aggregate: "mean",field: "meanDaily", type: "quantitative",scale: {"domain": [40,100]}},
color: {field: "high", type: "nominal"}
}
})
addMean={
var high_pre=z.filter(r=>r.high=="0",bikeParseFilter0)
var mean_high=z.getCol("meanDaily",high_pre)
var mean_ob_high={"mean": (mean_high.reduce(function(a,b){return a+b},0))/mean_high.length}
var mean_pre_high = high_pre.map(x=> Object.assign(x,mean_ob_high))
var high_post=z.filter(r=>r.high=="0",bikeParseFilter1)
var mean2_high=z.getCol("meanDaily",high_post)
var mean_ob2_high={"mean": (mean2_high.reduce(function(a,b){return a+b},0))/mean2_high.length}
var mean_post_high = high_post.map(x=> Object.assign(x,mean_ob2_high))
return mean_post_high
for (var i=0; i< mean_post_high.length; i++){
mean_pre_high.push(mean_post_high[i])
}
return mean_pre_high
}
viewof view_line_plote = embed({
title: "Subway Ridership by Bike Sharing Intensity",
data: {values: addMean},
layer:[{
mark:"line",
encoding:{
x: {timeUnit: "yearmonth", field: "Date", type: "temporal",
axis: {title: "Date"}},
y:{aggregate: "mean",field: "mean", type: "quantitative"},
color: {field: "high", type: "nominal"}
}
},
{
mark:"line",
encoding:{
x: {timeUnit: "yearmonth", field: "Date", type: "temporal",
axis: {title: "Date"}},
y:{aggregate: "mean",field: "mean", type: "quantitative"},
color: {field: "high", type: "nominal"}
}
},
{
mark: "line",
encoding: {
x: {timeUnit: "yearmonth", field: "Date", type: "temporal",
axis: {title: "Date"}},
y: {
aggregate: "mean",field: "meanDaily", type: "quantitative",scale: {"domain": [40,100]}},
color: {field: "high", type: "nominal"}
}},
//standerror of trend lines
{
mark: {type: "errorband", extent: "stdev", opacity: 0.2},
encoding: {
x: {timeUnit: "yearmonth", field: "Date", type: "temporal",
axis: {title: "Date"}},
y: {
field: "meanDaily", type: "quantitative",scale: {"domain": [40,100]},
title:"Mean of Subway Ridership (95% CIs)"
},
color: {field: "high", type: "nominal"}
}}
]
})
viewof view_box_plot = embed({
title:{text:"2017 TV viewership in Beijing"},
width: 400,
data: {values: TVParsed},
hconcat:[{mark: "point",
encoding: {
x: {timeUnit: "month", field: "Date", type: "temporal",
axis: {title: "Date"}}, // this allows us to change the property of axis
y: {aggregate: "mean",field: "Time", type: "quantitative",
scale: {"domain": [100,200]},
axis: {title: "Number of minutes"}} // this allows us to change the property of axis
}
},
{mark: "point",
encoding: {
x: {timeUnit: "month", field: "Date", type: "temporal",
axis: {title: "Date"}}, // this allows us to change the property of axis
y: {aggregate: "mean",field: "open rate", type: "quantitative",
scale: {"domain": [0.4,0.7]},
axis: {title: "open rate"}} // this allows us to change the property of axis
}}]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
