forked from PereiraM/data-mapper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·116 lines (101 loc) · 4.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<!--[if gte IE 9]><!--><html><!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="description" content="Paste in CSV data, see the data on a map, download an SVG">
<meta name="keywords" content="csv data mapper, CSV to SVG, mexico, d3, CSV, map, counties, fips, visualize csv">
<title>CSV Data Mapper</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<link href="css/bootstrap.min.css" media="all" rel="stylesheet" />
<link href="css/index.css" media="all" rel="stylesheet" />
<link href="css/datamapper.css" media="all" rel="stylesheet" />
<div id="main-container">
<!-- body -->
<div class="row">
<div class="span10 offset1" style="position:relative">
<h1 class="hello">Hello, I’m a Data Mapper</h1>
<p class="description">You give me data, I give you map.</p>
<div id="map" style="position:relative"></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<h4>Input CSV</h4>
<p>Paste your CSV below and, as long as it has a <span class="bold">fips</span> field, Data Mapper will make you a map. Your CSV can also include an optional <span class="bold">sequence</span> field, which can be a date, year, day of the week, or any category that you may want to group your data by.</p>
<p>Data Mapper will currently only map county-level data. It'll assume any field not named "fips" or "sequence" is something you want to map.<p>
<textarea id="input"></textarea>
<h4>Select map type</h4>
</div>
</div>
<div class="row">
<div class="span8 offset1">
<label class="radio inline">
<input type="radio" name="mapType" id="bubble" value="bubble" checked="checked"> Bubble<br>(best when your data doesn't include each county)
</label>
<label class="radio inline">
<input type="radio" name="mapType" id="choropleth" value="choropleth"> Choropleth<br>(best when you have statistical data for each county)
</label>
</div>
<div class="span2" style="text-align:right">
<button id="update-map" class="btn">Update Map</button>
</div>
</div>
<div class="row">
<div class="span10 offset1 footer-container">
<h4>Output SVG</h4>
<p>Save the map with the currently selected fields to an SVG for use on the web or to edit in a program like Illustrator</p>
<button id="download-svg" class="btn btn-primary">Download SVG</button>
<!-- footer -->
<div class="footer-container">
<p>Data Mapper is a project by <a href="http://kcollins.io/data-mapper/">Keith Collins</a>. See the code or fork it <a href="https://github.com/keithcollins/data-mapper">here</a>.
<p>Made possible by <a href="http://d3js.org">D3.js</a>, <a href="http://bost.ocks.org/mike/bubble-map/">Let's Make a Bubble Map</a>, and this <a href="http://bl.ocks.org/mbostock/4060606">Choropleth example</a> by Mike Bostock.</p>
<p>Inspired by <a href="http://bl.ocks.org/shancarter/raw/4748131/">Mister Nester</a> and <a href="http://shancarter.github.io/mr-data-converter/">Mr. Data Converter</a> by Shan Carter.</p>
</div>
</div>
</div>
</div><!--/main-container-->
<!-- js -->
<script src="js/all.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="datamapper.js"></script>
<script type="text/javascript">
(function() {
// load sample data into textarea
var dataSample = 'fips,sequence,establishments,employees,payroll\n1,2009,1,1,1\n2,2009,2,2,2\n3,2009,3,3,3\n4,2009,4,4,4\n5,2009,5,5,5\n6,2009,6,6,6\n7,2009,7,7,7\n8,2009,8,8,8\n9,2009,9,9,9\n10,2009,10,10,10\n11,2009,11,11,11\n12,2009,12,12,12\n13,2009,13,13,13\n14,2009,14,14,14\n15,2009,15,15,15\n16,2009,16,16,16\n17,2009,17,17,17\n18,2009,18,18,18\n19,2009,19,19,19\n20,2009,20,20,20\n21,2009,21,21,21\n22,2009,22,22,22\n23,2009,23,23,23\n24,2009,24,24,24\n25,2009,25,25,25\n26,2009,26,26,26\n27,2009,27,27,27\n28,2009,28,28,28\n29,2009,29,29,29\n30,2009,30,30,30\n31,2009,31,31,31\n32,2009,32,32,32\n';
d3.select("#input").property("value", dataSample);
// get text from box
var t = d3.select("#input").property("value");
// parse text
var data = d3.csv.parse(t);
// set initial map type
var mapType = "bubble";
// launch
datamapper("#map", mapType, data);
d3.select("#update-map").on("click",function() {
// get text from box
t = d3.select("#input").property("value");
// parse text
data = d3.csv.parse(t);
// get map type
var radios = document.getElementsByName('mapType');
for (var i=0;i<radios.length;i++) {
if (radios[i]["checked"] === true) {
mapType = radios[i]["value"];
}
}
datamapper("#map", mapType, data);
});
d3.select("#download-svg").on("click",function() {
var svgtext = document.getElementById("map").innerHTML;
var regex = /<div(.*)/;
svgtext = svgtext.replace(regex,'');
var blob = new Blob([svgtext], {type: "image/svg+xml"});
saveAs(blob, "datamapper.svg");
});
})();
</script>
</body>
</html>