#mapCanvas { width: 638px; height: 598px; border: 1px solid #222222; float: left;}#dataContainer { width: 305px; float: right; margin-left: 15px;}#dataContainer header.active h2 { background-color: #FFCC20; color: #000000;}.clickPrompt { text-align: center; font-style: italic; font-weight: bold; font-size: 12px; padding: 1em 0;}.dropdownStyle { font-size: 16px; text-align: center;}.separator h2 { margin: 0 0 5px 0; padding: 0.6em 0; text-align: center;}#map_footer { margin-top: 15px; font-size: 1.2em;}.superClear { clear: both;}.legend { background-color: white; border: 1px solid #ABABAB; margin: 0 5px 0 5px; padding: 5px 10px; text-align: center; font-size: 12px;}.legend_row { height:15px; margin-bottom: 3px;}.legend_text { line-height: 15px; padding-left: 5px;}#legend_title { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #ABABAB;}.legend_color_set { float: left; display: block; overflow: hidden; height: 13px; width: 13px; border: 1px solid #CCC; margin-bottom: 2px;}.legend_color1 { background-color: #EDF8FB;}.legend_color2 { background-color: #BFD3E6;}.legend_color3 { background-color: #8C96C6;}.legend_color4 { background-color: #88419D;}.legend_color5 { background-color: #6E016B;}.legend_color1a { background-color: #F6EFF7;}.legend_color2a { background-color: #A6BDDB;}.legend_color3a { background-color: #67A9CF;}.legend_color4a { background-color: #02818A;}.legend_color5a { background-color: #016450;}.separator { cursor: pointer;}#address { width: 300px;}

Interactive: The Racial Makeup of Texas Cities

The 2010 U.S. census revealed that the demographics of Texas’ cities are changing quickly. As the population becomes more diverse, so do the neighborhoods. This series of maps indicates which neighborhoods are clearly defined by a racial majority and where populations of various racial and ethnic groups are moving in or out across Texas cities, according to census tract-level data from the 2010 census.

Although there are still identifiable areas with high concentrations of particular races and ethnic groups, the populations of racial minorities have grown significantly over the last decade in metropolitan suburbs and upper-class neighborhoods. And gentrification has blended the demographics of many inner-city neighborhoods as well.

By viewing the estimated number of people in each racial and ethnic group, you can see where higher concentrations of a particular demographic live. Mapping the percent change of a population will show whether the population of a race or ethnic group grew or shrank in an area since the 2000 census. Compare the two maps to get a sense of the changing demographics.

The cities are broken down by census tract, which the U.S. Census Bureau uses to group similar populations of people. They vary in size from roughly 1,000 to 8,000 individuals and are “designed to be relatively homogenous units with respect to population characteristics, economic status and living conditions at the time they are established,” according to the Census Bureau.

Enter an address or select a city from the drop-down menu to move around the map. Click on a section to see details about that area. This map tallies all members of a particular race, so individuals of mixed race may be counted in multiple categories. Hispanic or Latino make up one ethnic group, and the group’s individuals may be of any race. The ethnic group is represented in the “Total Hispanic” category of the interactive.

You can also check out where Texans live by age group by clicking here.

Search for an address or select a city
— Amarillo Arlington Austin Beaumont Brownsville College Station Corpus Christi Dallas El Paso Fort Worth Houston Laredo Longview Lubbock Midland McAllen Plano San Antonio Waco
Use dropdown to select map type
Estimated Number Percent Change of Population
Select banner to filter by demographic group.

White


Black or African American


Asian


American Indian or Alaskan Native


Pacific Islander or Hawaiian Native


Other Races


Total Hispanic


Total Not Hispanic


