creating a strip plot - step 3

App.js

// ./src/components/App.js
import React from 'react';
import {scaleLinear} from 'd3-scale';
import _ from 'lodash';

class App extends React.Component {
  stripLine(scale, dimensions, value, index) {
    const {height, margin} = dimensions;

    return (
      <line
        key={index}
        x1={scale(value)}
        y1={height - margin.bottom - 4}
        x2={scale(value)}
        y2={height - margin.bottom - 24} />
    );
  }

  render() {
    const {width, height, margin} = this.props;
    const scale = scaleLinear()
      .domain([0, 100])
      .range([margin.left, width - margin.right]);

    const createStripLine = _.curry(this.stripLine)(scale, this.props);
    const values = [0, 50, 100];

    return (
      <svg
        width={width}
        height={height}
        style={{
          backgroundColor: "#E3C44D",
          stroke: "black"
        }}
      >
        <line
          x1={margin.left}
          y1={height - margin.bottom}
          x2={width - margin.right}
          y2={height - margin.bottom} />

        {
          _.map(values, createStripLine)
        }
      </svg>
    );
  }
}

export default App;