barchart1.js

var BarChart1 = React.createClass({
  render: function() {
    var x = scale.linear()
      .domain([0, _.max(this.props.data)])
      .range([0, 420]);

    return (
        <div className="chart">
        {
            this.props.data.map(function (n) {
              return <div style={{width: x(n)+'px'}}>{n}</div>;
            })
        }
        </div>
      );
  }
});

barchart2.jsx

class BarChart2 extends React.Component {
  render() {
    const data = this.props.data || [];

    const width = 420,
        barHeight = 20;

    const x = scale.linear()
        .domain([0, _.max(data)])
        .range([0, width]);

    return (
      <svg className="chart" width={width} height={barHeight * data.length}>
      {
        data.map((n, i) =>
            <g key={i} transform={`translate(0,${barHeight*i})`}>
              <rect width={x(n)} height={barHeight-1}></rect>
              <text x={x(n)-3} y="9.5" dy=".35em">{n}</text>
            </g>
        )
      }
      </svg>
    );
  }
}

client-use.jsx

import React from 'react';
import BarChart from './BarChart';

const mountNode = document.getElementById("reactNode");

React.render(<BarChart data={[1, 2, 3]} />, mountNode);

css-transition.jsx

const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
// ...
return (
    <svg className="chart csstrans" width={width} height={barHeight * data.length}>
        <ReactCSSTransitionGroup transitionName="addBar" component="g">
        {
          data.map((n, i) =>
              <g key={i} transform={`translate(0,${barHeight*i})`}>
                <rect width={x(n)} height={barHeight-1}></rect>
                <text x={x(n)-3} y="9.5" dy=".35em">{n}</text>
              </g>
          )
        }
        </ReactCSSTransitionGroup>
    </svg>

d3-chart.js

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

server-use.jsx

import React from 'react/addons';
import BarChart from './app/BarChart';
// ...
const reactHtml = React.renderToString(<BarChart data={[1, 2, 3]} />);
res.endTemplate('index.html', { reactOutput: reactHtml });