The groups include individuals of the race alone or in combination with other races, so individuals of mixed race may be counted multiple times. Hispanic or Latino is considered an ethnicity, and individuals who identify as Hispanic may be of any race. The ethnic group is represented in the “Total Hispanic” category of the interactive.
Estimated Population
0 to 100
101 to 500
501 to 1,000
1,001 to 2,000
More than 2,000
// globals var tableID = 2972312; var colors = { color1: “#EDF8FB”, color2: “#BFD3E6”, color3: “#8C96C6”, color4: “#88419D”, color5: “#6E016B”, color1a: “#F6EFF7”, color2a: “#A6BDDB”, color3a: “#67A9CF”, color4a: “#02818A”, color5a: “#016450” }; var zoomCoords = { statewide: [31.25, -99.84, 6], houston: [29.7601927, -95.3693896, 10], dallas: [32.802955, -96.769923, 10], austin: [30.267153, -97.7430608, 10], antonio: [29.4241219, -98.4936282, 10], midland: [31.9973456, -102.0779146, 10], elpaso: [31.7587198, -106.4869314, 10], fortworth: [32.7252778,-97.3205556, 10], arlington: [32.7355556,-97.1077778, 10], plano: [33.0197222,-96.6986111, 10], corpuschristi: [27.8002778, -97.3961111, 10], mcallen: [26.2034071, -98.2300124, 10], brownsville: [25.9013889, -97.4972222, 10], laredo: [27.5061111, -99.5072222, 10], lubbock: [33.5777778, -101.8547222, 10], beaumont: [30.0858333, -94.1016667, 10], amarillo: [35.2219444, -101.8308333, 10], waco: [31.5491667, -97.1463889, 10], longview: [32.5005556, -94.7402778, 10], collegestation: [30.6277778, -96.3341667, 10] }; var activeCand = “White”; var activeFocus = “count”; var addCommas = function(nStr) { nStr += ”; x = nStr.split(‘.’); x1 = x[0]; x2 = x.length > 1 ? ‘.’ + x[1] : ”; var rgx = /(d+)(d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, ‘1’ + ‘,’ + ‘2’); } return x1 + x2; } // end globals, begin map load var mapOptions = { center: new google.maps.LatLng(zoomCoords[“houston”][0], zoomCoords[“houston”][1]), zoom: zoomCoords[“houston”][2], mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, streetViewControl: false, minZoom: 10 }; var map = new google.maps.Map(document.getElementById(“mapCanvas”), mapOptions); map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘legend_box’)); // end map load, begin layer load var polyOpacity = 0.6; var lineColor = “#222222”; var layerOptions = { query: { from: tableID, select: “geometry” }, map: map, styles: [{ where: “White_count >= 0”, polygonOptions: { fillColor: colors[“color1”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: “White_count > 100”, polygonOptions: { fillColor: colors[“color2”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: “White_count > 500”, polygonOptions: { fillColor: colors[“color3”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: “White_count > 1000”, polygonOptions: { fillColor: colors[“color4”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: “White_count > 2000”, polygonOptions: { fillColor: colors[“color5”], fillOpacity: polyOpacity, strokeColor: lineColor } }] }; var layer = new google.maps.FusionTablesLayer(layerOptions); // handlers $(‘#mapZoom’).change( function() { var val = this.value; var newCenter = new google.maps.LatLng(zoomCoords[val][0], zoomCoords[val][1]); var newZoom = zoomCoords[val][2]; map.setCenter(newCenter); map.setZoom(newZoom); }); $(‘#focusChange’).change(function() { var val = this.value; activeFocus = val; var query = activeCand + “_” + val; if(val === “count”) { layerOptions[“styles”] = [{ where: query + ” >= 0″, polygonOptions: { fillColor: colors[“color1″], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 100″, polygonOptions: { fillColor: colors[“color2″], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 1000″, polygonOptions: { fillColor: colors[“color3″], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 2500″, polygonOptions: { fillColor: colors[“color4″], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 5000″, polygonOptions: { fillColor: colors[“color5”], fillOpacity: polyOpacity, strokeColor: lineColor } }]; $(“#legend_title”).text(“Estimated Population”); $(“#legend_text1”).text(“0 to 100”); $(“#legend_text2”).text(“101 to 1,000”); $(“#legend_text3”).text(“1,001 to 2,500”); $(“#legend_text4”).text(“2,501 to 5,000”); $(“#legend_text5”).text(“More than 5,000”); $(“#legend_color1”).removeClass().addClass(“legend_color1 legend_color_set”); $(“#legend_color2”).removeClass().addClass(“legend_color2 legend_color_set”); $(“#legend_color3”).removeClass().addClass(“legend_color3 legend_color_set”); $(“#legend_color4”).removeClass().addClass(“legend_color4 legend_color_set”); $(“#legend_color5”).removeClass().addClass(“legend_color5 legend_color_set”); } else { layerOptions[“styles”] = [{ where: query + ” = 0″, polygonOptions: { fillColor: colors[“color2a”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 50″, polygonOptions: { fillColor: colors[“color3a”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 100″, polygonOptions: { fillColor: colors[“color4a”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: query + ” > 200″, polygonOptions: { fillColor: colors[“color5a”], fillOpacity: polyOpacity, strokeColor: lineColor } }]; $(“#legend_title”).text(“Percent Change in Population from 2000 to 2010”); $(“#legend_text1”).text(“Population Declined”); $(“#legend_text2”).text(“0% to 50% Growth”); $(“#legend_text3”).text(“51% to 100% Growth”); $(“#legend_text4”).text(“101% to 200% Growth”); $(“#legend_text5”).text(“More than 200% Growth”); $(“#legend_color1”).removeClass().addClass(“legend_color1a legend_color_set”); $(“#legend_color2”).removeClass().addClass(“legend_color2a legend_color_set”); $(“#legend_color3”).removeClass().addClass(“legend_color3a legend_color_set”); $(“#legend_color4”).removeClass().addClass(“legend_color4a legend_color_set”); $(“#legend_color5”).removeClass().addClass(“legend_color5a legend_color_set”); }; layer.setOptions(layerOptions); }); $(‘.hover header’).click(function() { $(this).siblings(‘.active’).removeClass(‘active’).end().addClass(‘active’); var val = this.id; activeCand = val; if(activeFocus === “count”) { layerOptions[“styles”] = [{ where: val + “_count >= 0”, polygonOptions: { fillColor: colors[“color1”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_count > 100”, polygonOptions: { fillColor: colors[“color2”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_count > 1000”, polygonOptions: { fillColor: colors[“color3”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_count > 2500”, polygonOptions: { fillColor: colors[“color4”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_count > 5000”, polygonOptions: { fillColor: colors[“color5”], fillOpacity: polyOpacity, strokeColor: lineColor } }]; } else { layerOptions[“styles”] = [{ where: val + “_pct = 0”, polygonOptions: { fillColor: colors[“color2a”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_pct > 50”, polygonOptions: { fillColor: colors[“color3a”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_pct > 100”, polygonOptions: { fillColor: colors[“color4a”], fillOpacity: polyOpacity, strokeColor: lineColor } },{ where: val + “_pct > 200”, polygonOptions: { fillColor: colors[“color5a”], fillOpacity: polyOpacity, strokeColor: lineColor } }]; }; layer.setOptions(layerOptions); }); google.maps.event.addListener(layer, ‘click’, function(e) { var storage = “”; storage += ‘
‘ + e.row[“NAME”].value + ‘
‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘‘; storage += ‘
Race or Ethnic GroupEstimated PopulationPercent Change Since 2000
Estimated Population in 2010‘ + e.row[“POP100”].value + ‘ n/a
White alone or in combination‘ + e.row[“White_count”].value + ‘‘ + e.row[“White_pct”].value + ‘%
Black alone or in combination‘ + e.row[“Black_count”].value + ‘‘ + e.row[“Black_pct”].value + ‘%
Asian alone or in combination‘ + e.row[“Asian_count”].value + ‘‘ + e.row[“Asian_pct”].value + ‘%
American Indian alone or in combination‘ + e.row[“AmerIndian_count”].value + ‘‘ + e.row[“AmerIndian_pct”].value + ‘%
Pacific Islander alone or in combination‘ + e.row[“PacIsland_count”].value + ‘‘ + e.row[“PacIsland_pct”].value + ‘%
Other races alone or in combination‘ + e.row[“Other_count”].value + ‘‘ + e.row[“Other_pct”].value + ‘%
Total Not Hispanic or Latino‘ + e.row[“NotHispanic_count”].value + ‘‘ + e.row[“NotHispanic_pct”].value + ‘%
Total Hispanic or Latino‘ + e.row[“Hispanic_count”].value + ‘‘ + e.row[“Hispanic_pct”].value + ‘%
‘; e.infoWindowHtml = storage; }); // geocoder + address lookup var geocoder = new google.maps.Geocoder(); var marker; var getLatLng = function(address, callback) { if (!address) { callback({ msg: “Please enter an address.” }, true); return; }; var request = { ‘address’: address + ” TX, United States” }; geocoder.geocode(request, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { var coordinate = results[0].geometry.location; callback({ ‘lat’: coordinate.lat(), ‘lng’: coordinate.lng() }); } else { callback({ msg: “Sorry, we were unable to find your address. Please try again.” }, true); }; }); return; }; var generateMarkers = function(points) { var markerLocation = new google.maps.LatLng(points.lat, points.lng); if(!marker) { marker = new google.maps.Marker({ map: map, position: markerLocation }); map.setCenter(markerLocation); map.setZoom(9); return; } else { marker.setPosition(markerLocation); map.setCenter(markerLocation); map.setZoom(9); return; }; }; var addressSubmit = function() { var userAddr = document.getElementById(“address”).value; getLatLng(userAddr, function(latLng, err) { if(err) { alert(x.msg); return; }; $(‘#mapZoom’).val(“empty”); generateMarkers(latLng); }); }; $(‘#address’).keydown( function(e) { var key = e.keyCode; if(key === 13) { addressSubmit(); }; }); $(‘#addressSubmit’).click( function() { addressSubmit(); }); // end geocoder

Gift this article