Ok, I am a complete noob in HTML and Javascript. I asked a question months ago and got great advice, but somehow my HTML file with JS in it is still not running. I double click on the HTML file but the browser is empty with no visualisations from the JS. I really don't know what is missing. Any help is appreciated.
I tried everything I knew but the HTML file is not showing the visualisation code written in JS. Please look at the HTML code below and kindly let me know why it is not showing anything in browser:
<!DOCTYPE html>
<html>
<head>
<title>Programming Assignment 1 Visualization</title>
</head>
<body>
<svg width="1000" height="1000"></svg>
<script src="https://d3js.org/d3.v4.min.js">
var wealthdataBY = 'year,percentile,avg_welfare,welfare_share\n' +
'2014,1,2.706183088,4.13E-04\n' +
'2014,2,11.03834646,0.001695224\n' +
'2014,3,15.21296516,0.002312137\n' +
'2014,4,17.78666642,0.00269041\n' +
'2014,5,19.65899193,0.002956128\n' +
'2014,6,21.23338101,0.003339948\n' +
'2014,7,22.71642933,0.003516624\n' +
'2014,8,23.88424149,0.003658528\n' +
'2014,9,24.95633096,0.003753631\n' +
'2014,10,25.78625374,0.003982182\n' +
'2014,11,26.61719414,0.004056163\n' +
'2014,12,27.43463276,0.004242275\n' +
'2014,13,28.31720791,0.004356616\n' +
'2014,14,29.23106771,0.004430671\n' +
'2014,16,30.55067193,0.004615256\n' +
'2014,15,29.89843511,0.004622624\n' +
'2014,17,31.20316268,0.004788713\n' +
'2014,19,32.38771182,0.004905248\n' +
'2014,18,31.82871304,0.004935677\n' +
'2014,20,32.95847038,0.005040114\n' +
'2014,21,33.6474718,0.00517809\n' +
'2014,22,34.33875307,0.005287092\n' +
'2014,23,35.01464846,0.005318556\n' +
'2014,24,35.63748207,0.005509578\n' +
'2014,26,37.03581494,0.005533916\n' +
'2014,25,36.26642742,0.005552525\n' +
'2014,28,38.23585461,0.00585185\n' +
'2014,29,38.94099912,0.005912125\n' +
'2014,27,37.61468566,0.005914599\n' +
'2014,30,39.66490264,0.006131417\n' +
'2014,31,40.37644593,0.006135434\n' +
'2014,32,41.02135057,0.006275446\n' +
'2014,34,42.01105027,0.006279145\n' +
'2014,33,41.62407432,0.006398975\n' +
'2014,36,43.03352375,0.006620354\n' +
'2014,37,43.59007717,0.00664285\n' +
'2014,35,42.4723306,0.006659414\n' +
'2014,38,44.05401838,0.006730177\n' +
'2014,39,44.59078719,0.006884592\n' +
'2014,40,45.22011959,0.006932515\n' +
'2014,41,45.78335857,0.006968054\n' +
'2014,42,46.49121536,0.007163011\n' +
'2014,44,47.72893726,0.007204686\n' +
'2014,43,47.10222632,0.007217617\n' +
'2014,46,48.96673209,0.007339635\n' +
'2014,45,48.31298287,0.007502717\n' +
'2014,47,49.62708527,0.007647174\n' +
'2014,49,51.09694646,0.00770794\n' +
'2014,48,50.38862979,0.007832711\n' +
'2014,50,51.83564211,0.008013788\n' +
'2014,51,52.57598103,0.008077265\n' +
'2014,52,53.44639201,0.00821346\n' +
'2014,53,54.36172111,0.008213976\n' +
'2014,54,55.3113642,0.008569552\n' +
'2014,55,56.25654416,0.008582421\n' +
'2014,56,57.0291785,0.008727159\n' +
'2014,57,57.94137541,0.008731472\n' +
'2014,58,58.59715086,0.008899733\n' +
'2014,60,60.15320318,0.00925621\n' +
'2014,59,59.28244241,0.009315586\n' +
'2014,61,61.24756855,0.009366636\n' +
'2014,62,62.45605758,0.0095675\n' +
'2014,63,63.53518536,0.009744829\n' +
'2014,64,64.52243794,0.009799718\n' +
'2014,66,66.6700305,0.009982036\n' +
'2014,65,65.58589209,0.010123451\n' +
'2014,68,68.73954583,0.010530309\n' +
'2014,67,67.67139554,0.01057591\n' +
'2014,69,69.68166938,0.010629437\n' +
'2014,70,70.78054852,0.01072159\n' +
'2014,72,73.10381941,0.011181249\n' +
'2014,71,71.82035176,0.011192657\n' +
'2014,73,74.50528527,0.011430376\n' +
'2014,74,75.81199845,0.011560037\n' +
'2014,75,77.04250182,0.011850264\n' +
'2014,76,78.565506,0.011979398\n' +
'2014,77,80.40478014,0.012287298\n' +
'2014,78,82.12333785,0.012632993\n' +
'2014,79,83.79248925,0.012819295\n' +
'2014,80,85.55768023,0.013092763\n' +
'2014,81,87.47915,0.013450056\n' +
'2014,82,89.38254022,0.013670864\n' +
'2014,83,91.63481485,0.013968713\n' +
'2014,84,93.91744067,0.01438506\n' +
'2014,85,96.41946083,0.014842324\n' +
'2014,86,99.54540544,0.015127246\n' +
'2014,87,102.9654549,0.015866659\n' +
'2014,88,105.971401,0.016271822\n' +
'2014,89,109.1419537,0.016551497\n' +
'2014,90,112.514213,0.017172604\n' +
'2014,91,116.3289357,0.017953955\n' +
'2014,92,120.6459775,0.018589704\n' +
'2014,93,125.5685177,0.019149158\n' +
'2014,94,131.9060045,0.020295548\n' +
'2014,95,139.9451658,0.021426068\n' +
'2014,96,148.6943539,0.022718048\n' +
'2014,97,161.3097917,0.024702846\n' +
'2014,98,181.7236599,0.027893949\n' +
'2014,99,217.7250904,0.033325498\n' +
'2014,100,419.3771126,0.064326418\n' +
'2016,1,2.921344881,4.53E-04\n' +
'2016,2,10.86946963,0.001684881\n' +
'2016,3,14.96556705,0.002398038\n' +
'2016,4,17.41174479,0.00271892\n' +
'2016,5,18.84613732,0.002939701\n' +
'2016,6,20.38088749,0.00321461\n' +
'2016,7,21.94488945,0.003436429\n' +
'2016,8,22.9706105,0.003609283\n' +
'2016,10,25.00293992,0.003666766\n' +
'2016,9,24.0096397,0.003762455\n' +
'2016,12,26.62725434,0.004162499\n' +
'2016,13,27.3528324,0.00430229\n' +
'2016,11,25.76408298,0.004302817\n' +
'2016,14,28.17373116,0.004405307\n' +
'2016,15,29.05679359,0.004495961\n' +
'2016,16,29.93744756,0.004766551\n' +
'2016,17,30.59293397,0.004801197\n' +
'2016,18,31.20220578,0.004892761\n' +
'2016,19,31.63021913,0.00495556\n' +
'2016,20,32.32867948,0.005069283\n' +
'2016,21,33.06058859,0.005186136\n' +
'2016,22,33.67194926,0.005241962\n' +
'2016,23,34.30940692,0.005419199\n' +
'2016,24,34.84748724,0.005423279\n' +
'2016,25,35.29368138,0.005502028\n' +
'2016,27,36.74800232,0.005605163\n' +
'2016,26,35.97401424,0.005691627\n' +
'2016,29,38.19577669,0.005925406\n' +
'2016,28,37.45386648,0.006052079\n' +
'2016,30,38.83223624,0.006153488\n' +
'2016,31,39.40745425,0.006166312\n' +
'2016,32,40.10945618,0.006278238\n' +
'2016,33,40.78564161,0.006367587\n' +
'2016,35,41.63865286,0.006526088\n' +
'2016,34,41.39825541,0.006538671\n' +
'2016,36,42.02093891,0.006569307\n' +
'2016,37,42.62393647,0.006699819\n' +
'2016,38,43.26897405,0.006773034\n' +
'2016,39,43.95228489,0.006872902\n' +
'2016,40,44.61490953,0.007022959\n' +
'2016,41,45.37646989,0.007088749\n' +
'2016,42,45.97395005,0.007232068\n' +
'2016,43,46.65105029,0.007290975\n' +
'2016,46,48.73932332,0.007300295\n' +
'2016,44,47.42866471,0.007458578\n' +
'2016,45,48.02211222,0.007513438\n' +
'2016,48,50.01934665,0.007831224\n' +
'2016,49,50.72917496,0.007959869\n' +
'2016,50,51.46537181,0.008071582\n' +
'2016,47,49.36311865,0.008099774\n' +
'2016,51,52.29708356,0.008170414\n' +
'2016,52,53.21992628,0.008297732\n' +
'2016,53,53.94076603,0.008481017\n' +
'2016,54,54.73058001,0.008643675\n' +
'2016,55,55.66432548,0.008725626\n' +
'2016,56,56.71593196,0.008889835\n' +
'2016,58,58.50555862,0.009011461\n' +
'2016,57,57.57195448,0.009021138\n' +
'2016,59,59.45792769,0.009451049\n' +
'2016,60,60.62677419,0.009512204\n' +
'2016,61,61.80787097,0.009620924\n' +
'2016,63,63.43629548,0.009820255\n' +
'2016,62,62.54525396,0.009896081\n' +
'2016,64,64.60173999,0.010270281\n' +
'2016,65,65.60493276,0.010276948\n' +
'2016,66,66.72095274,0.010468074\n' +
'2016,67,67.93312637,0.010622405\n' +
'2016,68,69.29769991,0.010813991\n' +
'2016,69,70.61850675,0.011145732\n' +
'2016,70,71.88259924,0.01127333\n' +
'2016,71,73.1759581,0.011361353\n' +
'2016,73,75.68829689,0.011694438\n' +
'2016,72,74.49065685,0.01179722\n' +
'2016,74,76.93036571,0.012007578\n' +
'2016,77,81.22701085,0.012240199\n' +
'2016,75,78.2816762,0.012464801\n' +
'2016,76,79.70407585,0.012522958\n' +
'2016,79,84.38656413,0.012934814\n' +
'2016,78,82.90435259,0.013208984\n' +
'2016,81,88.14204825,0.013654787\n' +
'2016,80,85.99034668,0.014054405\n' +
'2016,82,89.83042069,0.014108856\n' +
'2016,83,91.3544176,0.014365632\n' +
'2016,84,93.16756247,0.014753267\n' +
'2016,85,95.15888443,0.014820436\n' +
'2016,86,97.77003411,0.015420118\n' +
'2016,87,100.7484106,0.015748813\n' +
'2016,88,103.3231109,0.016264921\n' +
'2016,89,106.4835939,0.016690661\n' +
'2016,90,109.9008807,0.017132083\n' +
'2016,91,113.327115,0.01787625\n' +
'2016,92,117.2869678,0.01826497\n' +
'2016,93,121.4394061,0.019009422\n' +
'2016,94,126.5037933,0.019946163\n' +
'2016,95,133.7253411,0.020994106\n' +
'2016,96,142.5918642,0.022307768\n' +
'2016,97,153.5144822,0.023903829\n' +
'2016,98,170.2017432,0.026910549\n' +
'2016,99,208.2369816,0.032649976\n' +
'2016,100,360.2167398,0.056578312\n' +
'2018,1,2.595366313,3.95E-04\n' +
'2018,2,9.823911429,0.001540855\n' +
'2018,3,14.02903825,0.002175663\n' +
'2018,4,16.20475069,0.00250699\n' +
'2018,5,18.10915852,0.002798445\n' +
'2018,6,19.9508763,0.003068916\n' +
'2018,7,21.28037443,0.003195158\n' +
'2018,8,22.46745331,0.003566674\n' +
'2018,9,23.58626711,0.003666627\n' +
'2018,10,24.56020059,0.00371711\n' +
'2018,11,25.42979959,0.004015785\n' +
'2018,12,26.33331407,0.004093118\n' +
'2018,13,27.40014618,0.004243794\n' +
'2018,14,28.52270694,0.004393375\n' +
'2018,15,29.52728239,0.004571767\n' +
'2018,16,30.26886102,0.004657272\n' +
'2018,17,31.05298971,0.004865824\n' +
'2018,18,31.98053166,0.004964377\n' +
'2018,20,33.22802717,0.00503854\n' +
'2018,19,32.66549084,0.005051914\n' +
'2018,21,33.63693313,0.005208151\n' +
'2018,25,36.01406074,0.005317198\n' +
'2018,22,34.17025041,0.005357988\n' +
'2018,23,34.82676969,0.00542482\n' +
'2018,24,35.36869964,0.005481393\n' +
'2018,27,37.20731631,0.005655879\n' +
'2018,33,40.87633985,0.005827474\n' +
'2018,26,36.50531459,0.005907469\n' +
'2018,28,37.85771532,0.005966155\n' +
'2018,29,38.61389827,0.00597805\n' +
'2018,30,39.23941491,0.006050637\n' +
'2018,31,39.93717676,0.006195243\n' +
'2018,32,40.47103984,0.006251838\n' +
'2018,36,42.40615011,0.006434481\n' +
'2018,35,41.79732628,0.006571216\n' +
'2018,39,44.29336043,0.006636372\n' +
'2018,38,43.63415757,0.006779719\n' +
'2018,37,43.06505422,0.00678214\n' +
'2018,34,41.19537868,0.006785617\n' +
'2018,41,45.31986066,0.006989558\n' +
'2018,40,44.78770392,0.007085128\n' +
'2018,42,45.98918996,0.007211575\n' +
'2018,43,46.75184156,0.007221388\n' +
'2018,44,47.49359156,0.007336236\n' +
'2018,45,48.33259569,0.007517106\n' +
'2018,46,49.07601632,0.007534337\n' +
'2018,47,49.90985642,0.007748932\n' +
'2018,48,50.82979576,0.007873654\n' +
'2018,49,51.65939593,0.007970316\n' +
'2018,50,52.49251803,0.008042053\n' +
'2018,52,53.87597193,0.008324013\n' +
'2018,51,53.27500401,0.008349236\n' +
'2018,53,54.62220616,0.008350397\n' +
'2018,54,55.47221646,0.008394207\n' +
'2018,55,56.23253556,0.008910815\n' +
'2018,56,57.24371642,0.008936035\n' +
'2018,58,59.10520774,0.008996649\n' +
'2018,57,58.16688376,0.009049385\n' +
'2018,60,60.91533476,0.009310841\n' +
'2018,59,59.90437715,0.009441931\n' +
'2018,61,61.75432927,0.009518217\n' +
'2018,62,62.61595691,0.009826817\n' +
'2018,63,63.64261438,0.009890097\n' +
'2018,64,64.68995889,0.01000389\n' +
'2018,65,65.87401702,0.010148557\n' +
'2018,68,68.91650916,0.0103611\n' +
'2018,66,66.8617044,0.010409445\n' +
'2018,67,67.79991077,0.010475027\n' +
'2018,70,70.96026521,0.010882762\n' +
'2018,69,70.000275,0.011094225\n' +
'2018,71,72.26105558,0.011189831\n' +
'2018,72,73.60416061,0.011515003\n' +
'2018,73,74.84108522,0.011616578\n' +
'2018,74,76.30553539,0.011778189\n' +
'2018,75,77.63277599,0.011960288\n' +
'2018,76,78.97379055,0.012308445\n' +
'2018,77,80.61337965,0.012447268\n' +
'2018,78,82.35020384,0.012784779\n' +
'2018,79,83.8521037,0.012905229\n' +
'2018,80,85.3092945,0.013206379\n' +
'2018,81,86.82983593,0.013417528\n' +
'2018,82,88.95395683,0.013731487\n' +
'2018,83,90.96324283,0.014032905\n' +
'2018,84,93.16888148,0.01456131\n';
var margin = {top: 100, right: 30, bottom: 80, left: 80}
var svg = d3.select("svg")
var width = parseInt(svg.attr('width'));
svg.attr("width", width + margin.left + margin.right);
var height = parseInt(svg.attr("height"));
svg.attr('height', height + margin.top + margin.bottom);
var g = svg.append("g")
var data = d3.csvParse(wealthdataBY);
data.forEach(function (d) {
d.year = +d.year
d.percentile = +d.percentile
d.avg_welfare = +d.avg_welfare
d.welfare_share = +d.welfare_share
})
var years = [...new Set(data.map(function (d) {
return d.year;
}))];
var xScaleYears = d3.scaleBand()
.domain(years)
.range([margin.left, width])
.padding(0.0);
var percentiles = [...new Set(data.map(function (d) {
return d.percentile;
}))].sort(function (left, right) {
return left - right;
});
const xSegmentWidth = (width - margin.left) / 3;
var xScalePercentile = d3.scaleBand()
.domain(percentiles)
.range([0, xSegmentWidth])
.padding(0.0);
var yScaleAverageWelfare = d3.scaleLinear()
.domain([0, d3.max(data, function (d) {
return d.avg_welfare
})])
.range([margin.top + 0 * height / 3, margin.top + 1 * height / 3]);
var yScaleWelfareShare = d3.scaleLinear()
.domain([0, d3.max(data, function (d) {
return d.welfare_share
})])
.range([margin.top + 2 * height / 3, margin.top + 3 * height / 3]);
g.append("g")
.attr("transform", "translate(0, " + (height + margin.top + 0) + ")")
.call(d3.axisBottom(xScaleYears));
var percentileAxisTickValues = percentiles.filter(function (percentile) {
return percentile % 20 == 0
});
var percentileAxis = d3.axisBottom(xScalePercentile)
.tickValues(percentileAxisTickValues);
var groupWithPercentileAxes = g.append('g').attr('class', 'percentile-axes');
groupWithPercentileAxes.selectAll('g.percentile-axis')
.data(xScaleYears.domain())
.enter()
.append('g')
.attr('class', 'percentile-axes')
.attr('transform', function (year) {
var yearStartX = xScaleYears(year);
var percentilAxisYPosition = height + margin.top + 20
return 'translate(' + yearStartX + ' ' + percentilAxisYPosition + ')';
})
.call(percentileAxis);
g.append("g")
.attr('transform', 'translate(' + margin.left + ' 0)')
.call(d3.axisLeft(yScaleAverageWelfare))
g.append("g")
.attr('transform', 'translate(' + margin.left + ' 0)')
.call(d3.axisLeft(yScaleWelfareShare));
var dotGroup = g.append('g')
.attr('class', 'dot-group');
dotGroup.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScaleYears(d.year) + xScalePercentile(d.percentile);
})
.attr("cy", function (d) {
return yScaleAverageWelfare(d.avg_welfare);
})
.attr("r", 5)
.style("fill", "green")
dotGroup.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScaleYears(d.year) + xScalePercentile(d.percentile);
})
.attr("cy", function (d) {
return yScaleWelfareShare(d.welfare_share);
})
.attr("r", 5)
.style("fill", "blue")
svg.append("text")
.attr("transform", "translate(250,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "20px")
.attr("text-anchor", "middle")
.text("Distribution of wealth from 2014-2018");
g.append("g")
.attr("transform", "translate(0, " + (height + margin.top) + ")")
.append("text")
.attr("y", 10)
.attr("x", width + 10)
.attr("text-anchor", "beginning")
.attr("stroke", "black")
.text("Year");
g.append("g")
.attr("transform", "translate(0, " + (height + margin.top + 20) + ")")
.append("text")
.attr("y", 10)
.attr("x", width + 10)
.attr("text-anchor", "beginning")
.attr("stroke", "black")
.text("Percentile");
g.append("g")
.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 0 * height / 3) + ')')
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 30)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Average Wealth");
g.append("g")
.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 1 * height / 3) + ')')
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 30)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Share of Wealth");
</script>
</body>
</html>
