fraserxu/china_provinces.json

## china_provinces.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              china_provinces.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>China population choropleth</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="stack.js"></script>
  </body>
</html>

## population.csv

          
            name
            total
            male
            female

            
              北京
              1849475
              941325
              908150

            
              天津
              1127589
              581562
              546027

            
              河北
              7037620
              3554766
              3482854

            
              山西
              3477805
              1771808
              1705997

            
              内蒙古
              2310941
              1186071
              1124870

            
              辽宁
              4252076
              2138602
              2113474

            
              吉林
              2551123
              1287411
              1263712

            
              黑龙江
              3465051
              1749344
              1715707

            
              上海
              2253525
              1151331
              1102194

            
              江苏
              7577122
              3792269
              3784853

            
              浙江
              5400348
              2761136
              2639212

            
              安徽
              5312628
              2678455
              2634173

            
              福建
              3477491
              1773098
              1704393

            
              江西
              4251692
              2188051
              2063641

            
              山东
              9272503
              4663609
              4608894

            
              河南
              9224288
              4650716
              4573572

            
              湖北
              5226904
              2658892
              2568012

            
              湖南
              6096586
              3114294
              2982292

            
              广东
              9676589
              5023631
              4652958

            
              广西
              4362551
              2249997
              2112554

            
              海南
              826560
              432579
              393981

            
              重庆
              2609882
              1310663
              1299219

            
              四川
              8161604
              4120256
              4041348

            
              贵州
              3332265
              1714400
              1617865

            
              云南
              4467537
              2300361
              2167176

            
              西藏
              265904
              134009
              131895

            
              陕西
              3614887
              1848641
              1766246

            
              甘肃
              2623094
              1330609
              1292485

            
              青海
              535412
              273891
              261521

            
              宁夏
              611957
              311355
              300602

            
              新疆
              2086576
              1061322
              1025254

            
              香港
              723480
              334270
              389210

            
              澳门
              62400
              30720
              31680

            
              台湾
              2322491
              1164567
              1157923

## stack.js
var w = 800
var h = 850
var margin = 40

d3.csv('population.csv', function(data) {

  d3.json('china_provinces.json', function(json) {
    for (var i = 0; i < data.length; i++) {
      var dataProvince = data[i].name
      var total = parseInt(data[i].total)
      var male = parseInt(data[i].male)
      var female = parseInt(data[i].female)
      for (var j = 0; j < json.features.length; j++) {
        var jsonProvince = json.features[j].properties.name
        if (jsonProvince == dataProvince) {
          json.features[j].properties.total = total
          json.features[j].properties.male = male
          json.features[j].properties.female = female
          break
        }
      }
    }

    var maleData = {
      name: '男',
      value: json.features.map(function(provinceData) {
        return { province: provinceData.properties.name, count: provinceData.properties.male }
      })
    }

    var femaleData = {
      name: '女',
      value: json.features.map(function(provinceData) {
        return { province: provinceData.properties.name, count: provinceData.properties.female }
      })
    }

    var dataset = []
    dataset.push(maleData)
    dataset.push(femaleData)

    var sex = dataset.map(function(d) {
      return d.name
    })

    var dataset = dataset.map(function(d) {
      return d.value.map(function(o) {
        return {
          y: o.count,
          x: o.province
        }
      })
    })
    stack = d3.layout.stack()
    stack(dataset)

    dataset = dataset.map(function(group) {
      return group.map(function(d) {
        return {
          x: d.y,
          y: d.x,
          x0: d.y0
        }
      })
    })

    var width = w - 2 * margin
    var height = h - 2 * margin

    var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', 'translate(' + margin + ',0)')

    var xMax = d3.max(dataset, function(group) {
      return d3.max(group, function(d) {
        return d.x + d.x0
      })
    })

    var xScale = d3.scale.linear()
      .domain([0, xMax])
      .range([0, width])
    var provinces = dataset[0].map(function(d) {
      return d.y
    })

    var yScale = d3.scale.ordinal()
      .domain(provinces)
      .rangeRoundBands([0, height - 2 * margin], .1)

    var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient('bottom')

    var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient('left')

    var colours = d3.scale.category10()
    var groups = svg.selectAll('g')
      .data(dataset)
      .enter()
      .append('g')
      .style('fill', function (d, i) {
      return colours(i)
    })

    var rects = groups.selectAll('rect')
      .data(function (d) {
        return d;
      })
      .enter()
      .append('rect')
      .attr('x', function (d) {
        return xScale(d.x0) || 0
      })
      .attr('y', function (d, i) {
        return yScale(d.y)
      })
      .attr('height', function (d) {
        return yScale.rangeBand()
      })
      .attr('width', function (d) {
        return xScale(d.x) || 0
      })

    svg.append('g')
      .attr('class', 'axis')
      .attr('transform', 'translate(0,' + (height - 2*margin) + ')')
      .call(xAxis)

    svg.append('g')
      .attr('class', 'axis')
      .call(yAxis)

    sex.forEach(function (s, i) {
      svg.append('text')
        .attr('fill', 'black')
        .attr('x', -margin/2)
        .attr('y', height - margin + i*20)
        .text(s)
      svg.append('rect')
        .attr('fill', colours(i))
        .attr('width', 60)
        .attr('height', 20)
        .attr('x', -margin/2 + 24)
        .attr('y', height - margin + i*20 - 14)
    })

    svg.append('text')
      .attr('fill', 'black')
      .attr('font-size', 20)
      .attr('x', margin*2)
      .attr('y', height - margin + 22)
      .text('中国各省市性别人口比例图')

  })

})


