tcya · February 20, 2016 13:14
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <html>
 <head>
    <title>逼婚率和人均GDP的关系</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
 </head>
 <body>
 <div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

      d3.csv("逼婚率.csv", function (data) {
          var myChart = new dimple.chart(svg, data);
          var xAxis = myChart.addMeasureAxis("x", "人均GDP（元）");
          var yAxis = myChart.addMeasureAxis("y", "逼婚率（%）");
          yAxis.tickFormat = ".0%";
          yAxis.overrideMax = 1;
          xAxis.fontSize = 12;
          yAxis.fontSize = 12;
          var s = myChart.addSeries(["地区"], dimple.plot.scatter);
          myChart.addLegend(200, 10, 360, 20, "left", s);
          myChart.draw();

        // Make regression line
        // get the x and y values for least squares
        var xSeries = data.map(function(d) { return parseFloat(d['人均GDP（元）']); });
        var ySeries = data.map(function(d) { return parseFloat(d['逼婚率（%）']); });

        var leastSquaresCoeff = leastSquares(xSeries, ySeries);

        // apply the results of the least squares regression
        var x1 = xSeries[0];
        var y1 = leastSquaresCoeff[0] * x1 + leastSquaresCoeff[1];
        var x2 = xSeries[xSeries.length - 1];
        var y2 = leastSquaresCoeff[0] * x2 + leastSquaresCoeff[1];

        var trendData = [[x1,y1,x2,y2]];
        var trendline = svg.selectAll(".trendline")
            .data(trendData);

        trendline.enter()
            .append("line")
            .attr("class", "trendline")
            .attr("x1", function(d) { return xAxis._scale(d[0]); })
            .attr("y1", function(d) { return yAxis._scale(d[1]); })
            .attr("x2", function(d) { return xAxis._scale(d[2]); })
            .attr("y2", function(d) { return yAxis._scale(d[3]); })
            .attr("stroke", "steelblue")
            .attr("stroke-width", 1);

        // display equation on the chart
        var decimalFormat = d3.format("0.2f");
        svg.append("text")
            .text("y = " + d3.format('.2e')(leastSquaresCoeff[0]) + " x + " +
                decimalFormat(leastSquaresCoeff[1]))
            .attr("class", "text-label")
            .attr("x", function(d) {return xAxis._scale(d3.max(xSeries)) - 150;})
            .attr("y", function(d) {return yAxis._scale(0) - 50;});

        // display r-square on the chart
        svg.append("text")
            .text("R² = " + decimalFormat(leastSquaresCoeff[2]))
            .attr("class", "text-label")
            .attr("x", function(d) {return xAxis._scale(d3.max(xSeries)) - 150;})
            .attr("y", function(d) {return yAxis._scale(0) - 30;});
        });


    // returns slope, intercept and r-square of the line
    function leastSquares(xSeries, ySeries) {
        var reduceSumFunc = function(prev, cur) { return prev + cur; };

        var xBar = xSeries.reduce(reduceSumFunc) * 1.0 / xSeries.length;
        var yBar = ySeries.reduce(reduceSumFunc) * 1.0 / ySeries.length;

        var ssXX = xSeries.map(function(d) { return Math.pow(d - xBar, 2); })
            .reduce(reduceSumFunc);

        var ssYY = ySeries.map(function(d) { return Math.pow(d - yBar, 2); })
            .reduce(reduceSumFunc);

        var ssXY = xSeries.map(function(d, i) { return (d - xBar) * (ySeries[i] - yBar); })
            .reduce(reduceSumFunc);

        var slope = ssXY / ssXX;
        var intercept = yBar - (xBar * slope);
        var rSquare = Math.pow(ssXY, 2) / (ssXX * ssYY);

        return [slope, intercept, rSquare];
    }

  </script>
 </div>
 <div>
  <p>数据来源： <a href="https://mp.weixin.qq.com/s?__biz=MjM5MDAyMjM0MA==&mid=403379257&idx=1&sn=ef78cc8e2c5a5a7f6deecaee0b1ec601&scene=0&key=710a5d99946419d97ceb5c2dce83fc1c5698d7d67b81faaadeefc761e746f0b95be6a5af848ac19b27d4eb72d6b4696b&ascene=0&uin=NTUxMjYxMDk1&devicetype=iMac+MacBookPro10%2C1+OSX+OSX+10.11.3+build(15D21)&version=11020201&pass_ticket=V%2FBwL2t%2F4GSLNalK6tnRJu5ILU5k0b%2F3x8xD36T6N%2B5yOIbAtNmbvutszkOF24FT">逼婚率</a>，<a href="https://zh.wikipedia.org/zh-cn/%E4%B8%AD%E5%9B%BD%E7%9C%81%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%BA%BA%E5%9D%87%E5%9C%B0%E5%8C%BA%E7%94%9F%E4%BA%A7%E6%80%BB%E5%80%BC%E5%88%97%E8%A1%A8">GDP</a></p>
 </div>
 </body>
 </html>
