Skip to content

Instantly share code, notes, and snippets.

@tcya

tcya/index.html

Last active February 20, 2016 13:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tcya/9d2bf2abc4270ccffae1 to your computer and use it in GitHub Desktop.
Save tcya/9d2bf2abc4270ccffae1 to your computer and use it in GitHub Desktop.
Download ZIP
逼婚率和人均GDP的关系
Raw
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>
Raw
逼婚率.csv
地区 人均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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment