consonance/docs/components/Scale.jsx

Fix your typographic scale

const React = require('react');
const R = require('ramda');
const d3 = require('d3');
const ReactFauxDOM = require('react-faux-dom');

const Scale = React.createClass({
  render() {
    let r = 6;
    const margin = {
      top: 20,
      right: r,
      bottom: 20,
      left: r
    }

    let svg = d3.select(ReactFauxDOM.createElement('svg'));

    let bothLists = R.concat(this.props.input, this.props.scale);

    let dMin = R.apply(Math.min, bothLists);
    let dMax = R.apply(Math.max, bothLists);

    let x = d3
      .scale
      .linear()
      .range([0, 960])
      .domain([dMin, dMax])

    svg
      .attr('width', 1024)//R.sum([1024, margin.left, margin.right]))
      .attr('height', R.sum([40, margin.top, margin.bottom]))

    let g = svg
      .append('g')
      .attr({'transform': `translate(${margin.left}, ${margin.top})`});

    g.selectAll('.label')
     .data(this.props.scale)
     .enter()
     .append('text')
     .attr('class', 'label')
     .attr('x', (d) => x(d) )
     .attr('dx', -8)
     .text((d) => d)
     .style('fill', '#9B9B9B')
     .style('fill-opacity', 0.5)

    g.selectAll('.dot.scale')
     .data(this.props.scale)
     .enter()
     .append('circle')
     .attr('class', 'dot scale')
     .attr('cx', (d) => x(d) )
     .attr('cy', 3 * r)
     .attr('r', r)
     .style('fill', '#C6A17D')

    g.selectAll('.dot.input')
     .data(this.props.input)
     .enter()
     .append('circle')
     .attr('class', 'dot input')
     .attr('cx', (d) => x(d) )
     .attr('cy', 6 * r)
     .attr('r', r)
     .style('fill', '#9B9B9B')
     .style('fill-opacity', 0.5)

    return svg.node().toReact();
  }
});

module.exports = Scale;