32:Tafa,chart = { const svg = d3.select(DOM.svg(width, height+(margin*2))); const containerWidth = width-(margin*2); const containerHeight = height-(margin*2); const container = svg.append('g') .attr("width", containerWidth) .attr("height", containerHeight) .attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`); var axisGrid = container.append("g") .attr("class", "axisWrapper"); axisGrid .append("circle") .attr("class", "gridCircle") .attr("r", radius*1) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); axisGrid .append("circle") .attr("class", "gridCircle") .attr("r", rScale(0)) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); axisGrid.append("text") .attr("class", "legend") .style("font-size", "10px") .attr("text-anchor", "left") .attr("dx", "-0.9em") .attr("font-family", "monospace") .attr("x", rScale(0 * axisLabelFactor) * Math.cos(angleSlice*2.1 - Math.PI/2)) .attr("y", rScale(0 * axisLabelFactor) * Math.sin(angleSlice*1.3 - Math.PI/2)) .text("MLB average ⭢") const axis = axisGrid.selectAll(".axis") .data(axesDomain) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", (d, i) => rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "#bbbbbb") .style("stroke-width", 0.5); axis.append("text") .attr("class", "legend") .style("font-size", "12px") .attr("text-anchor", "middle") .attr("font-family", "monospace") .attr("dy", "0.35em") .attr("x", (d, i) => rScale(maxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2)) .text(d => labels[d]); const plots = container.append('g') .selectAll('g') .data(Object.entries(cubs)) .join('g') .attr("data-index", (d, i) => i) .attr("fill", "none") .attr("stroke", "steelblue"); plots.append('path') .attr("d", d => radarLine(d[1].map(v => v.value == null ? minValue : v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.1) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); plots.selectAll("circle") .data(d => d[1]) .join("circle") .attr("r", d => d.value == null ? 0 : dotRadius) .attr("cx", (d,i) => rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2)) .attr("cy", (d,i) => rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2)) .style("fill-opacity", 1); return svg.node(); }33:[] 30:{"title":"The best and worst performing pitches of each Chicago Cubs starter","cells":[{"id":0,"value":"md`# The best and worst performing pitches of each Chicago Cubs starter\n\nAs measured in 2018 by [FanGraph's pitch value per 100 pitches](https://www.fangraphs.com/leaders.aspx?pos=all&stats=sta&lg=all&qual=y&type=7&season=2018&month=0&season1=2018&ind=0&team=0&rost=0&age=0&filter=&players=0&page=2_30). Learn more about the statistic in [their explainer](https://library.fangraphs.com/offense/pitch-type-linear-weights/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"html`\n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof curveSelect = select({\n title: \"Curve type\",\n options: curveTypes,\n value: \"curveCardinalClosed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"formatPercent = d3.format(',.0%')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"wrapWidth = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"axisLabelFactor = 1.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"axisCircles = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"dotRadius = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"radius = (height-(margin*2)) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"margin = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"radarLine = d3.lineRadial()\n .curve(d3[curveSelect])\n .radius(d => rScale(d))\n .angle((d, i) => i * angleSlice)","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"angleSlice = Math.PI * 2 / axesLength","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"rScale = d3.scaleLinear()\n .domain([minValue, maxValue])\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"color = d3.scaleOrdinal()\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"axesLength = Object.values(clean_data)[0].length","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"labels = ({\n \"wFB/C\": \"Fastball\",\n \"wSL/C\": \"Slider\",\n \"wCT/C\": \"Cutter\",\n \"wCB/C\": \"Curve\",\n \"wCH/C\": \"Change\",\n \"wSF/C\": \"Splitter\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"axesDomain = Object.values(clean_data)[0].map(d => d.axis)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"maxValue = d3.max(_.flatten(Object.values(clean_data)).map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"minValue = d3.min(valueDomain)","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"valueDomain = _.flatten(Object.values(clean_data)).map(d => d.value).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"cubs = ({\n \"Jon Lester\": clean_data[\"Jon Lester\"],\n \"Yu Darvish\": [\n {axis: \"wFB/C\", value: -1.35},\n {axis: \"wSL/C\", value: -0.52}, \n {axis: \"wCT/C\", value: 0.31},\n {axis: \"wCB/C\", value: 2.32},\n {axis: \"wCH/C\", value: 2.90},\n {axis: \"wSF/C\", value: 1.64},\n ],\n \"Cole Hamels\": clean_data[\"Cole Hamels\"],\n \"Kyle Hendricks\": clean_data[\"Kyle Hendricks\"],\n \"Jose Quintana\": clean_data[\"Jose Quintana\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"clean_data = raw_data.reduce((obj, row) => {\n obj[row.Name] = prepRow(row)\n return obj\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"prepValue = d => d == \"\" || +d < -5.0 ? null : +d","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"prepRow = r => {\n return [\n {axis: \"wFB/C\", value: prepValue(r[\"wFB/C\"])},\n {axis: \"wSL/C\", value: prepValue(r[\"wSL/C\"])}, \n {axis: \"wCT/C\", value: prepValue(r[\"wCT/C\"])},\n {axis: \"wCB/C\", value: prepValue(r[\"wCB/C\"])},\n {axis: \"wCH/C\", value: prepValue(r[\"wCH/C\"])}\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"raw_data = await d3.csv(`https://gist.githubusercontent.com/palewire/ad6b9e6ce07961a1a00c3221a498fa4c/raw/778ee705b026be762ba373c3f650bb0f92f92bd3/fangraphs-starters-pitch-value-2018.csv`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {curveTypes} from \"@palewire/d3-curves-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}