Bubble chart of highest income tax rate vs highest income tax bracket in 2012. Sized by GDP per capita.

<!DOCTYPE html>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="colorbrewer.css">
<style>
body {
  font-family: "Gill Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.2em;
}

.fade {
  opacity: 0.1;
}

.point,
.point circle,
.point text {
  -webkit-trasition: opacity 350ms ease-in-out;
}

.point circle {
  fill-opacity: 0.3;
}

.point text {
  display: none;
}

.point .visible {
  display: block;
}

.axis .domain {
  display: none;
}

.axis .title {
  font-size: 12px;
  text-anchor: middle;
}

.axis line {
  stroke: #ddd;
}

.axis text {
  fill: #ccc;
}
</style>

<body>

<div>
<label for="filter">filter:</label>
<input id="filter" type="text"/>
</div>

var margin = {top: 10, right: 10, bottom: 40, left: 50};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var x = d3.scale.linear().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    r = d3.scale.sqrt().range([2, 20]),
    color = d3.scale.category10();

var xAxis = d3.svg.axis().scale(x).orient('bottom'),
    yAxis = d3.svg.axis().scale(y).orient('left');

var format = d3.format(',g');

filter.addEventListener('input', updateFilter);

d3.json('taxes.json', function (err, data) {
  data = data.rows.sort(function (a, b) { return b.income - a.income; });

x.domain(d3.extent(data, function (d) { return d.income; }));
  y.domain(d3.extent(data, function (d) { return d.taxRate; }));
  r.domain(d3.extent(data, function (d) { return d.gdp_per_cap; }));

var point = svg.selectAll('.point').data(data)
    .enter().append('g')
      .attr('class', 'point')
      .attr('transform', function (d) { return 'translate(' +  x(d.income) + ',' + y(d.taxRate) + ')'; });

point.append('circle')
      .attr('r', function (d) { return r(d.gdp_per_cap); })
      .attr('fill', function (d) { return color(d.continent); })
      .on('mouseover', function (d) {
        svg.selectAll('.' + d.adm0_a3).classed('visible', true);
      })
      .on('mouseout', function (d) {
        svg.selectAll('.' + d.adm0_a3).classed('visible', false);
      });

point.append('text')
    .attr('class', function (d) { return d.adm0_a3; })
    .attr('dx', 2)
    .attr('dy', -2)
    .text(function (d) { return d.name; })

svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis)
    .append('text')
      .attr('class', 'title')
      .attr('transform', 'translate(' + (width/2) + ',' + margin.bottom + ')')
      .text('Minimum Income Level of Highest Tax Bracket');

svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)
    .append('text')
      .attr('class', 'title')
      .attr('dy', '1em')
      .attr('transform', 'translate(' + (-margin.left) + ',' + (height / 2) + ')rotate(-90)')
      .text('Tax Rate of Highest Tax Bracked in 2012');
});

function updateFilter(event) {
  var empty = event.target.value.length === 0,
      query = new RegExp('^' + event.target.value, 'i');

svg.selectAll('.point')
      .classed('fade', function (d) { return !empty && query.exec(d.name) === null; });
}

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js