平行坐标系（parallel）是一种常用的可视化高维数据的图表。平行坐标系的具有良好的数学基础， 其射影几何解释和对偶特性使它很适合用于可视化数据分析。
文章目录
1. 利用D3.js绘图
1.1 逻辑代码
index.html：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ccc;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: steelblue;
stroke-opacity: .7;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff;
}
</style>
<body>
<div id="graph-container"></div>
<a id="btnSaveSVG" href="#">保存SVG</a>
<a id="btnSavePNG" href="#">保存PNG</a>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var m = [30, 10, 10, 10],
w = 1400 - m[1] - m[3],
h = 500 - m[0] - m[2];
var x = d3.scale.ordinal().rangePoints([0, w], .5),
y = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground;
var svg = d3.select("#graph-container").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("cost-of-living.csv", function(error, cities) {
if (error) throw error;
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cities[0]).filter(function(d) {
return d != "City" && (y[d] = d3.scale.linear()
.domain(d3.extent(cities, function(p) { return +p[d]; }))
.range([h, 0]));
}));
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(cities)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cities)
.enter().append("path")
.attr("d", path);
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(String);
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
// 下载SVG
d3.select("#btnSaveSVG").on("click", function() {
var svgHeadInfo = '<?xml version="1.0" encoding="UTF-8"?>\n\r';
var svgSource = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
console.log(svgSource);
console.log(btoa(svgHeadInfo + svgSource));
d3.select(this)
.attr("href-lang", "image/svg+xml")
.attr("href", "data:image/svg+xml;base64," + btoa(svgHeadInfo + svgSource))
.attr("download", "file.svg");
});
// 下载PNG
d3.select("#btnSavePNG").on("click", function() {
var svgHeadInfo = '<?xml version="1.0" encoding="UTF-8"?>\n\r';
var svgSource = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
var serializer = new XMLSerializer();
var source = svgHeadInfo + svgSource;
var image = new Image;
image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
var canvas = document.createElement("canvas");
canvas.width = 1200;
canvas.height = 800;
var context = canvas.getContext("2d");
context.fillStyle = '#fff';//#fff设置保存后的PNG 是白色的
context.fillRect(0, 0, 10000, 10000);
image.onload = function() {
context.drawImage(image, 0, 0);
var a = document.createElement("a");
a.download = "name.png";
a.href = canvas.toDataURL("image/png");
a.click();
};
});
</script>
</body>
cost-of-living.csv数据文件
City,Consumer Price,Rent,Consumer Price+Rent,Groceries,Restaurant Price,Local Purch. Power
"Trondheim, Norway",188.91,59.16,142.21,193.94,160.23,67.01
"Stavanger, Norway",171.32,78.08,137.76,147.74,201.16,78.50
"Zurich, Switzerland",152.84,74.58,124.67,143.70,138.79,142.77
"Oslo, Norway",152.03,57.40,117.97,139.22,155.75,99.31
"Geneva, Switzerland",146.24,79.05,122.06,138.95,135.25,115.54
"Bern, Switzerland",142.44,57.44,111.85,126.78,103.59,149.28
"Lucerne, Switzerland",139.94,72.45,115.65,146.52,95.72,105.65
"Perth, Australia",139.63,43.76,105.13,113.13,131.61,125.08
"Bergen, Norway",138.79,55.98,108.98,135.46,130.23,97.02
"Tokyo, Japan",135.23,95.43,120.91,120.42,91.68,90.14
"Sydney, Australia",132.39,86.25,115.79,121.11,110.98,97.23
"Adelaide, Australia",129.60,47.30,99.98,120.68,121.44,112.19
"Monaco, Monaco",128.15,173.08,144.32,89.80,138.14,62.30
"Copenhagen, Denmark",123.82,48.65,96.77,104.25,139.11,97.43
"Edinburgh, United Kingdom",122.52,38.21,92.18,92.92,143.02,95.08
"Melbourne, Australia",121.53,64.37,100.96,112.50,102.37,87.81
"Dublin, Ireland",119.56,48.30,93.91,109.96,113.19,93.54
"London, United Kingdom",118.52,87.34,107.30,92.59,117.54,88.58
"Arhus, Denmark",115.96,65.90,97.94,94.68,132.05,73.97
"Canberra, Australia",115.89,53.55,93.45,106.77,94.30,115.91
"Brisbane, Australia",114.70,57.19,94.00,113.64,101.33,100.49
"Paris, France",113.88,63.47,95.73,95.93,112.89,82.49
"Malmo, Sweden",112.89,38.45,86.10,92.55,129.79,96.70
"Toulouse, France",112.28,29.90,82.63,89.10,105.33,82.70
"Riyadh, Saudi Arabia",112.03,19.91,78.87,138.45,41.65,70.51
"Amsterdam, Netherlands",110.78,64.61,94.16,69.93,114.88,88.83
"Darwin, Australia",110.41,56.44,90.98,92.67,111.09,121.91
"Auckland, New Zealand",110.36,36.80,83.89,98.74,88.77,97.68
"Gent, Belgium",109.27,36.38,83.04,81.58,109.49,83.02
"Stockholm, Sweden",109.14,37.75,83.45,87.42,117.66,85.65
"Brussels, Belgium",109.10,40.63,84.46,91.44,109.75,85.76
"Aberdeen, United Kingdom",109.08,42.04,84.95,103.80,110.60,119.20
"Boston, MA, United States",106.80,69.66,93.43,113.24,86.06,109.87
"Dusseldorf, Germany",106.51,25.77,77.45,77.03,119.73,157.89
"Wellington, New Zealand",106.02,37.02,81.19,104.20,93.89,90.61
"Turin, Italy",105.68,40.22,82.12,86.86,107.47,46.42
"Rome, Italy",105.60,60.03,89.20,87.02,113.68,57.49
"Vancouver, Canada",105.29,60.49,89.17,103.55,92.54,98.12
"Edmonton, Canada",105.28,38.95,81.40,104.56,86.97,86.09
"Brighton, United Kingdom",104.73,54.42,86.62,80.84,87.34,128.05
"Birmingham, United Kingdom",104.57,42.93,82.39,94.22,90.62,71.95
"Toronto, Canada",104.53,52.42,85.77,96.13,86.13,104.11
"Helsinki, Finland",104.08,56.58,86.98,81.00,101.69,96.15
"Venice, Italy",103.56,31.33,77.56,70.18,89.87,76.23
"Honolulu, HI, United States",103.46,59.01,87.47,103.67,78.28,90.60
"Calgary, Canada",103.38,40.93,80.91,99.95,81.08,124.17
"Sao Paolo, Brazil",102.96,35.60,78.72,62.93,73.58,46.26
"Tampere, Finland",102.68,30.37,76.65,100.74,98.33,93.84
"San Francisco, CA, United States",102.52,90.04,98.03,97.84,83.21,89.35
"Cagliari, Italy",101.88,29.29,75.76,72.93,114.90,66.47
"Hanover, Germany",101.82,28.11,75.29,82.62,79.95,90.76
"Belfast, United Kingdom",101.74,22.58,73.25,88.98,113.28,69.18
"Vienna, Austria",101.47,46.87,81.82,82.49,80.97,99.19
"Seattle, WA, United States",101.04,48.15,82.01,100.90,82.89,107.23
"Strasbourg, France",100.86,32.03,76.09,76.03,126.38,79.49
"Florence, Italy",100.43,41.39,79.18,72.16,94.28,66.66
"Thessaloniki, Greece",100.39,18.96,71.08,69.76,95.91,42.30
"Erlangen, Germany",100.39,33.07,76.16,92.92,80.27,28.69
"Hamburg, Germany",100.18,37.35,77.57,92.62,76.50,90.42
"Haifa, Israel",100.12,26.52,73.63,78.81,94.18,74.63
"Reykjavik, Iceland",100.11,31.82,75.53,95.54,90.64,81.22
"New York, NY, United States",100.00,100.00,100.00,100.00,100.00,100.00
"Leeds, United Kingdom",98.85,34.95,75.85,81.88,107.45,85.65
"Phoenix, AZ, United States",98.57,32.76,74.88,85.05,72.83,97.47
"Washington, DC, United States",98.19,69.37,87.81,89.39,81.26,97.37
"Linkoping, Sweden",98.06,26.92,72.46,90.51,102.37,114.78
"Montreal, Canada",97.86,37.57,76.16,94.88,92.23,109.41
"Bologna, Italy",97.82,38.03,76.31,92.02,89.53,84.84
"Nice, France",96.89,34.95,74.60,81.58,85.89,85.58
"Milan, Italy",96.88,49.22,79.73,74.25,106.38,74.06
"Winnipeg, Canada",96.64,32.72,73.63,96.90,74.52,97.96
"Athens, Greece",96.49,20.82,69.25,71.85,97.63,48.42
"Singapore, Singapore",96.08,90.69,94.14,82.76,65.10,93.29
"Munich, Germany",95.95,46.08,78.00,82.22,87.02,112.58
"Bordeaux, France",95.92,27.63,71.34,78.45,93.93,67.43
"Genoa, Italy",95.06,35.04,73.46,82.91,98.27,115.78
"Manchester, United Kingdom",94.96,36.44,73.90,79.54,90.48,95.97
"Christchurch, New Zealand",94.35,28.00,70.47,88.50,77.65,82.57
"Halifax, Canada",94.30,34.13,72.64,95.04,79.02,119.94
"San Jose, CA, United States",94.11,73.36,86.64,82.33,82.04,113.13
"Columbus, OH, United States",94.03,20.43,67.54,86.75,75.11,112.75
"Stuttgart, Germany",94.01,33.18,72.12,68.14,81.10,119.70
"Marbella, Spain",93.95,30.68,71.18,69.65,99.73,107.63
"Chania, Greece",93.77,18.01,66.50,69.52,88.97,46.87
"Ottawa, Canada",93.76,36.87,73.29,96.84,83.34,116.01
"Brasilia, Brazil",93.08,33.99,71.81,65.89,69.44,32.70
"Hartford, CT, United States",92.90,47.57,76.59,108.41,72.13,109.10
"Indianapolis, IN, United States",92.50,31.99,70.72,72.01,69.91,281.77
"Marseille, France",92.13,31.44,70.28,88.65,82.98,102.35
"Frankfurt, Germany",92.02,34.75,71.41,65.96,80.00,115.22
"Rio De Janeiro, Brazil",91.85,39.61,73.05,59.80,69.92,42.76
"Nicosia, Cyprus",91.80,25.66,68.00,76.36,100.08,65.24
"London, Canada",91.51,34.41,70.96,78.95,80.36,94.75
"Lyon, France",91.14,34.41,70.73,82.18,92.00,83.91
"San Diego, CA, United States",91.05,57.88,79.11,81.09,84.34,109.84
"Los Angeles, CA, United States",90.87,63.97,81.19,73.58,70.46,122.29
"San Juan, Puerto Rico",90.78,31.15,69.32,69.25,73.68,30.49
"Cologne, Germany",90.73,29.58,68.72,74.64,82.78,114.48
"Minneapolis, MN, United States",90.26,34.78,70.29,72.84,77.16,108.19
"Tampa, FL, United States",89.97,32.39,69.25,64.01,62.16,90.85
"Sliema, Malta",89.88,26.35,67.02,70.55,89.05,80.50
"Berlin, Germany",89.09,35.80,69.91,75.36,71.71,133.19
"Waterloo, Canada",89.02,29.71,67.67,87.06,67.85,101.67
"Baltimore, MD, United States",88.99,54.12,76.44,101.95,78.13,118.83
"Sevilla, Spain",88.96,18.79,63.70,64.69,81.85,73.40
"Beirut, Lebanon",88.92,37.05,70.25,44.54,76.19,25.73
"Barcelona, Spain",88.82,33.92,69.06,65.26,88.14,86.59
"Philadelphia, PA, United States",88.36,58.85,77.74,83.39,78.50,98.96
"Hong Kong, Hong Kong",88.13,106.22,94.64,85.25,79.06,91.77
"Madrid, Spain",87.93,39.57,70.52,60.85,88.31,93.96
"Graz, Austria",87.76,35.14,68.82,77.79,72.87,101.91
"Dallas, TX, United States",87.62,38.51,69.95,67.93,72.85,113.86
"Nuremberg, Germany",87.54,30.04,66.84,69.56,78.79,107.62
"Jerusalem, Israel",87.54,35.97,68.98,70.06,77.82,68.10
"Houston, TX, United States",86.97,39.70,69.96,74.96,68.89,137.32
"Bilbao, Spain",86.62,37.70,69.01,60.47,93.40,94.48
"Leicester, United Kingdom",86.15,27.80,65.15,82.09,67.83,103.13
"Campinas, Brazil",85.98,23.70,63.56,54.81,66.22,75.34
"Abu Dhabi, United Arab Emirates",85.84,80.82,84.04,72.59,92.39,134.56
"Chicago, IL, United States",85.41,49.96,72.65,72.28,74.80,119.92
"Saint Louis, MO, United States",84.91,23.22,62.71,84.75,64.89,140.12
"Doha, Qatar",84.73,63.50,77.09,81.63,70.84,153.01
"Florianopolis, Brazil",83.88,27.46,63.58,69.26,48.84,37.89
"Pittsburgh, PA, United States",83.72,22.56,61.71,69.83,56.65,135.19
"Montevideo, Uruguay",83.56,26.22,62.93,66.73,68.83,30.20
"Dubai, United Arab Emirates",83.39,67.87,77.80,66.31,78.57,149.89
"Bremen, Germany",82.85,22.77,61.23,70.65,65.58,88.11
"Porto Alegre, Brazil",82.33,23.75,61.25,50.02,51.01,50.42
"Cincinnati, OH, United States",82.18,29.11,63.08,72.09,61.97,103.60
"Valencia, Spain",81.87,19.60,59.46,57.18,73.68,84.53
"Patras, Greece",81.84,17.58,58.71,63.73,76.59,45.64
"Curitiba, Brazil",81.10,22.60,60.05,57.17,45.90,48.94
"Detroit, MI, United States",79.72,30.54,62.02,75.82,67.24,92.61
"Denver, CO, United States",79.39,48.43,68.25,69.23,64.57,126.10
"Austin, TX, United States",78.92,45.55,66.91,80.38,64.96,131.95
"Portland, OR, United States",77.22,33.80,61.59,67.34,68.36,123.02
"Londrina, Brazil",76.68,23.42,57.51,49.26,54.52,30.91
"Lisbon, Portugal",76.33,29.49,59.47,58.65,62.75,62.83
"Coimbra, Portugal",75.74,15.84,54.18,68.50,48.93,53.72
"Split, Croatia",75.60,15.73,54.05,59.97,59.67,51.15
"Salvador, Brazil",75.53,19.72,55.44,49.95,45.98,33.97
"Casablanca, Morocco",75.49,36.51,61.46,74.49,54.77,15.00
"Des Moines, IA, United States",75.45,29.18,58.80,68.64,54.51,104.04
"Ljubljana, Slovenia",75.42,28.59,58.56,62.73,61.98,56.95
"Maribor, Slovenia",75.17,28.11,58.23,55.86,56.85,52.19
"Istanbul, Turkey",74.89,23.21,56.29,55.95,55.29,57.60
"Astana, Kazakhstan",74.58,36.29,60.80,50.62,38.83,32.01
"Johannesburg, South Africa",74.23,38.34,61.31,59.72,55.42,89.43
"Balneario Camboriu, Brazil",74.02,18.98,54.21,48.29,52.10,25.21
"Las Vegas, NV, United States",73.98,36.00,60.31,66.83,70.80,138.32
"Manama, Bahrain",71.86,47.24,63.00,63.60,80.96,64.67
"Zagreb, Croatia",71.49,21.12,53.36,57.85,60.09,54.58
"Baku, Azerbaijan",71.24,41.03,60.37,53.20,68.17,26.38
"San Jose, Costa Rica",71.17,25.95,54.90,78.60,52.85,38.83
"Riga, Latvia",70.75,15.16,50.74,52.59,66.61,34.70
"Seoul, South Korea",70.53,37.10,58.50,71.05,50.57,121.54
"Fortaleza, Brazil",70.30,20.94,52.54,51.92,47.81,59.92
"Bratislava, Slovakia",69.94,29.17,55.27,55.22,50.61,48.64
"Santiago, Chile",69.89,20.62,52.16,53.54,58.73,44.98
"Bogota, Colombia",69.50,21.86,52.36,64.95,41.91,26.24
"Belo Horizonte, Brazil",69.08,21.66,52.01,46.67,60.15,55.99
"Porto, Portugal",69.05,20.32,51.51,52.65,47.06,52.55
"Santa Cruz De Tenerife, Spain",68.98,22.67,52.31,54.01,56.80,71.41
"Novosibirsk, Russia",67.96,26.92,53.19,46.04,77.27,38.33
"Saint Petersburg, Russia",67.58,31.20,54.49,49.09,73.42,40.98
"Kaunas, Lithuania",67.44,16.93,49.26,52.66,65.17,31.72
"Tallinn, Estonia",66.95,15.82,48.55,52.25,60.70,49.68
"Perm, Russia",66.64,18.04,49.15,59.01,56.54,30.50
"Budva, Montenegro",66.16,19.29,49.29,53.35,57.43,33.57
"Amman, Jordan",65.95,14.51,47.44,60.72,51.73,37.85
"Buenos Aires, Argentina",65.93,21.58,49.97,55.69,57.34,40.33
"Taipei, Taiwan",65.66,23.16,50.36,82.38,33.92,75.97
"Jakarta, Indonesia",64.11,28.25,51.21,69.89,39.67,25.60
"Vilnius, Lithuania",63.84,15.58,46.47,52.08,40.18,34.61
"Budapest, Hungary",63.41,14.03,45.64,46.92,46.75,37.44
"Yerevan, Armenia",63.39,25.89,49.89,37.69,57.59,19.61
"Yekaterinburg, Russia",63.22,21.27,48.12,51.07,72.49,45.59
"Prague, Czech Republic",62.91,27.59,50.20,49.50,43.30,58.44
"Debrecen, Hungary",62.47,12.52,44.49,51.07,48.93,43.11
"Tehran, Iran",62.43,30.99,51.11,56.64,49.01,45.70
"Brno, Czech Republic",62.35,20.49,47.28,48.46,43.52,68.36
"Izmir, Turkey",62.12,14.54,45.00,51.08,42.39,46.25
"Podgorica, Montenegro",61.72,17.49,45.80,44.70,62.72,42.01
"Medellin, Colombia",61.43,15.28,44.82,45.49,42.01,18.61
"Antalya, Turkey",61.00,10.27,42.74,44.91,42.74,39.81
"Kosice, Slovakia",60.86,21.19,46.58,47.90,42.65,54.82
"Ankara, Turkey",60.73,14.95,44.25,43.66,46.31,58.15
"Kiev, Ukraine",59.87,31.70,49.73,41.78,61.94,27.80
"Mexico City, Mexico",59.68,23.22,46.56,53.86,47.77,42.69
"Lima, Peru",59.52,19.90,45.26,51.37,43.29,34.80
"Osijek, Croatia",59.50,13.07,42.79,52.02,39.77,45.81
"Sarajevo, Bosnia And Herzegovina",58.59,13.01,42.19,43.89,44.13,35.81
"Cordoba, Argentina",57.81,19.29,43.94,52.43,51.76,42.17
"Tula, Russia",57.72,15.46,42.51,48.96,44.94,51.89
"Guadalajara, Mexico",57.67,10.28,40.61,47.54,44.78,69.13
"Tbilisi, Georgia",57.32,15.77,42.37,40.89,52.50,28.71
"Monterrey, Mexico",56.60,23.53,44.70,49.88,53.05,65.26
"Belgrade, Serbia",56.21,17.13,42.15,39.73,45.39,30.66
"Sofia, Bulgaria",55.62,16.24,41.44,45.83,37.78,36.55
"Kuala Lumpur, Malaysia",55.55,17.71,41.93,55.09,32.09,77.70
"Damascus, Syria",55.50,14.22,40.65,41.91,41.08,20.52
"Johor Baharu, Malaysia",55.32,7.56,38.13,47.53,33.04,38.85
"Wroclaw, Poland",54.85,19.34,42.07,42.05,42.99,58.27
"Guayaquil, Ecuador",54.76,10.14,38.70,44.89,40.14,25.86
"Beijing, China",54.38,28.71,45.14,61.66,37.49,36.42
"Shanghai, China",54.20,29.86,45.44,51.64,42.60,47.04
"Ulaanbaatar, Mongolia",53.86,24.01,43.12,57.94,37.81,22.57
"Quito, Ecuador",53.69,11.66,38.56,47.42,39.26,23.85
"Warsaw, Poland",53.64,22.81,42.55,42.07,45.74,64.83
"Cairo, Egypt",53.40,17.34,40.42,45.39,48.99,20.64
"Poznan, Poland",53.20,13.93,39.07,42.48,41.12,58.48
"Novi Sad, Serbia",52.70,10.53,37.52,36.62,50.99,35.95
"Iasi, Romania",52.66,13.28,38.48,43.50,34.27,31.37
"Bangkok, Thailand",52.61,26.42,43.18,63.49,29.65,29.50
"Guangzhou, China",52.44,17.25,39.77,70.42,30.76,25.60
"Varna, Bulgaria",52.13,11.51,37.51,45.17,38.79,34.13
"Katowice, Poland",51.87,19.49,40.21,43.11,41.41,57.95
"Gdansk, Poland",51.64,20.34,40.37,40.86,43.63,64.99
"Cluj-napoca, Romania",51.35,10.94,36.81,45.02,36.15,38.79
"Bucharest, Romania",50.97,15.28,38.12,39.77,41.79,36.15
"Banja Luka, Bosnia And Herzegovina",50.12,11.38,36.18,40.89,45.75,43.60
"Brasov, Romania",50.05,9.04,35.29,39.77,35.41,33.48
"Constanta, Romania",49.97,14.32,37.14,36.51,36.55,37.55
"Timisoara, Romania",49.90,10.66,35.78,44.77,32.78,38.57
"Plovdiv, Bulgaria",49.05,10.38,35.13,39.39,32.68,31.18
"Quezon City, Philippines",48.83,13.86,36.24,50.04,28.11,28.25
"Krakow, Poland",48.63,19.48,38.14,38.02,34.91,61.36
"Szczecin, Poland",48.59,12.85,35.73,38.88,41.24,53.60
"Hanoi, Vietnam",47.83,40.93,45.34,50.12,31.48,20.82
"Chisinau, Moldova",47.81,12.35,35.05,38.59,40.27,27.56
"Cebu, Philippines",47.61,8.16,33.41,47.26,21.60,35.28
"Minsk, Belarus",47.40,15.41,35.89,35.32,53.72,22.16
"Manila, Philippines",47.34,13.47,35.15,48.24,23.02,27.02
"Makati, Philippines",47.17,28.45,40.43,40.15,34.74,20.06
"Managua, Nicaragua",46.57,11.08,33.80,45.10,31.34,41.13
"Skopje, Macedonia",46.51,11.74,33.99,35.19,35.78,34.39
"Esfahan, Iran",45.56,19.60,36.22,47.53,34.47,49.90
"Nis, Serbia",44.85,11.02,32.68,31.88,37.15,28.62
"Lublin, Poland",42.40,13.98,32.17,34.50,32.67,60.48
"Gurgaon, India",41.64,12.26,31.07,36.11,26.13,63.86
"Ho Chi Minh City, Vietnam",41.09,29.65,36.97,48.66,24.37,45.15
"Algiers, Algeria",40.60,13.23,30.75,42.50,31.32,23.70
"Lahore, Pakistan",40.09,7.75,28.45,37.26,31.69,23.46
"Delhi, India",37.93,12.08,28.63,35.23,26.57,62.71
"Davao, Philippines",37.59,11.36,28.15,39.78,21.57,44.20
"Mumbai, India",36.62,21.51,31.18,35.97,26.86,57.91
"Bangalore, India",34.92,9.80,25.87,35.32,19.80,65.65
"Indore, India",34.85,5.75,24.38,32.90,16.09,89.92
"Chandigarh, India",33.95,6.98,24.24,31.63,21.68,52.41
"Ahmedabad, India",33.12,6.47,23.53,29.26,24.03,50.67
"Hyderabad, India",32.67,7.26,23.52,32.57,20.06,72.32
"Madurai, India",32.05,5.65,22.55,29.99,13.11,25.02
"Kolkata, India",31.97,8.81,23.63,35.06,21.02,49.26
"Pune, India",31.90,9.34,23.78,32.74,20.62,55.50
"Chennai, India",31.09,9.19,23.21,32.57,17.17,59.10
"Kochi, India",31.07,5.28,21.79,34.43,16.52,44.85
"Thiruvananthapuram, India",30.30,5.09,21.23,35.64,17.20,56.05
"Ludhiana, India",30.20,7.89,22.17,31.27,21.88,55.74
1.2 跨域的概念
Ajax访问本地文件时，会出现跨域问题。
1.2.1 跨域问题是如何产生的？
同源策略：浏览器本身存在同源策略。协议，域名，端口相同，视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。
同源策略保证了资源的隔离。一个网站的脚本只能访问自己的资源，就像操作系统里进程不能访问另一个进程的资源一样，如果没有同源策略，你在网站浏览，跳转其他网页，然后这个网页就可以跨域读取你网站中的信息，这样整个Web世界就无隐私可言了。这就是同源策略的重要性，它限制了这些行为。当然，在同一个域内，客户端脚本可以任意读写同源内的资源，前提是这个资源本身是可读可写的。
通俗的讲，浏览器有一个很重要的安全机制，即为同源策略：不用域的客户端脚本在无明确授权的情况下不能读取对方资源，跨域也就是不同源。
跨域：只要协议，域名，端口有一个不同，就是跨域，ajax请求一个目标地址为非本域（协议，域名，端口任意一个不同）的web资源,就是跨域。
1.2.2 为什么谷歌浏览器出现了跨域问题，火狐却没有？
既然跨域失败，就要找原因。这很简单，跨域的三要素，协议，域名，端口。肯定有一个不一样，才导致跨域问题的出现。读取本地JSON代码，火狐可以正常读取到本地的JSON文件，
原因是：虽然允许跨域很不安全，但是如果不跨域的话又带来很多不便。所以火狐是允许跨域的。
那么谷歌是怎么回事，为什么谷歌获取不到，会出现跨域的问题？
这里要提一点，访问本地计算机中的文件，使用的是file协议。file协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件一样，注意它是针对本地（本机）的，简单来说，file协议是访问你本机的文件资源。这么看来，谷歌报错的原因已经很清楚了，控制台可以明显看到
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
由于安全原因浏览器不允许跨域访问，安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会跨域失败，是因为浏览器安全机制不允许，而火狐为了方便允许跨域(虽然这样很不安全)。而且在其他浏览器中，出现跨域问题也是这个原因，就是浏览器安全机制的原因。
1.2.3 跨域问题的解决方案
1、前端人员使用的一般是JSONP进行跨域。
2、项目中使用nginx反向代理。
3、修改谷歌浏览器的配置。
4、在webstrom中打开。
2. 安装http-server
本文通过http服务器的方式解决跨域问题。
这里，如果您还没有安装node，请百度自行安装。
2.1 全局安装http-server
这里使用-g选项全局安装，这样，在cmd命令行模式下，您也可以使用http-server命令。
npm install http-server -g
2.2 启动并配置http-server
指定http服务器的端口为80，不使用缓存，更新了代码后，页面会同步更新。
http-server -p 80 -c-1
最后，在利用d3.js加载csv文件时，请在文件名前加上：http://localhost/
3.svg可视化
svg可以转化成画布，然后点击画布右键就有‘保存图片’的选项，原文入口。
将svg转成canvas需要用到google的一个插件canvg。
<script src="https://is.muni.cz/do/rect/el/storage/utils/svgedit/canvg/canvg.js?lang=en"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://is.muni.cz/do/rect/el/storage/utils/svgedit/canvg/canvg.js?lang=en"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<textarea id="container" style="min-width:300px;height:100px"></textarea>
<input type="button" value="转图片" onClick="convert()" />
<canvas id="canvasId" ></canvas>
<image id="image"/>
<script type="text/javascript">
function convert(){
var svgHtml=$("#container").val();
var canvasId=document.getElementById("canvasId");
canvg(canvasId,svgHtml);
}
</script>