Title index.html graph.js volcano.json <!DOCTYPE html> <html lang=\"en\"> <head>
ID: 3840607 • Letter: T
Question
Title
index.html graph.js volcano.json<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://d3js.org/d3.v2.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script src="graph.js"></script> </head> <body> </body> </html>
var width = 200; var height = 100; var margin = {top: 20, right: 20, bottom: 30, left: 40}; var dataset = d3.json("volcano.json", function(error, data) { console.log([data]); }) var y_scale = d3.scale.linear() .domain([0,101]) .range([0, 101 * 4]); var x_scale = d3.scale.linear() .domain([2010,2057]) .range([0, 47 * 4]); var c_scale = d3.scale.linear() .domain([0, 50000, 130000]) .range(['red','green', 'blue']) .interpolate(d3.interpolateRgb) var svg = d3.select("svg"); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); rects = g.append('g') .selectAll('rect') .data(dataset) .enter() .append('rect') .attr('x', function(d) {return x_scale(d.year)}) .attr('y', function(d) {return y_scale(d.age)}) .attr('width',4) .attr('height', 4) .attr('fill', function(d) { return c_scale(d.low); }); var y_axis = d3.svg.axis() .scale(y_scale) .orient("left"); g.append("g") .attr("class", "y axis") .call(y_axis); var x_axis = d3.svg.axis() .scale(x_scale) .orient("bottom") .ticks(3); g.append('g') .attr('class', 'x axis') .attr("transform", "translate(0," + 404 + ")") .call(x_axis); var counter = 0; function transition() { counter++; var transition_steps = ['low', 'medium','high']; var s = counter % 3; var field = transition_steps[s]; rects .transition() .attr('fill', function(d) { return c_scale(d[field]); }) .duration(2000) } $('svg g').first().on('click', function() { transition(); }); console.log('end ' + new Date); [ {"year": 2010, "age": 0, "low": 62254, "medium": 63707, "high": 65355}, {"year": 2010, "age": 1, "low": 63989, "medium": 64116, "high": 64400}, {"year": 2010, "age": 2, "low": 63303, "medium": 63426, "high": 63693}, {"year": 2010, "age": 3, "low": 59880, "medium": 59998, "high": 60246}, {"year": 2010, "age": 4, "low": 59373, "medium": 59486, "high": 59721}, {"year": 2010, "age": 5, "low": 58308, "medium": 58416, "high": 58637}, {"year": 2010, "age": 6, "low": 57046, "medium": 57149, "high": 57360}, {"year": 2010, "age": 7, "low": 56592, "medium": 56691, "high": 56892}, {"year": 2010, "age": 8, "low": 57836, "medium": 57932, "high": 58126}, {"year": 2010, "age": 9, "low": 59056, "medium": 59149, "high": 59337}, {"year": 2010, "age": 10, "low": 58642, "medium": 58733, "high": 58914}, {"year": 2010, "age": 11, "low": 58600, "medium": 58688, "high": 58861}, {"year": 2010, "age": 12, "low": 59265, "medium": 59350, "high": 59517}, {"year": 2010, "age": 13, "low": 59571, "medium": 59653, "high": 59816}, {"year": 2010, "age": 14, "low": 60174, "medium": 60257, "high": 60418}, {"year": 2010, "age": 15, "low": 61578, "medium": 61666, "high": 61837}, {"year": 2010, "age": 16, "low": 61717, "medium": 61822, "high": 62021}, {"year": 2010, "age": 17, "low": 62304, "medium": 62448, "high": 62745}, {"year": 2010, "age": 18, "low": 63469, "medium": 63650, "high": 64004}, {"year": 2010, "age": 19, "low": 63761, "medium": 63970, "high": 64371}, {"year": 2010, "age": 20, "low": 63943, "medium": 64181, "high": 64640}, {"year": 2010, "age": 21, "low": 63083, "medium": 63341, "high": 63838}, {"year": 2010, "age": 22, "low": 63281, "medium": 63549, "high": 64069}, {"year": 2010, "age": 23, "low": 64069, "medium": 64341, "high": 64870}, {"year": 2010, "age": 24, "low": 65942, "medium": 66213, "high": 66743}, {"year": 2010, "age": 25, "low": 66975, "medium": 67240, "high": 67761}, {"year": 2010, "age": 26, "low": 66604, "medium": 66859, "high": 67359}, {"year": 2010, "age": 27, "low": 67042, "medium": 67286, "high": 67766}, {"year": 2010, "age": 28, "low": 64770, "medium": 65001, "high": 65451}, {"year": 2010, "age": 29, "low": 63731, "medium": 63947, "high": 64369}, {"year": 2010, "age": 30, "low": 61893, "medium": 62096, "high": 62489}, {"year": 2010, "age": 31, "low": 60219, "medium": 60409, "high": 60776}, {"year": 2010, "age": 32, "low": 59966, "medium": 60145, "high": 60488}, {"year": 2010, "age": 33, "low": 60191, "medium": 60358, "high": 60683}, {"year": 2010, "age": 34, "low": 60723, "medium": 60881, "high": 61188}, {"year": 2010, "age": 35, "low": 61844, "medium": 61993, "high": 62283}, {"year": 2010, "age": 36, "low": 63712, "medium": 63852, "high": 64131}, {"year": 2010, "age": 37, "low": 65821, "medium": 65953, "high": 66220}, {"year": 2010, "age": 38, "low": 67945, "medium": 68072, "high": 68330}, {"year": 2010, "age": 39, "low": 68911, "medium": 69032, "high": 69277}, {"year": 2010, "age": 40, "low": 65494, "medium": 65605, "high": 65831}, {"year": 2010, "age": 41, "low": 64114, "medium": 64220, "high": 64432}, {"year": 2010, "age": 42, "low": 61933, "medium": 62030, "high": 62229}, {"year": 2010, "age": 43, "low": 61663, "medium": 61755, "high": 61942}, {"year": 2010, "age": 44, "low": 61425, "medium": 61513, "high": 61692}, {"year": 2010, "age": 45, "low": 62359, "medium": 62442, "high": 62615}, {"year": 2010, "age": 46, "low": 64277, "medium": 64357, "high": 64527}, {"year": 2010, "age": 47, "low": 64772, "medium": 64847, "high": 65012}, {"year": 2010, "age": 48, "low": 64846, "medium": 64917, "high": 65077}, {"year": 2010, "age": 49, "low": 63713, "medium": 63781, "high": 63934}, {"year": 2010, "age": 50, "low": 61775, "medium": 61839, "high": 61985}, {"year": 2010, "age": 51, "low": 60159, "medium": 60221, "high": 60361}, {"year": 2010, "age": 52, "low": 58601, "medium": 58659, "high": 58795}, {"year": 2010, "age": 53, "low": 57466, "medium": 57522, "high": 57654}, {"year": 2010, "age": 54, "low": 56681, "medium": 56735, "high": 56863}, {"year": 2010, "age": 55, "low": 55249, "medium": 55300, "high": 55423}, {"year": 2010, "age": 56, "low": 53938, "medium": 53987, "high": 54105}, {"year": 2010, "age": 57, "low": 53896, "medium": 53943, "high": 54058}, {"year": 2010, "age": 58, "low": 52487, "medium": 52531, "high": 52640}, {"year": 2010, "age": 59, "low": 51772, "medium": 51814, "high": 51918}, {"year": 2010, "age": 60, "low": 51355, "medium": 51395, "high": 51495}, {"year": 2010, "age": 61, "low": 49939, "medium": 49976, "high": 50071}, {"year": 2010, "age": 62, "low": 49787, "medium": 49823, "high": 49915}, {"year": 2010, "age": 63, "low": 51587, "medium": 51622, "high": 51713}, {"year": 2010, "age": 64, "low": 43432, "medium": 43464, "high": 43541}, {"year": 2010, "age": 65, "low": 42362, "medium": 42391, "high": 42463}, {"year": 2010, "age": 66, "low": 39466, "medium": 39493, "high": 39560}, {"year": 2010, "age": 67, "low": 35465, "medium": 35490, "high": 35551}, {"year": 2010, "age": 68, "low": 34876, "medium": 34900, "high": 34958}, {"year": 2010, "age": 69, "low": 32189, "medium": 32211, "high": 32265}, {"year": 2010, "age": 70, "low": 30929, "medium": 30951, "high": 31002}, {"year": 2010, "age": 71, "low": 29169, "medium": 29190, "high": 29237}, {"year": 2010, "age": 72, "low": 27038, "medium": 27058, "high": 27101}, {"year": 2010, "age": 73, "low": 25997, "medium": 26015, "high": 26057}, {"year": 2010, "age": 74, "low": 24308, "medium": 24326, "high": 24364}, {"year": 2010, "age": 75, "low": 22376, "medium": 22392, "high": 22428}, {"year": 2010, "age": 76, "low": 20878, "medium": 20893, "high": 20927}, {"year": 2010, "age": 77, "low": 20150, "medium": 20165, "high": 20197}, {"year": 2010, "age": 78, "low": 19369, "medium": 19383, "high": 19414}, {"year": 2010, "age": 79, "low": 19317, "medium": 19331, "high": 19360}, {"year": 2010, "age": 80, "low": 18183, "medium": 18197, "high": 18225}, {"year": 2010, "age": 81, "low": 16993, "medium": 17006, "high": 17032}, {"year": 2010, "age": 82, "low": 15857, "medium": 15869, "high": 15894}, {"year": 2010, "age": 83, "low": 14456, "medium": 14466, "high": 14490}, {"year": 2010, "age": 84, "low": 13598, "medium": 13609, "high": 13631}, {"year": 2010, "age": 85, "low": 12370, "medium": 12379, "high": 12399}, {"year": 2010, "age": 86, "low": 10628, "medium": 10637, "high": 10655}, {"year": 2010, "age": 87, "low": 9462, "medium": 9470, "high": 9488}, {"year": 2010, "age": 88, "low": 8427, "medium": 8436, "high": 8451}, {"year": 2010, "age": 89, "low": 7313, "medium": 7321, "high": 7334}, {"year": 2010, "age": 90, "low": 6149, "medium": 6155, "high": 6168}, {"year": 2010, "age": 91, "low": 4553, "medium": 4559, "high": 4570}, {"year": 2010, "age": 92, "low": 3630, "medium": 3636, "high": 3646}, {"year": 2010, "age": 93, "low": 3008, "medium": 3013, "high": 3022}, {"year": 2010, "age": 94, "low": 2346, "medium": 2351, "high": 2359}, {"year": 2010, "age": 95, "low": 1858, "medium": 1864, "high": 1871}, {"year": 2010, "age": 96, "low": 1392, "medium": 1397, "high": 1404}, {"year": 2010, "age": 97, "low": 1021, "medium": 1026, "high": 1032}, {"year": 2010, "age": 98, "low": 740, "medium": 744, "high": 750}, {"year": 2010, "age": 99, "low": 510, "medium": 514, "high": 520}, {"year": 2010, "age": 100, "low": 854, "medium": 857, "high": 862}, {"year": 2011, "age": 0, "low": 60970, "medium": 64009, "high": 67371}, {"year": 2011, "age": 1, "low": 62833, "medium": 64476, "high": 66389}, {"year": 2011, "age": 2, "low": 64574, "medium": 64897, "high": 65439}, {"year": 2011, "age": 3, "low": 63896, "medium": 64204, "high": 64718}, {"year": 2011, "age": 4, "low": 60541, "medium": 60833, "high": 61312}, {"year": 2011, "age": 5, "low": 60029, "medium": 60309, "high": 60765}, {"year": 2011, "age": 6, "low": 58950, "medium": 59217, "high": 59648}, {"year": 2011, "age": 7, "low": 57702, "medium": 57958, "high": 58367}, {"year": 2011, "age": 8, "low": 57242, "medium": 57489, "high": 57880}, {"year": 2011, "age": 9, "low": 58444, "medium": 58683, "high": 59060}, {"year": 2011, "age": 10, "low": 59637, "medium": 59869, "high": 60235}, {"year": 2011, "age": 11, "low": 59226, "medium": 59450, "high": 59804}, {"year": 2011, "age": 12, "low": 59168, "medium": 59384, "high": 59724}, {"year": 2011, "age": 13, "low": 59798, "medium": 60008, "high": 60338}, {"year": 2011, "age": 14, "low": 60090, "medium": 60297, "high": 60621}, {"year": 2011, "age": 15, "low": 60697, "medium": 60912, "high": 61245}, {"year": 2011, "age": 16, "low": 62178, "medium": 62424, "high": 62798}, {"year": 2011, "age": 17, "low": 62481, "medium": 62808, "high": 63299}, {"year": 2011, "age": 18, "low": 63422, "medium": 63838, "high": 64484}, {"year": 2011, "age": 19, "low": 64444, "medium": 64939, "high": 65692}, {"year": 2011, "age": 20, "low": 64770, "medium": 65336, "high": 66195}, {"year": 2011, "age": 21, "low": 64976, "medium": 65604, "high": 66561}, {"year": 2011, "age": 22, "low": 64140, "medium": 64805, "high": 65819}, {"year": 2011, "age": 23, "low": 64295, "medium": 64975, "high": 66017}, {"year": 2011, "age": 24, "low": 65011, "medium": 65693, "high": 66742}, {"year": 2011, "age": 25, "low": 66780, "medium": 67452, "high": 68495}, {"year": 2011, "age": 26, "low": 67775, "medium": 68429, "high": 69448}, {"year": 2011, "age": 27, "low": 67415, "medium": 68040, "high": 69018}, {"year": 2011, "age": 28, "low": 67822, "medium": 68419, "high": 69352}, {"year": 2011, "age": 29, "low": 65626, "medium": 66187, "high": 67060}, {"year": 2011, "age": 30, "low": 64596, "medium": 65123, "high": 65943}, {"year": 2011, "age": 31, "low": 62788, "medium": 63282, "high": 64044}, {"year": 2011, "age": 32, "low": 61147, "medium": 61608, "high": 62320}, {"year": 2011, "age": 33, "low": 60865, "medium": 61298, "high": 61965}, {"year": 2011, "age": 34, "low": 61057, "medium": 61463, "high": 62092}, {"year": 2011, "age": 35, "low": 61553, "medium": 61936, "high": 62530}, {"year": 2011, "age": 36, "low": 62632, "medium": 62992, "high": 63556}, {"year": 2011, "age": 37, "low": 64447, "medium": 64790, "high": 65329}, {"year": 2011, "age": 38, "low": 66510, "medium": 66835, "high": 67351}, {"year": 2011, "age": 39, "low": 68609, "medium": 68920, "high": 69417}, {"year": 2011, "age": 40, "low": 69544, "medium": 69838, "high": 70312}, {"year": 2011, "age": 41, "low": 66122, "medium": 66394, "high": 66831}, {"year": 2011, "age": 42, "low": 64728, "medium": 64983, "high": 65393}, {"year": 2011, "age": 43, "low": 62522, "medium": 62762, "high": 63145}, {"year": 2011, "age": 44, "low": 62206, "medium": 62432, "high": 62795}, {"year": 2011, "age": 45, "low": 61939, "medium": 62153, "high": 62500}, {"year": 2011, "age": 46, "low": 62818, "medium": 63023, "high": 63357}, {"year": 2011, "age": 47, "low": 64683, "medium": 64879, "high": 65206}, {"year": 2011, "age": 48, "low": 65127, "medium": 65316, "high": 65633}, {"year": 2011, "age": 49, "low": 65143, "medium": 65323, "high": 65629}, {"year": 2011, "age": 50, "low": 63974, "medium": 64145, "high": 64439}, {"year": 2011, "age": 51, "low": 62005, "medium": 62168, "high": 62450}, {"year": 2011, "age": 52, "low": 60366, "medium": 60521, "high": 60792}, {"year": 2011, "age": 53, "low": 58789, "medium": 58938, "high": 59199}, {"year": 2011, "age": 54, "low": 57633, "medium": 57776, "high": 58029}, {"year": 2011, "age": 55, "low": 56826, "medium": 56964, "high": 57210}, {"year": 2011, "age": 56, "low": 55362, "medium": 55493, "high": 55729}, {"year": 2011, "age": 57, "low": 54021, "medium": 54146, "high": 54371}, {"year": 2011, "age": 58, "low": 53939, "medium": 54059, "high": 54277}, {"year": 2011, "age": 59, "low": 52490, "medium": 52604, "high": 52811}, {"year": 2011, "age": 60, "low": 51737, "medium": 51846, "high": 52043}, {"year": 2011, "age": 61, "low": 51279, "medium": 51382, "high": 51571}, {"year": 2011, "age": 62, "low": 49823, "medium": 49920, "high": 50100}, {"year": 2011, "age": 63, "low": 49637, "medium": 49730, "high": 49902}, {"year": 2011, "age": 64, "low": 51372, "medium": 51464, "high": 51635}, {"year": 2011, "age": 65, "low": 43247, "medium": 43328, "high": 43474}, {"year": 2011, "age": 66, "low": 42133, "medium": 42208, "high": 42346}, {"year": 2011, "age": 67, "low": 39233, "medium": 39304, "high": 39432}, {"year": 2011, "age": 68, "low": 35232, "medium": 35296, "high": 35412}, {"year": 2011, "age": 69, "low": 34596, "medium": 34657, "high": 34767}, {"year": 2011, "age": 70, "low": 31895, "medium": 31953, "high": 32054}, {"year": 2011, "age": 71, "low": 30598, "medium": 30653, "high": 30749}, {"year": 2011, "age": 72, "low": 28811, "medium": 28863, "high": 28953}, {"year": 2011, "age": 73, "low": 26657, "medium": 26705, "high": 26790}, {"year": 2011, "age": 74, "low": 25571, "medium": 25616, "high": 25696}, {"year": 2011, "age": 75, "low": 23849, "medium": 23892, "high": 23966}, {"year": 2011, "age": 76, "low": 21897, "medium": 21937, "high": 22006}, {"year": 2011, "age": 77, "low": 20370, "medium": 20408, "high": 20473}, {"year": 2011, "age": 78, "low": 19593, "medium": 19630, "high": 19691}, {"year": 2011, "age": 79, "low": 18760, "medium": 18795, "high": 18853}, {"year": 2011, "age": 80, "low": 18628, "medium": 18662, "high": 18718}, {"year": 2011, "age": 81, "low": 17457, "medium": 17489, "high": 17542}, {"year": 2011, "age": 82, "low": 16232, "medium": 16262, "high": 16312}, {"year": 2011, "age": 83, "low": 15064, "medium": 15092, "high": 15138}, {"year": 2011, "age": 84, "low": 13648, "medium": 13675, "high": 13718}, {"year": 2011, "age": 85, "low": 12749, "medium": 12775, "high": 12815}, {"year": 2011, "age": 86, "low": 11512, "medium": 11536, "high": 11573}, {"year": 2011, "age": 87, "low": 9817, "medium": 9838, "high": 9872}, {"year": 2011, "age": 88, "low": 8666, "medium": 8685, "high": 8716}, {"year": 2011, "age": 89, "low": 7642, "medium": 7661, "high": 7689}, {"year": 2011, "age": 90, "low": 6564, "medium": 6581, "high": 6606}, {"year": 2011, "age": 91, "low": 5457, "medium": 5474, "high": 5496}, {"year": 2011, "age": 92, "low": 4004, "medium": 4019, "high": 4039}, {"year": 2011, "age": 93, "low": 3160, "medium": 3172, "high": 3190}, {"year": 2011, "age": 94, "low": 2585, "medium": 2597, "high": 2614}, {"year": 2011, "age": 95, "low": 1996, "medium": 2008, "high": 2023}, {"year": 2011, "age": 96, "low": 1563, "medium": 1574, "high": 1588}, {"year": 2011, "age": 97, "low": 1161, "medium": 1171, "high": 1183}, {"year": 2011, "age": 98, "low": 848, "medium": 858, "high": 869}, {"year": 2011, "age": 99, "low": 615, "medium": 623, "high": 634}, {"year": 2011, "age": 100, "low": 1025, "medium": 1035, "high": 1049}, {"year": 2012, "age": 0, "low": 59508, "medium": 64267, "high": 69405}, {"year": 2012, "age": 1, "low": 61515, "medium": 64808, "high": 68418}, {"year": 2012, "age": 2, "low": 63384, "medium": 65282, "high": 67439}, {"year": 2012, "age": 3, "low": 65125, "medium": 65701, "high": 66484}, {"year": 2012, "age": 4, "low": 64447, "medium": 64996, "high": 65738}, {"year": 2012, "age": 5, "low": 61148, "medium": 61669, "high": 62364}, {"year": 2012, "age": 6, "low": 60630, "medium": 61128, "high": 61789}, {"year": 2012, "age": 7, "low": 59535, "medium": 60008, "high": 60637}, {"year": 2012, "age": 8, "low": 58295, "medium": 58751, "high": 59349}, {"year": 2012, "age": 9, "low": 57829, "medium": 58267, "high": 58840}, {"year": 2012, "age": 10, "low": 58990, "medium": 59413, "high": 59967}, {"year": 2012, "age": 11, "low": 60159, "medium": 60569, "high": 61107}, {"year": 2012, "age": 12, "low": 59748, "medium": 60146, "high": 60664}, {"year": 2012, "age": 13, "low": 59671, "medium": 60056, "high": 60557}, {"year": 2012, "age": 14, "low": 60269, "medium": 60646, "high": 61137}, {"year": 2012, "age": 15, "low": 60567, "medium": 60953, "high": 61448}, {"year": 2012, "age": 16, "low": 61243, "medium": 61669, "high": 62204}, {"year": 2012, "age": 17, "low": 62874, "medium": 63422, "high": 64085}, {"year": 2012, "age": 18, "low": 63505, "medium": 64196, "high": 65038}, {"year": 2012, "age": 19, "low": 64275, "medium": 65111, "high": 66158}, {"year": 2012, "age": 20, "low": 65246, "medium": 66217, "high": 67430}, {"year": 2012, "age": 21, "low": 65567, "medium": 66653, "high": 68009}, {"year": 2012, "age": 22, "low": 65775, "medium": 66947, "high": 68423}, {"year": 2012, "age": 23, "low": 64961, "medium": 66174, "high": 67712}, {"year": 2012, "age": 24, "low": 65081, "medium": 66306, "high": 67867}, {"year": 2012, "age": 25, "low": 65746, "medium": 66959, "high": 68516}, {"year": 2012, "age": 26, "low": 67436, "medium": 68626, "high": 70161}, {"year": 2012, "age": 27, "low": 68411, "medium": 69563, "high": 71056}, {"year": 2012, "age": 28, "low": 68073, "medium": 69172, "high": 70599}, {"year": 2012, "age": 29, "low": 68463, "medium": 69508, "high": 70867}, {"year": 2012, "age": 30, "low": 66343, "medium": 67324, "high": 68596}, {"year": 2012, "age": 31, "low": 65330, "medium": 66250, "high": 67443}, {"year": 2012, "age": 32, "low": 63554, "medium": 64412, "high": 65524}, {"year": 2012, "age": 33, "low": 61947, "medium": 62749, "high": 63787}, {"year": 2012, "age": 34, "low": 61644, "medium": 62396, "high": 63369}, {"year": 2012, "age": 35, "low": 61810, "medium": 62517, "high": 63433}, {"year": 2012, "age": 36, "low": 62279, "medium": 62944, "high": 63809}, {"year": 2012, "age": 37, "low": 63323, "medium": 63951, "high": 64772}, {"year": 2012, "age": 38, "low": 65096, "medium": 65693, "high": 66475}, {"year": 2012, "age": 39, "low": 67119, "medium": 67688, "high": 68436}, {"year": 2012, "age": 40, "low": 69199, "medium": 69744, "high": 70463}, {"year": 2012, "age": 41, "low": 70105, "medium": 70622, "high": 71307}, {"year": 2012, "age": 42, "low": 66677, "medium": 67155, "high": 67787}, {"year": 2012, "age": 43, "low": 65265, "medium": 65715, "high": 66309}, {"year": 2012, "age": 44, "low": 63036, "medium": 63457, "high": 64012}] 10 20 50 80 90 2,020 2,040 0000 000 0000 1234 5678 90
Explanation / Answer
Its beacuse of the version you are using. Change the version of d3js from d3.v2 to d3.v3 in script tag and also create a svg tag in the html file. Without a svg tag in your HTML you cannot expect a svg object by calling "var svg = d3.select("svg");". hence change your html file as below.
Also you have used Jquery selector in graph.js, so include the Jquery library in your HTML file using script tag just like d3js library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script> // the version of jquery, you can use as per your choice
<svg width="960" height="600"></svg>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="graph.js"></script>
</head>
</html>
Related Questions
Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.