Director of Baseball Research and Development
chart = {
const margin = { top: 50, right: 50, bottom: 50, left: 100 };
const width = 600,
height = 550;
const color = d3.scaleOrdinal(d3.schemeCategory10);
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("text")
.attr("x",width/2)
.attr("y",0)
.attr("text-anchor","middle")
.style("fill","#b00")
.style("font-size","1.5rem")
.text("MLB Swing & Miss % Since 1999")
const x = d3.scaleLinear().range([0,width]).domain([1999, 2021]);
const y = d3.scaleLinear().range([height,0]).domain([0,30]);
const line = d3.line().x(d=>x(d.year)).y(d=>y(d.percent))
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d=>Number(d)));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left/2)
.attr("x", 0 - height / 2)
.attr("dy", "0em")
.style("text-anchor", "middle")
.attr("fill","#000")
.text("Swing and Miss %")
g.append("path")
.attr("d",line(smData))
.attr("fill","none")
.attr("stroke","#f5f5f5")
.attr("stroke-width","3px")
const graph = g.selectAll('graph')
.data(smData)
.enter();
graph.append("text")
.attr("x",d=>x(Number(d.year)))
.attr("y",d=>y(Number(d.percent)))
.attr("dx",-3)
.attr("dy",4)
.style("font-size","1.4rem")
.text('💨');
/*const mph = g.selectAll('mph')
.data(mphData)
.enter();
mph.append("text")
.attr("x",d=>x(Number(d.year)))
.attr("y",d=>y(Number(d.percent)))
.attr("dx",-3)
.attr("dy",4)
.style("font-size","1.4rem")
.text('🔥'); */
return svg.node();
}
mphData = await FileAttachment('95mph.csv').csv();
smData = await FileAttachment('misses@1.csv').csv();
_ = require('lodash');
d3 = require('d3');
html`
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<style>
text {
font-family: 'Roboto Condensed';
font-size: 1rem;
}
</style>
`
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.