diff --git a/逼婚率.csv b/逼婚率.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>逼婚率和人均GDP的关系</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
	</head>
	<body>
	<div id="chartContainer">
	<script type="text/javascript">
	var svg = dimple.newSvg("#chartContainer", 590, 400);

	d3.csv("逼婚率.csv", function (data) {
	var myChart = new dimple.chart(svg, data);
	var xAxis = myChart.addMeasureAxis("x", "人均GDP（元）");
	var yAxis = myChart.addMeasureAxis("y", "逼婚率（%）");
	yAxis.tickFormat = ".0%";
	yAxis.overrideMax = 1;
	xAxis.fontSize = 12;
	yAxis.fontSize = 12;
	var s = myChart.addSeries(["地区"], dimple.plot.scatter);
	myChart.addLegend(200, 10, 360, 20, "left", s);
	myChart.draw();

	// Make regression line
	// get the x and y values for least squares
	var xSeries = data.map(function(d) { return parseFloat(d['人均GDP（元）']); });
	var ySeries = data.map(function(d) { return parseFloat(d['逼婚率（%）']); });

	var leastSquaresCoeff = leastSquares(xSeries, ySeries);

	// apply the results of the least squares regression
	var x1 = xSeries[0];
	var y1 = leastSquaresCoeff[0] * x1 + leastSquaresCoeff[1];
	var x2 = xSeries[xSeries.length - 1];
	var y2 = leastSquaresCoeff[0] * x2 + leastSquaresCoeff[1];

	var trendData = [[x1,y1,x2,y2]];
	var trendline = svg.selectAll(".trendline")
	.data(trendData);

	trendline.enter()
	.append("line")
	.attr("class", "trendline")
	.attr("x1", function(d) { return xAxis._scale(d[0]); })
	.attr("y1", function(d) { return yAxis._scale(d[1]); })
	.attr("x2", function(d) { return xAxis._scale(d[2]); })
	.attr("y2", function(d) { return yAxis._scale(d[3]); })
	.attr("stroke", "steelblue")
	.attr("stroke-width", 1);

	// display equation on the chart
	var decimalFormat = d3.format("0.2f");
	svg.append("text")
	.text("y = " + d3.format('.2e')(leastSquaresCoeff[0]) + " x + " +
	decimalFormat(leastSquaresCoeff[1]))
	.attr("class", "text-label")
	.attr("x", function(d) {return xAxis._scale(d3.max(xSeries)) - 150;})
	.attr("y", function(d) {return yAxis._scale(0) - 50;});

	// display r-square on the chart
	svg.append("text")
	.text("R² = " + decimalFormat(leastSquaresCoeff[2]))
	.attr("class", "text-label")
	.attr("x", function(d) {return xAxis._scale(d3.max(xSeries)) - 150;})
	.attr("y", function(d) {return yAxis._scale(0) - 30;});
	});


	// returns slope, intercept and r-square of the line
	function leastSquares(xSeries, ySeries) {
	var reduceSumFunc = function(prev, cur) { return prev + cur; };

	var xBar = xSeries.reduce(reduceSumFunc) * 1.0 / xSeries.length;
	var yBar = ySeries.reduce(reduceSumFunc) * 1.0 / ySeries.length;

	var ssXX = xSeries.map(function(d) { return Math.pow(d - xBar, 2); })
	.reduce(reduceSumFunc);

	var ssYY = ySeries.map(function(d) { return Math.pow(d - yBar, 2); })
	.reduce(reduceSumFunc);

	var ssXY = xSeries.map(function(d, i) { return (d - xBar) * (ySeries[i] - yBar); })
	.reduce(reduceSumFunc);

	var slope = ssXY / ssXX;
	var intercept = yBar - (xBar * slope);
	var rSquare = Math.pow(ssXY, 2) / (ssXX * ssYY);

	return [slope, intercept, rSquare];
	}

	</script>
	</div>
	<div>
	<p>数据来源： <a href="https://mp.weixin.qq.com/s?__biz=MjM5MDAyMjM0MA==&mid=403379257&idx=1&sn=ef78cc8e2c5a5a7f6deecaee0b1ec601&scene=0&key=710a5d99946419d97ceb5c2dce83fc1c5698d7d67b81faaadeefc761e746f0b95be6a5af848ac19b27d4eb72d6b4696b&ascene=0&uin=NTUxMjYxMDk1&devicetype=iMac+MacBookPro10%2C1+OSX+OSX+10.11.3+build(15D21)&version=11020201&pass_ticket=V%2FBwL2t%2F4GSLNalK6tnRJu5ILU5k0b%2F3x8xD36T6N%2B5yOIbAtNmbvutszkOF24FT">逼婚率</a>，<a href="https://zh.wikipedia.org/zh-cn/%E4%B8%AD%E5%9B%BD%E7%9C%81%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%BA%BA%E5%9D%87%E5%9C%B0%E5%8C%BA%E7%94%9F%E4%BA%A7%E6%80%BB%E5%80%BC%E5%88%97%E8%A1%A8">GDP</a></p>
	</div>
	</body>
	</html>
地区	人均GDP（元）	逼婚率（%）
北京	99995	0.72
上海	97343	0.75
江苏	81874	0.74
浙江	72967	0.74
山东	60879	0.85
河南	34808	0.89
河北	39984	0.77
广东	63452	0.8
湖北	47124	0.79
四川	35128	0.88
湖南	40287	0.77
辽宁	65198	0.74
广西	33090	0.77
安徽	34425	0.79
吉林	50162	0.8