API tools faq
paste
Guest User

Untitled

a guest
Feb 19th, 2017
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Titanic Data Visualization</title>
  5. <style>
  6. .axis line,
  7. .axis path {
  8. fill: none;
  9. stroke: #000;
  10. shape-rendering: crispEdges;
  11. stroke-width: 2
  12. }
  13. body {
  14. position: relative;
  15. margin: auto 15%;
  16. }
  17. header {
  18. margin-left: 235px;
  19. }
  20. .note {
  21. width:900px;
  22. margin-top: 10px;
  23. margin-left: 70px;
  24. margin-bottom: 60px;
  25. }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30.  
  31. <script src="//d3js.org/d3.v3.min.js"></script>
  32.  
  33. <header>
  34. <h1>Graphical Representation of Titanic Survival</h1>
  35. </header>
  36.  
  37.  
  38. <div id="chart1"></div>
  39. <div class="note">
  40. <h3>The stacked chart shows the survival rate of passengers according to their classes.
  41. It is clear from the graph that first class passengers have the highest survival rate.<h3>
  42. </div>
  43.  
  44.  
  45. <div id="chart2"></div>
  46. <div class="note">
  47. <h3>The stacked chart shows the survival rate of passengers according to the age group.
  48. The children have the highest survival rate belonging to the age group 0-15.<h3>
  49. </div>
  50.  
  51.  
  52. <div id="chart3"></div>
  53. <div class="note">
  54. <h3>The stacked bar chart shows the survival rate of passengers according to the gender and class.
  55. The females belonging to the first class have maximum survival rate while the males belong to the third class have
  56. minimum survival rate.<h3>
  57. </div>
  58.  
  59.  
  60. <script>
  61. // set width and height dimensions of the chart
  62. var margin = {top: 20, right: 50, bottom: 50, left: 50},
  63. width = 960 - margin.left - margin.right,
  64. height = 500 - margin.top - margin.bottom;
  65. // set the ranges
  66. var x = d3.scale.ordinal()
  67. .rangeRoundBands([margin.left, width],0.5);
  68. var y = d3.scale.linear()
  69. .rangeRound([height,margin.top]);
  70. // define x-axis
  71. var xAxis = d3.svg.axis()
  72. .scale(x)
  73. .orient("bottom");
  74. // define y-axis
  75. var yAxis = d3.svg.axis()
  76. .scale(y)
  77. .orient("left");
  78. // create color category for the chart
  79. var colorRange = d3.scale.ordinal()
  80. .range(["#41ae76","#99d8c9"]);
  81. // append svg element to the page
  82. var svg = d3.select("#chart1").append("svg")
  83. .attr("width", width + margin.left + margin.right)
  84. .attr("height", height + margin.top + margin.bottom)
  85. .append("g")
  86. .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  87. // read csv file and apply data to the chart
  88. d3.csv("survivability_by_cabin.csv", function(data) {
  89. var status = ["Survived_rate", "Perished_rate"];
  90. var rate_layers = d3.layout.stack()(status.map(function(temp) {
  91. return data.map(function(d) {
  92. return {x : d.Cabin_class,
  93. y : +d[temp] };
  94. });
  95. }));
  96. // select the range of the data
  97. x.domain(rate_layers[0].map(function(d) { return d.x; }));
  98. y.domain([0, 1]);
  99. // create layers in the stacked bar chart
  100. var layer= svg.selectAll(".layer")
  101. .data(rate_layers)
  102. .enter()
  103. .append("g")
  104. .attr("class", "layer")
  105. .style("fill", function(d, i) { return colorRange(i); });
  106. var rect = layer.selectAll("rect")
  107. .data(function(d) { return d;})
  108. .enter()
  109. .append("rect")
  110. .attr("x", function(d) { return x(d.x); })
  111. .attr("y", function(d) { return y(d.y + d.y0); })
  112. .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
  113. .attr("width", x.rangeBand())
  114. .on("mouseover", function() { tooltip.style("display", null);})
  115. .on("mousemove", function(d) {
  116. var xPosition = d3.mouse(this)[0] - 15;
  117. var yPosition = d3.mouse(this)[1] - 25;
  118. tooltip.attr("transform", "translate(" + xPosition + "," +
  119. yPosition + ")");
  120. tooltip.select("text").text("Ratio: "+d.y);})
  121. .on("mouseout", function() { tooltip.style("display", "none");});
  122. // add x-axis and label
  123. svg.append("g")
  124. .attr("class", "axis axis--x")
  125. .call(xAxis)
  126. .attr("transform", "translate(0," + height + ")")
  127. .append("text")
  128. .attr("text-anchor","middle")
  129. .attr("transform","translate("+(width/2)+","+margin.bottom+")")
  130. .style("font-size",20)
  131. .text("Cabin Class");
  132. // add y-axis and label
  133. svg.append("g")
  134. .attr("class", "axis axis--y")
  135. .attr("transform","translate("+margin.left+","+0+")")
  136. .call(yAxis)
  137. .append("text")
  138. .attr("text-anchor","end")
  139. .attr("transform","translate("+(-margin.left)+","+(height/2-margin.bottom)+")rotate(-90)")
  140. .style("font-size",20)
  141. .text("Ratio of Passengers");
  142. // define tooltip
  143. var tooltip = svg.append("g")
  144. .attr("class", "tooltip")
  145. .style("display", "none");
  146. tooltip.append("rect")
  147. .attr("width", 65)
  148. .attr("height", 20)
  149. .attr("fill", "white")
  150. .style("opacity", 0.5);
  151. tooltip.append("text")
  152. .attr("x", 30)
  153. .attr("dy", "1.2em")
  154. .style("text-anchor", "middle")
  155. .attr("font-size", "12px")
  156. .attr("font-weight", "bold");
  157. // add title for the chart
  158. var h2 = svg.append("text")
  159. .text("Titanic Survival by Class")
  160. .attr("text-anchor","middle")
  161. .attr("transform","translate("+(width+margin.left)/2+","+0+")")
  162. .attr("class","header")
  163. .attr("font-size",25);
  164. // add legend to the chart
  165. var legend = svg.selectAll(".legend")
  166. .data(colorRange.domain().slice().reverse())
  167. .enter()
  168. .append("g")
  169. .attr("class", "legend")
  170. .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  171. legend.append("rect")
  172. .attr("x", width - 18)
  173. .attr("width", 18)
  174. .attr("height", 18)
  175. .style("fill", colorRange)
  176. legend.append("text")
  177. .attr("x", width - 20)
  178. .attr("y", 9)
  179. .attr("dy", ".35em")
  180. .style("text-anchor", "end")
  181. .text(function(d, i) { switch (i) {
  182. case 0: return "Perished";
  183. case 1: return "Survived"; }});
  184. });
  185. // Chart 2
  186. var margin = {top: 20, right: 50, bottom: 50, left: 50},
  187. width = 960 - margin.left - margin.right,
  188. height = 500 - margin.top - margin.bottom;
  189. var x = d3.scale.ordinal()
  190. .rangeRoundBands([margin.left, width],0.5);
  191. var y = d3.scale.linear()
  192. .rangeRound([height,margin.top]);
  193. var xAxis = d3.svg.axis()
  194. .scale(x)
  195. .orient("bottom");
  196. var colorRange2 = d3.scale.ordinal()
  197. .range(["#756bb1","#bcbddc"]);
  198. var yAxis = d3.svg.axis()
  199. .scale(y)
  200. .orient("left");
  201. var svg2 = d3.select("#chart2").append("svg")
  202. .attr("width", width + margin.left + margin.right)
  203. .attr("height", height + margin.top + margin.bottom)
  204. .append("g")
  205. .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  206. d3.csv("survival_age_group.csv", function(data) {
  207. var status = ["Survived_rate", "Dead_rate"];
  208. var rate_layers = d3.layout.stack()(status.map(function(temp) {
  209. return data.map(function(d) {
  210. return {x : d.Age_group,
  211. y : +d[temp] };
  212. });
  213. }));
  214. x.domain(rate_layers[0].map(function(d) { return d.x; }));
  215. y.domain([0, 1]);
  216. var layer= svg2.selectAll(".layer")
  217. .data(rate_layers)
  218. .enter()
  219. .append("g")
  220. .attr("class", "layer")
  221. .style("fill", function(d, i) { return colorRange2(i); });
  222. var rect = layer.selectAll("rect")
  223. .data(function(d) { return d;})
  224. .enter()
  225. .append("rect")
  226. .attr("x", function(d) { return x(d.x); })
  227. .attr("y", function(d) { return y(d.y + d.y0); })
  228. .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
  229. .attr("width", x.rangeBand())
  230. .on("mouseover", function() { tooltip.style("display", null);})
  231. .on("mousemove", function(d) {
  232. var xPosition = d3.mouse(this)[0] - 15;
  233. var yPosition = d3.mouse(this)[1] - 25;
  234. tooltip.attr("transform", "translate(" + xPosition + "," +
  235. yPosition + ")");
  236. tooltip.select("text").text("Ratio: "+d.y);})
  237. .on("mouseout", function() { tooltip.style("display", "none");});
  238. svg2.append("g")
  239. .attr("class", "axis axis--x")
  240. .call(xAxis)
  241. .attr("transform", "translate(0," + height + ")")
  242. .append("text")
  243. .attr("text-anchor","middle")
  244. .attr("transform","translate("+(width/2)+","+margin.bottom+")")
  245. .style("font-size",20)
  246. .text("Age Group");
  247. svg2.append("g")
  248. .attr("class", "axis axis--y")
  249. .attr("transform","translate("+margin.left+","+0+")")
  250. .call(yAxis)
  251. .append("text")
  252. .attr("text-anchor","end")
  253. .attr("transform","translate("+(-margin.left)+","+(height/2-margin.bottom)+")rotate(-90)")
  254. .style("font-size",20)
  255. .text("Ratio of Passengers");
  256. var tooltip = svg2.append("g")
  257. .attr("class", "tooltip")
  258. .style("display", "none");
  259. tooltip.append("rect")
  260. .attr("width", 65)
  261. .attr("height", 20)
  262. .attr("fill", "white")
  263. .style("opacity", 0.5);
  264. tooltip.append("text")
  265. .attr("x", 30)
  266. .attr("dy", "1.2em")
  267. .style("text-anchor", "middle")
  268. .attr("font-size", "12px")
  269. .attr("font-weight", "bold");
  270. var h2 = svg2.append("text")
  271. .text("Titanic Survival by Age Group")
  272. .attr("text-anchor","middle")
  273. .attr("transform","translate("+(width+margin.left)/2+","+0+")")
  274. .attr("class","header")
  275. .attr("font-size",25);
  276. var legend = svg2.selectAll(".legend")
  277. .data(colorRange2.domain().slice().reverse())
  278. .enter()
  279. .append("g")
  280. .attr("class", "legend")
  281. .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  282. legend.append("rect")
  283. .attr("x", width - 18)
  284. .attr("width", 18)
  285. .attr("height", 18)
  286. .style("fill", colorRange2)
  287. legend.append("text")
  288. .attr("x", width - 20)
  289. .attr("y", 9)
  290. .attr("dy", ".35em")
  291. .style("text-anchor", "end")
  292. .text(function(d, i) { switch (i) {
  293. case 0: return "Perished";
  294. case 1: return "Survived"; }});
  295. });
  296. // Chart 3
  297. var margin = {top: 50, right: 50, bottom: 50, left: 50},
  298. width = 960 - margin.left - margin.right,
  299. height = 500 - margin.top - margin.bottom;
  300. var x = d3.scale.ordinal()
  301. .rangeRoundBands([margin.left, width],0.65);
  302. var y = d3.scale.linear()
  303. .rangeRound([height,margin.top]);
  304. var ColorRange3 = d3.scale.ordinal()
  305. .range(["#636363", "#bdbdbd"]);
  306. var ColorRange4 = d3.scale.ordinal()
  307. .range(["#feb24c", "#ffeda0"]);
  308. var legend_color = d3.scale.ordinal()
  309. .range(["#636363", "#bdbdbd","#feb24c", "#ffeda0"]);
  310. var xAxis = d3.svg.axis()
  311. .scale(x)
  312. .orient("bottom");
  313. var yAxis = d3.svg.axis()
  314. .scale(y)
  315. .orient("left");
  316. var svg3 = d3.select("#chart3").append("svg")
  317. .attr("width", width + margin.left + margin.right)
  318. .attr("height", height + margin.top + margin.bottom)
  319. .append("g")
  320. .attr("transform", "translate("+margin.left+","+20+")");
  321. d3.csv("male_female_survivability.csv", function(data) {
  322. var male_status = ["Male_Survived_Rate", "Male_Perished_Rate"];
  323. var female_status = ["Female_Survived_Rate", "Female_Perished_Rate"];
  324. var layers = d3.layout.stack()(female_status.map(function(c) {
  325. return data.map(function(d) {
  326. return {
  327. x : d.Cabin_class,
  328. y : +d[c],
  329. status : c
  330. };
  331. });
  332. }));
  333. var layers2 = d3.layout.stack()(male_status.map(function(c) {
  334. return data.map(function(d) {
  335. return {
  336. x : d.Cabin_class,
  337. y : +d[c],
  338. status : c
  339. };
  340. });
  341. }));
  342. x.domain(layers[0].map(function(d) { return d.x; }));
  343. y.domain([0, d3.max(layers2[layers2.length - 1], function(d) { return d.y0 + d.y; })]).nice();
  344. var layer = svg3.selectAll(".layer")
  345. .data(layers)
  346. .enter()
  347. .append("g")
  348. .attr("class", "layer")
  349. .style("fill", function(d, i) { return ColorRange3(i); });
  350. var layer2 = svg3.selectAll(".layer2")
  351. .data(layers2)
  352. .enter()
  353. .append("g")
  354. .attr("class", "layer2")
  355. .style("fill", function(d, i) { return ColorRange4(i); });
  356. var rect = layer.selectAll(".female_rect")
  357. .data(function(d) { return d;})
  358. .enter()
  359. .append("rect")
  360. .attr("class","female_rect")
  361. .attr("x", function(d) { return (x(d.x)-x.rangeBand()/2);})
  362. .attr("y", function(d) { return y(d.y + d.y0);})
  363. .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0);})
  364. .attr("width", x.rangeBand())
  365. .on("mouseover", function() { tooltip.style("display", null);})
  366. .on("mousemove", function(d) {
  367. var xPosition = d3.mouse(this)[0] - 15;
  368. var yPosition = d3.mouse(this)[1] - 25;
  369. tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
  370. tooltip.select("text").text("Ratio: "+d.y);})
  371. .on("mouseout", function() { tooltip.style("display", "none");})
  372. var rect2 = layer2.selectAll(".male_rect")
  373. .data(function(d) { return d;})
  374. .enter()
  375. .append("rect")
  376. .attr("class","male_rect")
  377. .attr("x", function(d) { return x(d.x)+x.rangeBand()/2;})
  378. .attr("y", function(d) { return y(d.y + d.y0);})
  379. .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0);})
  380. .attr("width", x.rangeBand())
  381. .on("mouseover", function() { tooltip.style("display", null);})
  382. .on("mousemove", function(d) {
  383. var xPosition = d3.mouse(this)[0] - 15;
  384. var yPosition = d3.mouse(this)[1] - 25;
  385. tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
  386. tooltip.select("text").text("Ratio: "+d.y);})
  387. .on("mouseout", function() { tooltip.style("display", "none");})
  388. svg3.append("g")
  389. .attr("class", "axis axis--x")
  390. .attr("transform", "translate(0," + height + ")")
  391. .call(xAxis)
  392. .append("text")
  393. .attr("text-anchor","middle")
  394. .attr("transform","translate("+width/2+","+margin.bottom+")")
  395. .style("font-size",20)
  396. .text("Cabin Class");
  397. svg3.append("g")
  398. .attr("class", "axis axis--y")
  399. .attr("transform","translate("+margin.left+","+0+")")
  400. .call(yAxis)
  401. .append("text")
  402. .attr("text-anchor","end")
  403. .attr("transform","translate("+(-margin.left)+","+(height/2-margin.bottom)+")rotate(-90)")
  404. .style("font-size",20)
  405. .text("Ratio of Passengers");
  406. var h2 = svg3.append("text")
  407. .text("Titanic Survival by Class and Gender")
  408. .attr("text-anchor","middle")
  409. .attr("transform","translate("+(width+margin.left)/2+","+0+")")
  410. .attr("class","header")
  411. .attr("font-size",25);
  412. var legend = svg3.selectAll(".legend")
  413. .data([0,1,2,3])
  414. .enter()
  415. .append("g")
  416. .attr("class", "legend")
  417. .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  418. legend.append("rect")
  419. .attr("x", width)
  420. .attr("width", 25)
  421. .attr("height", 18)
  422. .style("fill", function(d, i) { return legend_color(i);});
  423. legend.append("text")
  424. .attr("x", width - 5)
  425. .attr("y", 9)
  426. .attr("dy", ".35em")
  427. .style("text-anchor", "end")
  428. .text(function(d, i) { switch (i) {
  429. case 0: return "Female: Survived";
  430. case 1: return "Female: Perished";
  431. case 2: return "Male: Survived";
  432. case 3: return "Male: Perished";}});
  433. var tooltip = svg3.append("g")
  434. .attr("class", "tooltip")
  435. .style("display", "none");
  436. tooltip.append("rect")
  437. .attr("width", 65)
  438. .attr("height", 20)
  439. .attr("fill", "white")
  440. .style("opacity", 0.5);
  441. tooltip.append("text")
  442. .attr("x", 30)
  443. .attr("dy", "1.2em")
  444. .style("text-anchor", "middle")
  445. .attr("font-size", "12px")
  446. .attr("font-weight", "bold");
  447. });
  448. </script>
  449.  
  450. </body>
  451.  
  452. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!