function visualization(selection, props){
  const { width, height, data } = props;

  const yValue = d => d.name;
  const xValue = d => d.price;

  const yScale = d3.scaleBand()
    .domain(data.map(yValue))
    .range([height, 0]);

  const xScale = d3.scaleLinear()
    .domain([0, d3.max(data, xValue)])
    .range([0, width]);

  // Create the data join.
  const bars = selection.selectAll('rect').data(data);

  // Handle the ENTER case - when elements first get added.
  const barsEnter = bars
    .enter().append('rect')
       .attr('x', 0); // The x values won't change, so we can set it on ENTER.

  // Set the bar position and dimensions on ENTER and UPDATE.
  barsEnter
    .merge(bars)
      .attr('y', d => yScale(yValue(d)))
      .attr('width', d => xScale(xValue(d)))
      .attr('height', yScale.bandwidth());

  // Remove bars for which there are no longer any corresponding data elements.
  bars.exit().remove();
}