## style.css
.province {
  fill: none;
  stroke: #aaa;
  stroke-width: 0.2px;
  stroke-linejoin: round;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 100px;
  height: 18px;
  padding: 2px;
  font-size: 10px;
  background: #FFFFE0;
  border: 1px;
  border-radius: 2px;
  pointer-events: none;
}

.axis path, .axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
.axis text {
  font-family: sans-serif;
  font-size: 11px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>China population choropleth</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="stack.js"></script>
	</body>
	</html>
name	total	male	female
北京	1849475	941325	908150
天津	1127589	581562	546027
河北	7037620	3554766	3482854
山西	3477805	1771808	1705997
内蒙古	2310941	1186071	1124870
辽宁	4252076	2138602	2113474
吉林	2551123	1287411	1263712
黑龙江	3465051	1749344	1715707
上海	2253525	1151331	1102194
江苏	7577122	3792269	3784853
浙江	5400348	2761136	2639212
安徽	5312628	2678455	2634173
福建	3477491	1773098	1704393
江西	4251692	2188051	2063641
山东	9272503	4663609	4608894
河南	9224288	4650716	4573572
湖北	5226904	2658892	2568012
湖南	6096586	3114294	2982292
广东	9676589	5023631	4652958
广西	4362551	2249997	2112554
海南	826560	432579	393981
重庆	2609882	1310663	1299219
四川	8161604	4120256	4041348
贵州	3332265	1714400	1617865
云南	4467537	2300361	2167176
西藏	265904	134009	131895
陕西	3614887	1848641	1766246
甘肃	2623094	1330609	1292485
青海	535412	273891	261521
宁夏	611957	311355	300602
新疆	2086576	1061322	1025254
香港	723480	334270	389210
澳门	62400	30720	31680
台湾	2322491	1164567	1157923
	var w = 800
	var h = 850
	var margin = 40

	d3.csv('population.csv', function(data) {

	d3.json('china_provinces.json', function(json) {
	for (var i = 0; i < data.length; i++) {
	var dataProvince = data[i].name
	var total = parseInt(data[i].total)
	var male = parseInt(data[i].male)
	var female = parseInt(data[i].female)
	for (var j = 0; j < json.features.length; j++) {
	var jsonProvince = json.features[j].properties.name
	if (jsonProvince == dataProvince) {
	json.features[j].properties.total = total
	json.features[j].properties.male = male
	json.features[j].properties.female = female
	break
	}
	}
	}

	var maleData = {
	name: '男',
	value: json.features.map(function(provinceData) {
	return { province: provinceData.properties.name, count: provinceData.properties.male }
	})
	}

	var femaleData = {
	name: '女',
	value: json.features.map(function(provinceData) {
	return { province: provinceData.properties.name, count: provinceData.properties.female }
	})
	}

	var dataset = []
	dataset.push(maleData)
	dataset.push(femaleData)

	var sex = dataset.map(function(d) {
	return d.name
	})

	var dataset = dataset.map(function(d) {
	return d.value.map(function(o) {
	return {
	y: o.count,
	x: o.province
	}
	})
	})
	stack = d3.layout.stack()
	stack(dataset)

	dataset = dataset.map(function(group) {
	return group.map(function(d) {
	return {
	x: d.y,
	y: d.x,
	x0: d.y0
	}
	})
	})

	var width = w - 2 * margin
	var height = h - 2 * margin

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g')
	.attr('transform', 'translate(' + margin + ',0)')

	var xMax = d3.max(dataset, function(group) {
	return d3.max(group, function(d) {
	return d.x + d.x0
	})
	})

	var xScale = d3.scale.linear()
	.domain([0, xMax])
	.range([0, width])
	var provinces = dataset[0].map(function(d) {
	return d.y
	})

	var yScale = d3.scale.ordinal()
	.domain(provinces)
	.rangeRoundBands([0, height - 2 * margin], .1)

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient('bottom')

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient('left')

	var colours = d3.scale.category10()
	var groups = svg.selectAll('g')
	.data(dataset)
	.enter()
	.append('g')
	.style('fill', function (d, i) {
	return colours(i)
	})

	var rects = groups.selectAll('rect')
	.data(function (d) {
	return d;
	})
	.enter()
	.append('rect')
	.attr('x', function (d) {
	return xScale(d.x0) \|\| 0
	})
	.attr('y', function (d, i) {
	return yScale(d.y)
	})
	.attr('height', function (d) {
	return yScale.rangeBand()
	})
	.attr('width', function (d) {
	return xScale(d.x) \|\| 0
	})

	svg.append('g')
	.attr('class', 'axis')
	.attr('transform', 'translate(0,' + (height - 2*margin) + ')')
	.call(xAxis)

	svg.append('g')
	.attr('class', 'axis')
	.call(yAxis)

	sex.forEach(function (s, i) {
	svg.append('text')
	.attr('fill', 'black')
	.attr('x', -margin/2)
	.attr('y', height - margin + i*20)
	.text(s)
	svg.append('rect')
	.attr('fill', colours(i))
	.attr('width', 60)
	.attr('height', 20)
	.attr('x', -margin/2 + 24)
	.attr('y', height - margin + i*20 - 14)
	})

	svg.append('text')
	.attr('fill', 'black')
	.attr('font-size', 20)
	.attr('x', margin*2)
	.attr('y', height - margin + 22)
	.text('中国各省市性别人口比例图')

	})

	})
	.province {
	fill: none;
	stroke: #aaa;
	stroke-width: 0.2px;
	stroke-linejoin: round;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 100px;
	height: 18px;
	padding: 2px;
	font-size: 10px;
	background: #FFFFE0;
	border: 1px;
	border-radius: 2px;
	pointer-events: none;
	}

	.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}