D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
vgchamar
Full window
Github gist
Project1 Main File
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>Project 1:London's 1854 cholera epidemic map</title> <style> body { font: 20px sans-serif; } .dot { stroke: #000; } .tooltip { position: absolute; width: 200px; height: 28px; pointer-events: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } </style> <head> <h1>Project 1:London's 1854 cholera epidemic map</h1> <script src="//d3js.org/d3.v3.min.js"></script> </head> <body> <p>About: This visualization is for the Project 1 of the course H517 Visualization Design, Analysis & Evaluation. The data for the project is provided by the instructor. The visualization for the project is done by me. The Map shows the Cholera Epidemic at London in 1854. Jon Snow created a similar map to identify the source of the Cholera epidemic. </p> <a href="https://bl.ocks.org/vgchamar/d94a0e77c8182483784c714bd04d026c"> This is the link to documentation</a> <a href="https://youtu.be/B45fo5-Dx3k"> Link to the Video</a> <script> // define the size of the SVG var canvas_mapheight=900 var canvas_mapwidth = 1500 var svg = d3.select("body").append("svg") .attr("width", canvas_mapwidth) .attr("height", canvas_mapheight) .call(d3.behavior.zoom().on("zoom", function () { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") })) .append("g") // add the tooltip area to the webpage var tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); // load data from CSV. the data contain co ordinates and their corresponding number of deaths and gender. d3.csv("DeathSpot.csv", function(error, data) { // change string (from CSV) into number format data.forEach(function(d) { d.x = +d.x*40; d.y = +d.y*40; //console.log(d); if (d.AgeGroup == "0") {d.Agerange = "0-10";} else if (d.AgeGroup == "1") {d.Agerange = "11-20";} else if (d.AgeGroup == "2") {d.Agerange = "21-40";} else if (d.AgeGroup == "3") {d.Agerange = "41-60";} else if (d.AgeGroup == "4") {d.Agerange = "61-80";} else {d.Agerange = ">80";} if (d.Gender == "1") d.GenderName = "Female"; else d.GenderName = "Male" //if (d.AgeGroup == "0") d.Agerange = "0-10"; }); // Plot the Map using Path // define a variable to store the path var line_path = ("M16.7380009,18.6959991L17.6599998,18.7119999M14.4619999,18.6550007L16.7380009,18.6959991M12.7938805,18.6161308L14.4619999,18.6550007M11.5998764,18.5883083L12.7938805,18.6161308M10.971961,18.5736771L11.5998764,18.5883083M10.7959166,18.5695744L10.971961,18.5736771M8.533,18.5240002L10.7959166,18.5695744M7.3639998,18.4990005L8.533,18.5240002M6.7030001,18.4850006L7.3639998,18.4990005M6.4789462,18.4790497L6.7030001,18.4850006M4.9920001,18.441L6.4789462,18.4790497M3.3900001,18.3969994L4.9920001,18.441M9.6827154,18.2092381L10.7959166,18.5695744M17.6599998,18.7119999L19.4839993,18.7250004L19.5030003,18.1189995M8.6569996,18.0890007L8.533,18.5240002M5.0978222,18.0533352L6.4789462,18.4790497M4.9920001,18.441L5.0978222,18.0533352M8.7724485,17.9145889L9.6827154,18.2092381M8.7724485,17.9145889L8.6569996,18.0890007M17.4473476,17.9006481L18.7360001,18.0639992L19.5030003,18.1189995M17.4473476,17.9006481L17.5179996,18.4389992L17.6599998,18.7119999M17.1739998,17.8659992L17.4473476,17.9006481M17.1739998,17.8659992L16.7380009,18.6959991M7.9260001,17.6700001L7.882,17.8500004L8.6569996,18.0890007M16.1129227,17.645401L17.1739998,17.8659992M16.1129227,17.645401L15.8950005,18.3330002L15.507,18.2420006L15.3870001,18.3390007L15.3170004,18.5170002M3.733,17.6210003L5.0978222,18.0533352M7.6246362,17.5824795L7.9260001,17.6700001M7.3639998,18.4990005L7.6246362,17.5824795M3.405966,17.5355129L3.733,17.6210003M3.405966,17.5355129L3.3900001,18.3969994M15.6000004,17.5249996L16.1129227,17.645401M14.9702625,17.4152355L15.6000004,17.5249996M14.9702625,17.4152355L14.4619999,18.6550007M6.99401,17.3993397L7.6246362,17.5824795M6.99401,17.3993397L6.7030001,18.4850006M19.5030003,18.1189995L19.5272503,17.2641487M14.1594124,17.2620544L14.783,17.382L14.9702625,17.4152355M8.8240004,17.1959991L8.8760004,17.3260002L8.7724485,17.9145889M19.3530006,17.184L19.5272503,17.2641487M18.5079994,17.3279991L19.184,17.5620003L19.3530006,17.184M13.3946438,17.1198883L13.816,17.1959991L14.1594124,17.2620544M13.3946438,17.1198883L12.7938805,18.6161308M11.5249996,17.0750008L10.971961,18.5736771M8.1929998,17.0149994L8.8240004,17.1959991M8.1459999,16.9909992L8.1929998,17.0149994M7.9260001,17.6700001L8.1459999,16.9909992M5.4027152,16.9372101L6.99401,17.3993397M5.0978222,18.0533352L5.4027152,16.9372101M12.3062029,16.9213066L12.7419996,17.0020008L13.3946438,17.1198883M12.2447538,16.9099293L12.3062029,16.9213066M14.1594124,17.2620544L14.3319998,16.4899998L14.3889999,16.4990005M15.3170004,16.4099998L14.9702625,17.4152355M15.3889999,16.1200008L16.0689697,16.4080257M15.3170004,16.4099998L15.3889999,16.1200008M14.0244579,15.827219L15.1340361,16.3555603L15.3170004,16.4099998M14.0244579,15.827219L13.3946438,17.1198883M15.3889999,16.1200008L15.5100002,15.7519999L15.6070004,15.6219997M13.5803728,15.6042328L14.0244579,15.827219M14.4429998,15.0100002L14.0244579,15.827219M12.2447538,16.9099293L11.5998764,18.5883083M19.5272503,17.2641487L19.541317,16.7682648M19.3530006,17.184L19.541317,16.7682648M11.165,16.7099991L12.2447538,16.9099293M3.733,17.6210003L4.2443171,16.7018509M8.1459999,16.9909992L7.1856389,16.6844387M7.1856389,16.6844387L6.99401,17.3993397M10.8289194,16.6464252L11.165,16.7099991M4.2927132,16.6148548L5.4027152,16.9372101M4.2443171,16.7018509L4.2927132,16.6148548M17.1739998,17.8659992L17.743,16.5869999M10.3191881,16.550005L10.8289194,16.6464252M9.6827154,18.2092381L10.3191881,16.550005M19.541317,16.7682648L19.5478706,16.5372238M15.6000004,17.5249996L16.0689697,16.4080257M9.4746075,16.3902454L10.3191881,16.550005M9.3370533,16.9699402L9.4746075,16.3902454M4.2443171,16.7018509L3.4272959,16.3845978M3.4272959,16.3845978L3.405966,17.5355129M9.0890484,16.3173122L9.4746075,16.3902454M9.0301085,16.3061638L9.0890484,16.3173122M8.8240004,17.1959991L9.0301085,16.3061638M8.3710003,16.1749992L9.0301085,16.3061638M8.1929998,17.0149994L8.3710003,16.1749992M18.7351665,16.1498737L19.5478706,16.5372238M18.7351665,16.1498737L18.3939991,16.8759995L17.743,16.5869999M7.868,16.0779991L8.3710003,16.1749992M3.518651,16.0325737L3.944,16.1590004M3.4272959,16.3845978L3.518651,16.0325737M7.375,15.9779997L7.868,16.0779991M7.375,15.9779997L7.1856389,16.6844387M16.0689697,16.4080257L16.2697639,15.9297791M10.8289194,16.6464252L11.026,15.8590002M6.6325169,15.821804L7.375,15.9779997M5.6999531,15.6256208L6.6325169,15.821804M5.4027152,16.9372101L5.6999531,15.6256208M15.6070004,15.6219997L16.2697639,15.9297791M17.743,16.5869999L17.0990009,16.2549992L17.4214344,15.5421467M5.0250001,15.5159998L5.6999531,15.6256208M4.9097862,15.4901791L5.0250001,15.5159998M4.2927132,16.6148548L4.9097862,15.4901791M18.90695,15.3761148L19.0639992,15.4499998L18.7351665,16.1498737M13.0880003,15.3570004L13.5803728,15.6042328M12.3062029,16.9213066L13.0880003,15.3570004M15.6070004,15.6219997L15.6938972,15.3395834M10.2639999,15.6700001L9.4910889,15.3207779M9.0890484,16.3173122L9.4910889,15.3207779M13.5803728,15.6042328L13.6700001,15.3889999L13.5600004,15.3149996M3.721,15.2480001L4.9097862,15.4901791M3.518651,16.0325737L3.721,15.2480001M16.5881329,15.1714983L17.4214344,15.5421467M16.2697639,15.9297791L16.5881329,15.1714983M3.4498279,15.1688366L3.721,15.2480001M3.4498279,15.1688366L3.4272959,16.3845978M18.402319,15.1387091L18.90695,15.3761148M9.0590544,15.1255732L9.4910889,15.3207779M9.0590544,15.1255732L8.7840004,15.7720003M13.0880003,15.3570004L12.2139997,14.9090004M17.8946495,14.8998747L18.402319,15.1387091M15.6938972,15.3395834L15.8470001,14.842L16.5881329,15.1714983M17.4214344,15.5421467L17.7439995,14.8290005L17.8946495,14.8998747M11.8000002,14.8109999L11.4499998,15.6140003L11.165,16.7099991M14.5469418,14.8062286L15.6938972,15.3395834M14.4429998,15.0100002L14.5469418,14.8062286M13.9339371,14.7479525L14.4429998,15.0100002M7.868,16.0779991L7.9829998,15.2220001L7.9530001,15.1409998L8.1569996,14.7180004L9.0590544,15.1255732M16.5881329,15.1714983L16.6529999,15.0170002L16.8626099,14.5456047M13.5017796,14.5254908L13.9339371,14.7479525M13.5017796,14.5254908L13.0880003,15.3570004M7.2350001,14.4250002L6.796,15.2969999L6.6325169,15.821804M6.012208,14.371027L5.9580002,14.5930004L5.6999531,15.6256208M5.3569999,14.2150002L6.012208,14.371027M5.0250001,15.5159998L5.1300001,14.9499998L5.2030001,14.9569998L5.3569999,14.2150002M12.6890001,14.1149998L13.5017796,14.5254908M10.0377073,14.0517893L11.8000002,14.8109999M9.4910889,15.3207779L10.0377073,14.0517893M15.8640003,13.9809999L15.9709997,14.0570002L15.9469995,14.1029997L16.8626099,14.5456047M15.5389996,14.1099997L15.7370005,14.2139997L15.8640003,13.9809999M12.2077274,13.8600874L12.6890001,14.1149998M11.8000002,14.8109999L12.2077274,13.8600874M15.573,13.8400002L15.8640003,13.9809999M19.5478706,16.5372238L19.6246185,13.831727M18.90695,15.3761148L19.6246185,13.831727M6.1486492,13.812314L7.2350001,14.4250002M6.1486492,13.812314L6.012208,14.371027M16.8626099,14.5456047L17.1940002,13.8030005M19.6246185,13.831727L19.6272583,13.7386885M11.7840004,13.6350002L12.2077274,13.8600874M15.1485777,13.6267643L15.573,13.8400002M14.5469418,14.8062286L15.1485777,13.6267643M8.8964672,13.560133L10.0377073,14.0517893M14.0430002,13.5080004L13.5017796,14.5254908M13.9339371,14.7479525L14.3240004,14.0170002L14.5509996,13.5010004M19.1459999,13.4759998L19.6272583,13.7386885M18.402319,15.1387091L19.0020008,13.7880001L19.1459999,13.4759998M15.1485777,13.6267643L15.2770004,13.375M18.6650467,13.1906729L19.1459999,13.4759998M17.8946495,14.8998747L18.3610001,13.8669996L18.6650467,13.1906729M13.3789997,13.1639996L14.0430002,13.5080004M12.6890001,14.1149998L12.7819996,13.9359999L12.9420004,13.5970001L13.1029997,13.6750002L13.3789997,13.1639996M7.9123201,13.1361542L8.8964672,13.560133M7.9123201,13.1361542L7.2350001,14.4250002M15.573,13.8400002L15.8190002,13.3219995L15.4565592,13.1309834M15.2770004,13.375L15.4565592,13.1309834M14.8091011,13.106781L15.2770004,13.375M6.4696321,13.0269709L6.2319999,13.4709997L6.1486492,13.812314M13.3789997,13.1639996L13.085,13.0030003M14.3639154,12.8515816L14.8091011,13.106781M14.3639154,12.8515816L14.0430002,13.5080004M8.8964672,13.560133L8.9386053,12.83183M14.4169998,12.743L14.3639154,12.8515816M7.2081971,12.7395391L7.9123201,13.1361542M18.6650467,13.1906729L17.7065144,12.6450005M17.1940002,13.8030005L17.5769997,12.9390001L17.7065144,12.6450005M5.1874361,12.6099167L6.4696321,13.0269709M6.7588978,12.4864607L7.2081971,12.7395391M6.7588978,12.4864607L6.4696321,13.0269709M13.9110003,12.4790001L14.4169998,12.743M7.4172621,12.4762888L7.8506641,12.7446699M7.4172621,12.4762888L7.2081971,12.7395391M9.0972004,12.3850803L9.5534487,12.7267799M8.9386053,12.83183L8.9244738,12.6359501L9.0972004,12.3850803M4.25,12.3050003L5.1874361,12.6099167M5.3569999,14.2150002L3.7690001,13.7049999L4.25,12.3050003M9.5534487,12.7267799L9.8582888,12.2909603M14.4169998,12.743L14.7060003,12.25M13.3966837,12.2042065L13.9110003,12.4790001M15.4565592,13.1309834L15.8772621,12.1351805M16.9419994,12.118L16.4899998,13.0159998L16.4360008,13.0240002L16.2709999,13.4049997L17.1940002,13.8030005M8.9386053,12.83183L7.75176,12.0550976M7.75176,12.0550976L7.4172621,12.4762888M17.7065144,12.6450005L17.9696884,12.0475893M13.007,11.9960003L13.3966837,12.2042065M12.2077274,13.8600874L13.007,11.9960003M9.8582888,12.2909603L10.0545797,11.9907026M14.191,11.9700003L14.7060003,12.25M13.9110003,12.4790001L14.191,11.9700003M14.8091011,13.106781L15.2749996,12.1000004L15.3269997,12.0159998L15.4750004,12.0500002L15.5220003,11.9530001L15.8772621,12.1351805M9.3767023,11.9452953L9.8582888,12.2909603M9.0972004,12.3850803L9.3767023,11.9452953M9.5534487,12.7267799L10.3647604,12.9749203L10.8373804,11.9244013M9.3767023,11.9452953L9.4359465,11.8520765M13.007,11.9960003L12.6529999,11.8380003M15.8772621,12.1351805L16.0639992,11.717M19.6272583,13.7386885L19.6851063,11.6994572M10.0545797,11.9907026L9.5583115,11.6595411M9.4359465,11.8520765L9.5583115,11.6595411M8.0833921,11.63976L9.0972004,12.3850803M8.0833921,11.63976L7.75176,12.0550976M17.9696884,12.0475893L18.1510162,11.635972M10.3213997,11.5825596L10.8373804,11.9244013M10.0545797,11.9907026L10.3213997,11.5825596M19.4159222,11.538805L19.6851063,11.6994572M18.6650467,13.1906729L18.9669991,12.5190001L19.4159222,11.538805M14.191,11.9700003L14.4169998,11.5360003M12.6529999,11.8380003L12.0319996,11.5349998M12.0319996,11.5349998L11.5889997,12.4829998L11.8050003,12.6129999M9.4359465,11.8520765L9.2075806,11.6911201L9.0829287,11.6607199L8.7513046,11.3954697M5.8659868,11.3281698L6.7588978,12.4864607M5.1874361,12.6099167L5.4560661,11.6361103L5.8659868,11.3281698M15.2513304,11.3118668L15.6370001,11.5179996L15.8070002,11.6070004L16.0639992,11.717M14.7060003,12.25L15.2513304,11.3118668M7.3959999,11.2959995L6.7588978,12.4864607M13.8603544,11.2842188L13.3966837,12.2042065M14.4169998,11.5360003L13.8927059,11.2200298M13.8927059,11.2200298L13.8603544,11.2842188M9.8386745,11.2184L10.3213997,11.5825596M9.5583115,11.6595411L9.8386745,11.2184M7.4589009,11.1870003L8.0833921,11.63976M7.3959999,11.2959995L7.4589009,11.1870003M15.2513304,11.3118668L15.3559999,11.1470003M16.3017616,11.123909L16.8250008,11.4949999L17.1439991,11.71L17.3999996,11.8079996L17.4720001,11.8070002L17.9696884,12.0475893M16.0639992,11.717L16.2770004,11.1890001L16.3017616,11.123909M12.0319996,11.5349998L11.2035303,11.1105404M10.8373804,11.9244013L11.2035303,11.1105404M15.4517279,10.9671221L15.8360004,11.243M15.3559999,11.1470003L15.4517279,10.9671221M18.459528,10.9356441L18.8080006,11.1540003L19.4159222,11.538805M18.1510162,11.635972L18.459528,10.9356441M19.6851063,11.6994572L19.707737,10.9016447M19.4159222,11.538805L19.707737,10.9016447M13.1271353,10.8527298L13.8603544,11.2842188M12.6529999,11.8380003L12.7919998,11.5120001L13.0740004,10.9589996L13.1271353,10.8527298M15.3559999,11.1470003L14.8257446,10.850667M14.4169998,11.5360003L14.6879997,11.0889997L14.8257446,10.850667M9.3511257,10.8246183L9.8386745,11.2184M9.3511257,10.8246183L9.0457125,11.2711496M19.707737,10.9016447L19.7100048,10.8217096M10.3213997,11.5825596L10.77036,10.7723598M5.3715849,10.6868267L5.8659868,11.3281698M4.9313369,11.5090504L5.0630178,10.8767004L5.3715849,10.6868267M15.6397247,10.6454229L16.3017616,11.123909M15.4517279,10.9671221L15.6397247,10.6454229M15.6397247,10.6454229L15.5965776,10.6166334M10.77036,10.7723598L10.8647203,10.5992098M12.6410398,10.5644312L13.1271353,10.8527298M8.9821606,10.5338202L9.3511257,10.8246183M8.0833921,11.63976L8.9821606,10.5338202M14.8257446,10.850667L14.243,10.5249996L13.8927059,11.2200298M10.3505497,10.4686728L10.77036,10.7723598M9.8386745,11.2184L10.3505497,10.4686728M12.4594259,10.4567184L12.6410398,10.5644312M12.2512302,10.8542404L12.4594259,10.4567184M15.1669998,10.3299999L15.5965776,10.6166334M14.8257446,10.850667L14.9709997,10.5930004L15.1669998,10.3299999M5.0901632,10.321764L5.3715849,10.6868267M16.6480007,10.2989998L16.9279995,10.552L17.1100006,10.6969995L17.2689991,10.8730001L17.4500008,11.1090002L17.8279991,11.3900003L18.1510162,11.635972M16.3017616,11.123909L16.4440002,10.75L16.6480007,10.2989998M15.1669998,10.3299999L15.0657091,10.2674713M12.1054001,10.2467499L12.4594259,10.4567184M18.7706013,10.2303782L19.7100048,10.8217096M18.459528,10.9356441L18.5510006,10.7279997L18.7706013,10.2303782M5.0901632,10.321764L5.0691819,10.41014L4.3077641,10.2040005M4.3077641,10.2040005L3.743839,12.0125303L4.25,12.3050003M11.8282614,10.0615549L12.1054001,10.2467499M11.2035303,11.1105404L11.5598402,10.4594402L11.8282614,10.0615549M15.0657091,10.2674713L15.2250004,10.059M16.6480007,10.2989998L16.9459991,10.0389996M7.4589009,11.1870003L8.1350374,10.0153532M19.7100048,10.8217096L19.7342319,9.967659M17.0279999,9.9549999L17.2290001,10.125L17.6429996,10.4239998L18.459528,10.9356441M16.9459991,10.0389996L17.0279999,9.9549999M15.0657091,10.2674713L14.5319996,9.9379997M4.3077641,10.2040005L3.547796,9.882741M3.547796,9.882741L3.4498279,15.1688366M16.0209999,9.8280001L16.6480007,10.2989998M15.5965776,10.6166334L16.0209999,9.8280001M8.9821606,10.5338202L9.5630398,9.8128672M11.8282614,10.0615549L11.48915,9.810339M15.2250004,10.059L14.8459997,9.7840004M17.0279999,9.9549999L17.2169991,9.7259998M15.7853088,9.6567307L16.0209999,9.8280001M15.7853088,9.6567307L15.5459995,10.0270004M19.0654373,9.562274L19.7342319,9.967659M18.7706013,10.2303782L19.0654373,9.562274M15.6025696,9.5083771L15.7209997,9.6099997L15.7853088,9.6567307M15.2250004,10.059L15.6025696,9.5083771M6.0532022,9.4900789L7.3959999,11.2959995M6.0532022,9.4900789L5.2596159,10.0978498L5.1050048,10.2592497L5.0901632,10.321764M11.48915,9.810339L11.0319405,9.4706602M10.3505497,10.4686728L11.0319405,9.4706602M16.3169994,9.4689999L16.9459991,10.0389996M16.0209999,9.8280001L16.3169994,9.4689999M15.3622665,9.3021784L15.6025696,9.5083771M8.1350374,10.0153532L6.772264,9.1731348M8.6268063,9.163188L9.5630398,9.8128672M8.1350374,10.0153532L8.6268063,9.163188M11.0319405,9.4706602L10.6160746,9.1589956M10.6160746,9.1589956L9.6626434,10.4113703M19.0654373,9.562274L19.3062916,9.090313M17.2169991,9.7259998L16.552,9.0880003M16.4120007,9.2849998L16.552,9.0880003M8.6268063,9.163188L8.7021122,9.0623713M6.544517,9.0438137L6.0532022,9.4900789M12.0264416,9.0231791L11.48915,9.810339M14.9926939,8.9881172L15.2629995,9.217L15.3622665,9.3021784M14.9926939,8.9881172L14.6780005,9.3800001L14.4619999,9.6459999L14.0200005,10.4259996M10.6160746,9.1589956L10.287982,8.9131107M9.5630398,9.8128672L10.287982,8.9131107M16.3169994,9.4689999L15.7329998,8.8850002M15.7329998,8.8850002L15.3622665,9.3021784M14.7312241,8.7499294L14.8780003,8.8909998L14.9926939,8.9881172M19.0654373,9.562274L17.9060001,8.7220001M17.2169991,9.7259998L17.9060001,8.7220001M14.6852283,8.7057219L14.7312241,8.7499294M13.1271353,10.8527298L13.1599998,10.7869997L13.7889996,9.8599997L14.2889996,9.1920004L14.6852283,8.7057219M16.552,9.0880003L16.758667,8.6988859M10.287982,8.9131107L9.8828268,8.5975475M16.758667,8.6988859L16.8862286,8.4587135M11.1494913,8.3766632L12.0264416,9.0231791M11.1494913,8.3766632L10.6160746,9.1589956M15.7329998,8.8850002L15.6820002,8.79L15.6420002,8.7530003L15.493,8.6420002L15.3889999,8.5430002L15.1099997,8.3179998M14.7312241,8.7499294L15.1099997,8.3179998M18.1122017,8.2802267L18.4090004,8.4799995L18.6949997,8.6920004L18.8999996,8.842L19.3062916,9.090313M17.9060001,8.7220001L18.1122017,8.2802267M9.8828268,8.5975475L9.725832,8.4752684L9.1636944,8.2275248M8.7021122,9.0623713L9.0671844,8.4000759L9.1636944,8.2275248M16.8862286,8.4587135L16.5030003,8.2040005M15.1099997,8.3179998L15.2008905,8.2018261M14.137084,8.1869307L14.415,8.4460001L14.6852283,8.7057219M12.6410398,10.5644312L13.3952198,9.188612L13.78479,8.644908L14.137084,8.1869307M12.6530275,8.105197L12.0264416,9.0231791M5.0223222,8.1036558L6.0532022,9.4900789M5.0223222,8.1036558L4.3077641,10.2040005M17.0809994,8.092L17.9060001,8.7220001M16.8862286,8.4587135L17.0809994,8.092M9.1636944,8.2275248L9.2483673,8.087018M3.5814071,8.0692205L3.547796,9.882741M7.043314,7.9979448L8.7021122,9.0623713M9.0185366,7.9805012L9.2483673,8.087018M9.2483673,8.087018L9.3637047,7.8798819M18.327755,7.818418L19.5550003,8.6099997L19.3062916,9.090313M18.1122017,8.2802267L18.327755,7.818418M7.043314,7.9979448L6.8860431,8.2609034L6.1852441,7.7992458M15.5270004,7.7849998L16.758667,8.6988859M15.2008905,8.2018261L15.5270004,7.7849998M13.6739378,7.7551918L14.137084,8.1869307M12.1054001,10.2467499L12.7395,9.0152683L13.6739378,7.7551918M15.5270004,7.7849998L15.5609999,7.744M19.7342319,9.967659L19.7973919,7.7411528M15.3190002,7.527L15.2740002,7.579L15.5609999,7.744M8.2065783,7.5214062L9.0185366,7.9805012M14.165,7.5149999L14.4250002,7.8000002L14.5600004,7.6550002L15.2008905,8.2018261M14.9619999,7.507L15.2639999,7.7610002M15.0950003,7.9120002L14.835,7.6529999L14.9619999,7.507M18.327755,7.818418L18.5060005,7.4720001M8.5915565,7.4712501L9.3637047,7.8798819M11.7894554,7.4380651L12.6530275,8.105197M11.7894554,7.4380651L11.1494913,8.3766632M19.2955208,7.436564L19.7973919,7.7411528M9.8828268,8.5975475L10.6393805,7.406045M15.1020002,7.3280001L15.3190002,7.527M14.9619999,7.507L15.1020002,7.3280001M13.1941566,7.3124142L13.4860001,7.5799999L13.6739378,7.7551918M13.1941566,7.3124142L12.6530275,8.105197M15.3190002,7.527L15.4960003,7.3119998M8.2383413,7.2254648L8.5915565,7.4712501M12.0388098,7.0882711L11.7894554,7.4380651M17.5764389,7.0717092L18.5060005,7.4720001M17.0809994,8.092L17.3710003,7.4679999L17.5764389,7.0717092M4.2529998,7.0689998L5.0223222,8.1036558M4.2529998,7.0689998L3.5814071,8.0692205M18.680275,7.0631671L19.2955208,7.436564M18.5060005,7.4720001L18.680275,7.0631671M6.1852441,7.7992458L5.66609,7.4148331L5.5974889,7.33921L5.6095219,7.2458701L5.5875592,7.2002902L5.360157,7.0399351M15.5609999,7.744L15.6999998,7.3940001L15.8640003,7.007M10.6393805,7.406045L9.8741417,6.9631839M9.3637047,7.8798819L9.8741417,6.9631839M6.7296228,6.96101L6.1852441,7.7992458M15.8640003,7.007L15.4460001,6.927L15.3170004,7.1020002M13.5439301,6.8594022L13.9350004,7.1890001M13.5439301,6.8594022L13.1941566,7.3124142M11.5326204,6.9868431L11.6609097,6.809978L12.0388098,7.0882711M15.9359312,6.7816591L16.3010006,7.006L16.8220005,7.3249998M15.8640003,7.007L15.9359312,6.7816591M4.2529998,7.0689998L3.608146,6.6264238M3.608146,6.6264238L3.5814071,8.0692205M15.9359312,6.7816591L15.9770002,6.6529999L16.0006237,6.598434M12.3836756,6.5711508L12.7159996,6.8740001L13.1941566,7.3124142M12.3836756,6.5711508L12.0388098,7.0882711M9.8741417,6.9631839L9.1696234,6.4773788M9.1696234,6.4773788L8.5915565,7.4712501M16.0006237,6.598434L14.9809999,6.473M14.0550003,6.835L14.585,7.2600002L14.7539997,7.066L14.8299999,7.0300002L14.9280005,6.9120002L14.9809999,6.473M19.7973919,7.7411528L19.8334618,6.4696159M19.2955208,7.436564L19.8334618,6.4696159M5.8547659,6.449976L6.7296228,6.96101M9.8741417,6.9631839L10.1989317,6.3798909M9.1696234,6.4773788L8.9803562,6.369051M13.9549999,6.3270001L14.9809999,6.473M13.9549999,6.3270001L13.5439301,6.8594022M8.9803562,6.369051L8.9052429,6.316586M9.9764957,6.2520528L10.1989317,6.3798909M19.8334618,6.4696159L19.0699177,6.0947471M18.680275,7.0631671L18.9239998,6.5409999L19.0540009,6.1719999L19.0699177,6.0947471M16.0006237,6.598434L16.1189995,6.3249998L16.2212505,6.0893149M8.9803562,6.369051L9.1711073,6.0717611M9.6064482,6.038558L9.9764957,6.2520528M19.8334618,6.4696159L19.8362751,6.3704329L19.8458424,6.0331941M15.5710001,5.9920001L16.2212505,6.0893149M11.6892138,5.9327779L12.3836756,6.5711508M10.6393805,7.406045L11.1638498,6.5722342L11.6892138,5.9327779M11.6892138,5.9327779L11.5450001,5.9510002M4.9678168,5.9228268L5.8547659,6.449976M4.9678168,5.9228268L4.2529998,7.0689998M19.0699177,6.0947471L19.0949993,5.973L19.0990009,5.8390002M12.6246834,5.8145752L12.3836756,6.5711508M12.6246834,5.8145752L11.6892138,5.9327779M12.9380846,5.774405L12.9530001,6.1989999L13.1350002,6.3740001M12.9380846,5.774405L12.835,5.7880001L12.6246834,5.8145752M19.2619991,5.6999998L19.8458424,6.0331941M19.0990009,5.8390002L19.2619991,5.6999998M19.0990009,5.8390002L18.3246307,5.6464381M17.5764389,7.0717092L17.8640003,6.5170002L18.3246307,5.6464381M11.5450001,5.9510002L10.609724,5.6415162M10.1989317,6.3798909L10.609724,5.6415162M18.3246307,5.6464381L18.1140003,5.5970001M14.4879999,5.5700002L14.2379999,5.9840002L13.9549999,6.3270001M14.4879999,5.5700002L12.9380846,5.774405M5.2339149,5.511199L4.9678168,5.9228268M18.1140003,5.5970001L17.6034451,5.4671011M17.6034451,5.4671011L16.9799995,6.7030001M17.6034451,5.4671011L17.4820004,5.4390001M14.9006586,5.418766L14.5889997,5.5349998L14.4879999,5.5700002M10.609724,5.6415162L9.6640987,5.3286061M17.4820004,5.4390001L17.0319996,5.3249998L16.8929996,5.2820001L16.6360226,5.190371M16.2212505,6.0893149L16.2600002,6L16.4920006,5.5419998L16.6360226,5.190371M19.2619991,5.6999998L19.5488033,5.1472368M16.6360226,5.190371L16.5090008,5.1329999L16.3670006,5.1139998L16.2000008,5.0999999L16.0139999,5.1230001L15.6960001,5.2020001L15.0769997,5.3530002L14.9006586,5.418766M9.6640987,5.3286061L8.9399996,5.0890002L8.7835855,5.0881882M8.7835855,5.0881882L7.043314,7.9979448M16.6360226,5.190371L16.6800003,5.0830002M14.6610003,5.0549998L14.9006586,5.418766M4.5265012,5.0371218L5.2339149,5.511199M10.609724,5.6415162L10.6331596,5.5935211L10.7034597,5.464922L10.79,5.3479919L10.9223604,5.2220879L11.1044502,5.0831251L11.3450403,4.9679508M6.788403,4.9390068L5.8547659,6.449976M8.7835855,5.0881882L8.5550003,5.0869999L8.0236416,4.7520242M8.0236416,4.7520242L6.7296228,6.96101M6.788403,4.9390068L6.2738051,4.647501L6.0294609,4.9168949L5.7773108,5.1954622L5.5526562,5.4974699M16.6800003,5.0830002L15.7796097,4.6266069M18.7102337,4.5974021L19.5488033,5.1472368M18.7102337,4.5974021L18.1140003,5.5970001M13.198,4.573L13.3929996,4.6149998L13.5559998,4.6469998L13.6990004,4.6890001L13.809,4.7249999L13.9530001,4.7789998L14.1120005,4.8540001L14.2720003,4.9200001L14.415,4.9780002L14.4860001,5.013L14.6610003,5.0549998M13.198,4.573L12.6246834,5.8145752M19.8458424,6.0331941L19.8876877,4.5580668M19.5488033,5.1472368L19.8876877,4.5580668M3.6991789,4.482688L4.5265012,5.0371218M3.6485059,4.44873L3.6991789,4.482688M3.6485059,4.44873L3.608146,6.6264238M16.6800003,5.0830002L16.8859997,5.138L17.4349995,4.3189998M15.7796097,4.6266069L15.0819998,4.2729998M14.6610003,5.0549998L15.0819998,4.2729998M17.4644604,4.2521591L18.0230007,4.6139998L17.4820004,5.4390001M17.4349995,4.3189998L17.4644604,4.2521591M8.0236416,4.7520242L7.2178321,4.2440319M7.2178321,4.2440319L6.788403,4.9390068M17.4644604,4.2521591L17.5949993,4.0739999M19.0513325,4.0255418L19.8876877,4.5580668M19.0513325,4.0255418L18.7102337,4.5974021M7.2178321,4.2440319L6.5689998,3.835M6.5689998,3.835L5.2339149,5.511199M16.5489998,3.8050001L17.4349995,4.3189998M19.8876877,4.5580668L19.8896084,4.4903941L19.9120007,3.701L19.2561378,3.6821809M19.2561378,3.6821809L19.0513325,4.0255418M16.3569241,3.6810589L16.5489998,3.8050001M16.3569241,3.6810589L15.7796097,4.6266069M19.2561378,3.6821809L18.4994316,3.66047M18.4994316,3.66047L19.0513325,4.0255418M18.4994316,3.66047L17.8633022,3.6422169M17.5949993,4.0739999L17.8633022,3.6422169M17.8633022,3.6422169L16.807991,3.611937M16.807991,3.611937L17.5949993,4.0739999M16.807991,3.611937L16.7561836,3.610451L16.6703091,3.6079869M16.5489998,3.8050001L16.6703091,3.6079869M16.6703091,3.6079869L16.211174,3.5948131M16.211174,3.5948131L16.3569241,3.6810589M11.6251144,3.5709989L11.9694595,3.751684M16.211174,3.5948131L15.4755154,3.5709219M15.4755154,3.5709219L15.0819998,4.2729998M15.4755154,3.5709219L13.6920004,3.513M15.0819998,4.2729998L13.6920004,3.513M13.6920004,3.513L13.198,4.573M13.6920004,3.513L12.1245174,3.4754789M11.9694595,3.751684L12.1245174,3.4754789M12.1245174,3.4754789L11.6879988,3.46503M11.6251144,3.5709989L11.6879988,3.46503M11.6879988,3.46503L10.7841892,3.4390969M9.6640987,5.3286061L10.7841892,3.4390969M10.7841892,3.4390969L9.7828522,3.4103661M9.7828522,3.4103661L8.7835855,5.0881882M9.7828522,3.4103661L7.7992611,3.353451M7.2178321,4.2440319L7.7992611,3.353451M7.7992611,3.353451L6.9635701,3.329473M6.5689998,3.835L6.9635701,3.329473M6.9635701,3.329473L5.6504951,3.2917969M4.5265012,5.0371218L5.6504951,3.2917969M5.6504951,3.2917969L4.5018001,3.2588379M3.6991789,4.482688L4.5018001,3.2588379M4.5018001,3.2588379L3.671,3.2349999L3.6485059,4.44873M11.7447996,4.812386L11.8784599,5.174901L11.5450001,5.9510002M11.7447996,4.812386L11.7215538,4.7587409M11.3450403,4.9679508L11.5410604,4.8256912L11.7215538,4.7587409M11.7215538,4.7587409L11.9124603,4.7007518L12.1021299,4.6366978L12.2367535,4.6037641M12.2367535,4.6037641L12.3080902,4.5863128L12.4647598,4.5699968L12.7875404,4.5581861L12.9984198,4.5517359L13.1107798,4.5683851L13.198,4.573M12.3289022,3.8954501L12.45576,3.953624M12.2367535,4.6037641L12.1689796,4.2499371L12.3289022,3.8954501M11.9694595,3.751684L12.3289022,3.8954501M11.3450403,4.9679508L11.0809002,4.4880772L11.6251144,3.5709989L11.6251144,3.5709989"); svg.selectAll("path") // select all paths .data([data]) // Pass the correct data. This data is not used for the path .enter() .append("path") .attr("d", line_path) // define the path .attr("fill", "none") // fill color set to none .attr("stroke", "#00abc8") // line color to draw the map .attr("stroke-width", 0.1) // line width to draw the map .attr("transform", "scale(40)"); // Scale the map by 40 times // Plot the pump locations. load the data from pumps.csv d3.csv("Pumps.csv", function(data) { data.forEach(function(d) { d.x = +d.x*40; d.y = +d.y*40; }); //console.log(data); // add text where pumps are located var text = svg.selectAll("text") .data(data) .enter() .append("text") .text("Pump") .attr("dx", function(d) { return d.x; }) .attr("dy", function(d) { return d.y; }) .attr("fill", "black") .attr("font-size", "15px"); // add symbols where pumps are located svg.selectAll(".symbol") .data(data) .enter().append("path") .attr("d", d3.svg.symbol().type("square")) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); var Heading1 = svg.selectAll("title") .data(data) .enter() .append("text") .text("Map of London showing location of Pumps(squares) and locations of deaths(dots)- To pan (click and move) / zoom (scroll)") .attr("dx", 50) .attr("dy", 50) .attr("fill", "black") .attr("font-size", "25px"); }); <!-- console.log(data); --> // Draw Dots for death and show information on number of deaths and gender svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", 2) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .style("fill", "red") .on("mouseover", function(d) { tooltip.transition() .duration(300) .style("opacity", .9); tooltip.html("Age range = " + d["Agerange"] + "<br/>" + "Gender = " + d["GenderName"] ) .style("left", (d3.event.pageX + 5) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }); }); var margin = {top: 100, right: 20, bottom: 30, left: 150}, width = 1500 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; // Parse the date / time // add the graph canvas to the body of the webpage var svg_2 = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // add the tooltip area to the webpage var tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); // setup x var parseDate = d3.time.format("%d-%b").parse; var xValue = function(d) { return d.Date;}, // data -> value //var x = d3.time.scale().range([0, width]); xScale = d3.time.scale().range([0, width]), // value -> display xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(9); // Define the axes // setup y var yValue = function(d) { return d.DeathCount;}, // data -> value yScale = d3.scale.linear().domain([0,200]).range([height, 0]), // value -> display yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(20); // Define the line var valueline = d3.svg.line() .x(function(d) { return xScale(d.date); }) .y(function(d) { return yScale(d.NumberofDeath); }); d3.csv("DeathDays_ori.csv", function(error, data) { console.log(data) data.forEach(function(d) { d.date = parseDate(d.date); d.NumberofDeath = + d.NumberofDeath; }); console.log(data); // Scale the range of the data xScale.domain(d3.extent(data, function(d) { return d.date; })); yScale.domain([0, d3.max(data, function(d) { return d.NumberofDeath; })]); var Heading2 = svg_2.selectAll("text") .data(data) .enter() .append("text") .text("Line graph of Number of deaths vs Date") .attr("dx", 50) .attr("dy", 1) .attr("fill", "black") .attr("font-size", "25px"); // Add the valueline path. svg_2.append("path") .data(data) .attr("class", "line") .attr("d", valueline(data)) .attr("stroke", "steelblue") .attr("stroke-width", "2") .attr("fill","none") .on("mouseover", function(d) { tooltip.transition() .duration(300) .style("opacity", .9); tooltip.html("Number of Deaths = " + d["NumberofDeath"] + "<br/>" + "Date = " + d["date"] ) .style("left", (d3.event.pageX + 5) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }); // Add the X Axis svg_2.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("Date"); // Add the Y Axis svg_2.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("DeathCount"); }); //////////////////////////////////////////// Code for Bar Chart /////////////////// var margin = {top: 20, right: 20, bottom: 30, left: 150}, bar_width = 1000 - margin.left - margin.right, bar_height = 500 - margin.top - margin.bottom; // Parse the date / time // add the graph canvas to the body of the webpage var svg_3 = d3.select("body").append("svg") .attr("width", bar_width) .attr("height", bar_height); var Death_Counts = [ 65,78,29,19,34,24,22,35,46,45,88,86]; var selection = svg_3.selectAll('rect') // the UPDATE selection .data(Death_Counts); selection.enter() // the ENTER selection .append('rect') .attr('x', function(d, i){ return 25 + i * 25; }) .attr('width', 15) .attr('fill', function(d, i){ if (i%2==0) {return "blue"} else {return "red"} }) //.merge(selection) // ENTER + UPDATE selections // everything below now happens to all five bars .attr('height', function(d){ return d ; }) .attr('y', function(d){ return 350 - d; }); var Bar_text = svg_3.selectAll("text") .data(Death_Counts) .enter() .append("text") .text( function(d, i){ if (i%2==0) {return "M"} else {return "F"} }) .attr('x', function(d, i){ return 25 + i * 25 ; }) .attr('y', function(d){ return 350 - d -10; }) .attr("fill", "black") .attr("font-size", "18px"); // Add the X Axis svg_3.append("g") .attr("class", "x axis") .append("text") .attr("class", "label") .attr("x", 200) .attr("y", 375) .style("text-anchor", "end") .text("Age Groups"); // Add the Y Axis svg_3.append("g") .attr("class", "y axis") .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Number of Deaths"); var Heading3 = svg_3.selectAll("title") .data(Death_Counts) .enter() .append("text") .text("Bar Graph of Number of deaths vs Age Groups for Male and Female") .attr("dx", 50) .attr("dy", 50) .attr("fill", "black") .attr("font-size", "25px"); </script> </body> </html>
https://d3js.org/d3.v3.min.js