DEVHIDE
Login Or Sign up

Adding Bar Chart to datamaps using D3.JS

229 Views Asked by At

I am trying to add Bar chart to Datamaps but I don't know how to insert it to the popupTemplate function. Here is what I have tried in index.html and style.css. Currently, when I press ABC button and hover the mouse over Alaska, this is what I see.

Current Datamaps Output:

Current Datamaps Output

Essentially what I want to see is the following when I hover my mouse over Alaska where cases Started and Errors are coming from GHI and JKL JSONs in the code.

If there are other better approaches, please feel free to suggest.

Desired Datamaps Output:

Desired Datamaps Output

<!DOCTYPE HTML>
<html>
<head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
      <script src='datamaps.all.min.js'></script>
      <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> -->
      <!-- Reference style.css -->
    <link rel = "stylesheet" type="text/css" href="style.css">
</head>

<body>
<button id="ABC" onclick='updateCost(ABC)'>ABC</button>
<button id="DEF" onclick='updateCost(DEF)'>DEF</button>
<div id="container" style="position: relative; width: 1300px; height: 700px;">
</div>

<!-- <script type="text/javascript" src="barchart.js"></script> -->

<script>
var dataArray = [23, 13, 21, 14];
var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");


var election = new Datamap({

  scope: 'usa',

  element: document.getElementById('container'),

  geographyConfig: {
    highlightBorderColor: '#bada55',
   popupTemplate: function(geography, data) {
     //display bar graph
    //  let bar = displayBarGraph()
     return '<div class="hoverinfo">' + geography.properties.name + ': Cases:' +  data.Cases + ' '
      // '<table class="table-example" style="width:300px"><tr><td><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jan 07</font></div></td><td><div style="background-color:blue; width: 50 ";/><p> HorX</p></td></tr><tr><td><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jan 07</font></div></td><td><div style="background-color:red; width: 25 ";/><p> Hor2X</p></td></tr></table>'+'</div>'
     
      
    },
    highlightBorderWidth: 3
  },

  fills: {
  'light': '#ffad99',
            'medium': '#0080FF',
            'heavy': '#ff3300',
            defaultFill: '#ffebe6'
  },

  data:{}

  }); //end new Datamap

  /* function displayBarGraph()
  {
  
    return  '<table id="tblgraph" style="background-color:#C0C0C0;" align="center" width="540" cellpadding="1" cellspacing="0" border="1"><tbody><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jan 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:475;"><p style="position:relative; left:476"><font face="arial" size="-2">&nbsp;476</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Feb 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:26;"><p style="position:relative; left:27"><font face="arial" size="-2">&nbsp;27</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Mar 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:171;"><p style="position:relative; left:172"><font face="arial" size="-2">&nbsp;172</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Apr 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:338;"><p style="position:relative; left:339"><font face="arial" size="-2">&nbsp;339</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">May 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:410;"><p style="position:relative; left:411"><font face="arial" size="-2">&nbsp;411</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jun 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:263;"><p style="position:relative; left:264"><font face="arial" size="-2">&nbsp;264</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Jul 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:320;"><p style="position:relative; left:321"><font face="arial" size="-2">&nbsp;321</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Aug 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:83;"><p style="position:relative; left:84"><font face="arial" size="-2">&nbsp;84</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Sep 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:136;"><p style="position:relative; left:137"><font face="arial" size="-2">&nbsp;137</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Oct 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:466;"><p style="position:relative; left:467"><font face="arial" size="-2">&nbsp;467</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Nov 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:175;"><p style="position:relative; left:176"><font face="arial" size="-2">&nbsp;176</font></p></div></td></tr><tr style="width:100%"><td align="right"><div style="background-color:#C0C0C0; width:40; height:3;"><font face="arial" size="-2">Dec 07</font></div></td><td align="left" width="500" height="3" colspan="5"><div style="background-color:blue; width:10;"><p style="position:relative; left:11"><font face="arial" size="-2">&nbsp;11</font></p></div></td></tr><tr bgcolor="#C0C0C0"><td align="right"><div><font face="arial" size="-2">&nbsp;</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">100</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">200</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">300</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">400</font></div></td><td align="right"><div style="background-color:#C0C0C0; width:96; height:3;"><font face="arial" size="-2">500</font></div></td></tr></tbody></table>'
   */  // var chartHeight = 150, chartWidth = 200,
    //         // x = d3.time.scale().domain(d3.extent(locationSpendData, function(d) { return d.month; }))
    //         //                    .range([0, chartWidth]),
    //         // y = d3.scale.linear().domain([0, d3.max(locationSpendData, function(d) { return d.TotalSpend; })])
    //         //                      .range([chartHeight, 0]);

    //     chart = d3.select("svg#spendChart").attr("height", chartHeight)
    //                                        .attr("width", chartWidth);

    //     chart.selectAll("rect.bar")
    //          .data(dataArray)
    //        .enter().append("rect")
    //          .attr("class", "bar")
    //          .attr("x", "10")
    //          .attr("y", "5")
    //          .attr("width", "50")
    //          .attr("height", "50");

        // Select, append to SVG, and add attributes to rectangles for bar chart
//        svg.selectAll("rect")
//           .data(dataArray)
//           .enter().append("rect")
//           .attr("class", "bar")
//           .attr("height", function(d, i) {return (d * 10)})
//           .attr("width","40")
//           .attr("x", function(d, i) {return (i * 60) + 1400})
//           .attr("y", function(d, i) {return 400 - (d * 10)});

