JakenHerman

getTextXValue = (x) => {
   const stringLength = Math.floor((x/150)*100).toString().length;
   switch (stringLength) {
    case 1: return x + 7;
    case 2: return x + 4;
    default: return x;
   }
};

JakenHerman

statLabels = svg.selectAll('.labels')
                    .data(percentileData)
                    .enter()
                    .append('text')
                        .attr('class', 'labels')
                        .attr('x', 5)
                        .attr('y', d => d.cy - 6)
                        .text(d => d.label)
                        .attr('font-family', 'sans-serif')
                        .attr('font-weight', 'bolder')

JakenHerman

circles = svg.selectAll('.ranks')
                   .data(percentileData)
                   .enter()
                   .append('circle')
                      .attr('class', 'ranks')
                      .attr('cx', d => d.cx + 10 )
                      .attr('cy', d => d.cy )
                      .attr('r', d => 10)
                      .attr('fill', d => d3.interpolateRdBu(1-(Math.floor((d.cx/150)*100) / 100)))
                      .attr('stroke', 'black');

JakenHerman

lineDecorators = [
    { cx: getX(0), cy: 30 },     
    { cx: getX(50), cy: 30 },     
    { cx: getX(100), cy: 30 },
    { cx: getX(0), cy: 60 },     
    { cx: getX(50), cy: 60 },     
    { cx: getX(100), cy: 60 },     
    { cx: getX(0), cy: 90 },     
    { cx: getX(50), cy: 90 },     
    { cx: getX(100), cy: 90 },     

JakenHerman

const lines = svg.selectAll('line')
                  .data(percentileData)
                  .enter()
                  .append('line')
                    .style('stroke', 'rgb(155, 155, 155)')
                    .style('stroke-width', 2)
                    .attr('x1', 10)
                    .attr('x2', 160)
                    .attr('y1', d => d.cy)
                    .attr('y2', d => d.cy);

JakenHerman

svg = d3.create('svg')
    .attr('width', 170)
    .attr('height', 150);

JakenHerman

// Daniel Vogelbach (MIL) vs. 2020 season data
percentileData = [
  { label: 'Exit Velocity', cx: getX(63), cy: 30 },     
  { label: 'xBA', cx: getX(29), cy: 60 },     
  { label: 'K%', cx: getX(40), cy: 90 },     
  { label: 'Sprint Speed', cx: getX(5), cy: 120 }
];

JakenHerman

code,state,category,Drafted
AL,Alabama,state,4
AK,Alaska,state,0
AZ,Arizona,state,9
AR,Arkansas,state,4
CA,California,state,24
CO,Colorado,state,1
CT,Connecticut,state,0
DE,Delaware,state,0
FL,Florida,state,15

JakenHerman

import React from 'react';
import { Helmet } from 'react-helmet';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            titleName: ''
        };
    }

JakenHerman

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      titleName: ''
    };
  }
  changeTitle(ev) {
    this.setState({
      titleName: ev.target.value