Published
Edited
Feb 26, 2020
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white")
var chart = new Chart({element:svg,svgDims:svgDims,data:points,x:x,y:y,xlims:[-5,5],ylims:[-5,5],origin:[0,0]})
var data = chart.data
var xScale = chart.xScale
var yScale = chart.yScale
for(var i=0;i < data.length;i++){
svg.append("circle")
.attr("r",3)
.attr("cx",xScale(data[i].plate_x))
.attr("cy",yScale(data[i].plate_z))
.attr("fill","cornflowerblue")
.attr("stroke","black")
}
chart.draw()
yield svg.node()
}
{
var svgDims = [600,300]
var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white")
var chart = new Chart({element:svg,svgDims:svgDims,data:points,x:x,y:y,xlims:[-5,5],ylims:[-5,5],origin:[0,0]})
var data = chart.data
var xScale = chart.xScale
var yScale = chart.yScale
var dataFilt = data.filter(d => d.player_name == s)
for(var i=0;i < dataFilt.length;i++){
svg.append("circle")
.attr("r",3)
.attr("cx",xScale(dataFilt[i].plate_x))
.attr("cy",yScale(dataFilt[i].plate_z))
.attr("fill",colors[dataFilt[i].inning_topbot])
.attr("stroke","black")
}
chart.draw()
yield svg.node()
}
viewof s = select({options:players})
colors = ({Bot:"tomato",Top:"cornflowerblue"})
colors["Top"]
players = [...new Set(points.map(d => d.player_name))]
// For Loop
{
for(var i = 0;i < 10; i++){
}
}
// While Loop
{
var i = 0
while(i < 10){
i++
}
}
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.