// // Select, append to SVG, and add attributes to text
//       svg.selectAll("text")
//           .data(dataArray)
//           .enter().append("text")
//           .text(function(d) {return d})
//            .attr("class", "text")
//            .attr("x", function(d, i) {return (i * 60) + 1400})
//            .attr("y", function(d, i) {return 415 - (d * 10)});

  
    


      // var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      // var yValues = [55, 49, 44, 24, 15];
      // var barColors = ["red", "green","blue","orange","brown"];

      // new Chart("myChart", {
      //   type: "bar",
      //   data: {
      //     labels: xValues,
      //     datasets: [{
      //       backgroundColor: barColors,
      //       data: yValues
      //     }]
      //   },
      //   options: {
      //     legend: {display: false},
      //     title: {
      //       display: true,
      //       text: "World Wine Production 2018"
      //     }
      //   }
      // });
/* } */


  election.labels();


   var ABC = {
        'AK':{'fillKey':'medium','Cases':'634'},
        'AZ':{'fillKey':'medium','Cases':'3'},
        'DC':{'fillKey':'medium','Cases':'32'},
        'FL':{'fillKey':'medium','Cases':'4'},
        'HI':{'fillKey':'medium','Cases':'56'},
        'IN':{'fillKey':'medium','Cases':'65'},
        'IA':{'fillKey':'medium','Cases':'34'},
        'LA':{'fillKey':'medium','Cases':'23'},
        'ME':{'fillKey':'medium','Cases':'23'},
        'MS':{'fillKey':'medium','Cases':'45'},
        'MT':{'fillKey':'medium','Cases':'26'},
        'NV':{'fillKey':'medium','Cases':'51'},
        'NY':{'fillKey':'medium','Cases':'99'},
        'OR':{'fillKey':'medium','Cases':'121'},
        'SD':{'fillKey':'medium','Cases':'122'},
        'TX':{'fillKey':'medium','Cases':'121'},
        'WA':{'fillKey':'medium','Cases':'99'}
    };

    var DEF = {
        'AK':{'fillKey':'heavy','Cases':'168'},
        'AZ':{'fillKey':'heavy','Cases':'2'},
        'DC':{'fillKey':'heavy','Cases':'82'},
        'FL':{'fillKey':'heavy','Cases':'20'},
        'HI':{'fillKey':'heavy','Cases':'44'},
        'IN':{'fillKey':'heavy','Cases':'90'},
        'IA':{'fillKey':'heavy','Cases':'62'},
        'LA':{'fillKey':'heavy','Cases':'27'},
        'ME':{'fillKey':'heavy','Cases':'78'},
        'MS':{'fillKey':'heavy','Cases':'33'},
        'MT':{'fillKey':'heavy','Cases':'5'},
        'NV':{'fillKey':'heavy','Cases':'55'},
        'NY':{'fillKey':'heavy','Cases':'22'},
        'OR':{'fillKey':'heavy','Cases':'33'},
        'SD':{'fillKey':'heavy','Cases':'54'},
        'TX':{'fillKey':'heavy','Cases':'69'},
        'WA':{'fillKey':'heavy','Cases':'59'}
      };

   var GHI = {
        'AK':{'fillKey':'heavy','Cases':'22'},
        'AZ':{'fillKey':'heavy','Cases':'2'},
        'DC':{'fillKey':'heavy','Cases':'82'},
        'FL':{'fillKey':'heavy','Cases':'20'},
        'HI':{'fillKey':'heavy','Cases':'44'},
        'IN':{'fillKey':'heavy','Cases':'90'},
        'IA':{'fillKey':'heavy','Cases':'62'},
        'LA':{'fillKey':'heavy','Cases':'27'},
        'ME':{'fillKey':'heavy','Cases':'78'},
        'MS':{'fillKey':'heavy','Cases':'33'},
        'MT':{'fillKey':'heavy','Cases':'5'},
        'NV':{'fillKey':'heavy','Cases':'55'},
        'NY':{'fillKey':'heavy','Cases':'22'},
        'OR':{'fillKey':'heavy','Cases':'33'},
        'SD':{'fillKey':'heavy','Cases':'54'},
        'TX':{'fillKey':'heavy','Cases':'69'},
        'WA':{'fillKey':'heavy','Cases':'59'}
      };

       var JKL = {
        'AK':{'fillKey':'heavy','Cases':'33'},
        'AZ':{'fillKey':'heavy','Cases':'2'},
        'DC':{'fillKey':'heavy','Cases':'82'},
        'FL':{'fillKey':'heavy','Cases':'20'},
        'HI':{'fillKey':'heavy','Cases':'44'},
        'IN':{'fillKey':'heavy','Cases':'90'},
        'IA':{'fillKey':'heavy','Cases':'62'},
        'LA':{'fillKey':'heavy','Cases':'27'},
        'ME':{'fillKey':'heavy','Cases':'78'},
        'MS':{'fillKey':'heavy','Cases':'33'},
        'MT':{'fillKey':'heavy','Cases':'5'},
        'NV':{'fillKey':'heavy','Cases':'55'},
        'NY':{'fillKey':'heavy','Cases':'22'},
        'OR':{'fillKey':'heavy','Cases':'33'},
        'SD':{'fillKey':'heavy','Cases':'54'},
        'TX':{'fillKey':'heavy','Cases':'69'},
        'WA':{'fillKey':'heavy','Cases':'59'}
      };




  function updateCost(arg) {
    election.updateChoropleth(null, {reset: true});
    election.updateChoropleth(arg);
  }


</script>

</body>
</html>

style.css

html, body {
    margin: 0;
    height: 100%
  }
  
  /*Rectangle bar class styling*/
  
  .bar {
    fill: #0080FF
  }
  
  .bar:hover {
    fill: #003366
  }
  
  /*Text class styling*/
  
  .text {
    fill: white;
    font-family: sans-serif
  }

Jsfiddle

javascript html css d3.js datamaps
Original Q&A
0

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in D3.JS

Related Questions in DATAMAPS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.