0

i am making a bar graph code is working fine when I run this code on a local server but when I run this code directly in a browser without local server then the output is nothing how can i solve the problem i want to run this code directly in a browser without server

Bar graph

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>Bar Graph</title>
  <meta charset="utf-8">

  <style>
      body {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          position: relative;
          width: 960px;
      }

      .axis text {
          font: 10px sans-serif;
      }

      .axis path,
      .axis line {
          fill: none;
          stroke: #fa8787;
          shape-rendering: crispEdges;
      }

      .bar {
          fill: blue;
          fill-opacity: 15;
      }

      .x.axis path {
          display: none;
      }

      label {
          position: absolute;
          top: 10px;
          right: 10px;
      }

  </style>

</head>
<body>
    <label><input type="checkbox"> Sort values</label>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    <script type="text/javascript">

      var barMargin = {top: 20, right: 20, bottom: 30, left: 40},
          width = 960 - barMargin.left - barMargin.right,
          height = 500 - barMargin.top - barMargin.bottom;

      var formatPercent = d3.format("0");

      var x = d3.scale.ordinal()
          .rangeRoundBands([0, width], .1, .1);

      var y = d3.scale.linear()
          .range([height, 0]);

      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");

      var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left")
          .tickFormat(formatPercent);

      var svg = d3.select("body").append("svg")
          .attr("width", width + barMargin.left + barMargin.right)
          .attr("height", height + barMargin.top + barMargin.bottom)
        .append("g")
          .attr("transform", "translate(" + barMargin.left + "," + barMargin.top + ")");

      d3.csv("http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a4/occupations.csv", function (error, data) {

        data.forEach(function(d) {
          d.jobs_1000 = +d.jobs_1000;
        });

        x.domain(data.map(function(d) { return d.area_title; }));
        y.domain([0, d3.max(data, function(d) { return d.jobs_1000; })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "translate(-30," + (height / 2) + ") rotate(-90)")
            .attr("y", 2)
            
            .style("text-anchor", "end")
            .text("jobs Per 1000");

        svg.selectAll(".bar")
            .data(data)
          .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.area_title); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.jobs_1000); })
            .attr("height", function(d) { return height - y(d.jobs_1000); });

        d3.select("input").on("updateBars", updateBars);

        var sortTimeout = setTimeout(function() {
          d3.select("input").property("checked", true).each(updateBars);
        }, 2000);

        function updateBars() {
          clearTimeout(sortTimeout);

          // Copy-on-write since tweens are evaluated after a delay.
          var x0 = x.domain(data.sort(this.checked
              ? function(a, b) { return b.jobs_1000 - a.jobs_1000; }
              : function(a, b) { return d3.ascending(a.area_title, b.area_title); })
              .map(function(d) { return d.area_title; }))
              .copy();

          svg.selectAll(".bar")
              .sort(function(a, b) { return x0(a.area_title) - x0(b.area_title); });

          var transition = svg.transition().duration(750),
              delay = function(d, i) { return i * 50; };

          transition.selectAll(".bar")
              .delay(delay)
              .attr("x", function(d) { return x0(d.area_title); });

          transition.select(".x.axis")
              .call(xAxis)
            .selectAll("g")
              .delay(delay);
        }
      });

    </script>
</body>
</html>
Shafiq.Rai
  • 1
  • 1
  • 4

0 Answers0