The avatar for @credmond
Charles Redmond
Published
Intro Data Science Spring 2020
Edited
Feb 26, 2020
Fork of Starter Template Data Sets
•
2 forks
Intro Data Science Spring 2020
Intro to Data Science Spring 2020Starter Template Mathematical FunctionsStarter Template Data SetsHTML IntroBarbellHouseIntro to D3 and SlidersFor LoopsGenerative ArtTransitionsAnimationPoint PlottingBeginning GraphsLine ApplicationFunction Drawing ApplicationPractice Midterm Question 1Practice Midterm 2 DemonstrationPractice Midterm 2 Template and SolutionValentine's Day TemplateSpirals TemplateModular ArithmeticPathsPlotting a Function with a PathMore Plotting PracticeMore Area PracticeFiltering TutorialFiltering PracticeThe Normal CurveData SetsBeginning with DataMapSetMore With Time SeriesScatter PlotWednesday Final Practice 2
Wednesday Final Practice 1
Final 1 TemplateFinal 2 Template
Insert cell
Insert cell
{
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()
}
Insert cell
{
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()
}
Insert cell
viewof s = select({options:players})
Insert cell
colors = ({Bot:"tomato",Top:"cornflowerblue"})
Insert cell
colors["Top"]

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
players = [...new Set(points.map(d => d.player_name))]
Insert cell
Insert cell
// For Loop
{
for(var i = 0;i < 10; i++){
}
}
Insert cell
// While Loop
{
var i = 0
while(i < 10){
i++
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more