Incorporate a data pop-up feature onto a d3js visualization map

Question

Incorporate a data pop-up feature onto a d3js visualization map

Utilizing Data-Driven Documents to combine JSON data with Google Maps. The JavaScript code places a circle and label at a specified station location. Check out this example.

Here is the relevant JavaScript file.

And here is the corresponding JSON file.

Included in the JSON data are pH levels and soil chemistry information for each station, like station 24:


  "24": {
    "latitude": 31.967240000000004,
    "longitude": -111.09028,
    "pH Buffer": 0.0,
    "pH": 7.53,
    "Aluminum": 25.28,
    "Antimonies": 0.32,
    "Arsenic ": 0.08,
    "Barium": 46.27,
    "Beryllium": 0.2,
    "Boron": 0.66,
    "Cadmium": 0.03,
<more>
    "Zinc": 0.15
  },

The JSON file will be updated to present chemistry data in quotes along with measurement symbols (mg/kg).

How can we modify the JavaScript to display chemical details on mouseover.

We aim to create an effect similar to what's done for US Congressional Districts and the New York Times.

Both examples have pop-up information displayed upon mouseover (NYT) or mouseclick (US Congressional Districts).

In the case of US Congressional Districts, the map and pop-up info are generated using GitHub services. Only a subset of the information from the GeoJSON file appears in the pop-up.

For instance:

"properties": {"startcong": "103", "district": "0", "statename": "Wyoming", "endcong": "112", "id": "056103112000"}

This is transformed into a pop-up table:

| startcong | 103             |
| district  | 0               |
| statename | Wyoming         |
| member    | [object Object] |
| endcong   | 112             |
| id        | 056103112000    |

We are interested in integrating a service comparable to GitHub's, but suitable for a standalone HTML + JS document.

javascript json d3.js

Answer 1

Answer №1

When it comes to customizing maps, Google Maps falls short in providing high flexibility. For example, both NYT and US Congressional Districts do not use Google Maps; instead, NYT utilizes a direct SVG file of the USA Albers map.

However, you can override Google Maps event handlers by disabling them. Simply add disableDoubleClickZoom: true to your map options.

var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(32.96, -111.090),
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDoubleClickZoom: true,
scrollwheel: false
});

Don't forget to change overlayLayer to overlayMouseTarget:

var layer = d3.select(this.getPanes().overlayMouseTarget).append("div")

To enhance the user experience, consider adding a tooltip to circles represented on the map using d3.tips:

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([+20, -20])
.html(function(d) {
console.log(d);
return "<span style='color:blue'>" + JSON.stringify(d.value) + "</span>";
})


// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("mouseover",tip.show)
.on("mouseout", tip.hide)
.call(tip);

Answer 2

When it comes to customizing maps, Google Maps falls short in providing high flexibility. For example, both NYT and US Congressional Districts do not use Google Maps; instead, NYT utilizes a direct SVG file of the USA Albers map.

However, you can override Google Maps event handlers by disabling them. Simply add disableDoubleClickZoom: true to your map options.

var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(32.96, -111.090),
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDoubleClickZoom: true,
scrollwheel: false
});

Don't forget to change overlayLayer to overlayMouseTarget:

var layer = d3.select(this.getPanes().overlayMouseTarget).append("div")

To enhance the user experience, consider adding a tooltip to circles represented on the map using d3.tips:

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([+20, -20])
.html(function(d) {
console.log(d);
return "<span style='color:blue'>" + JSON.stringify(d.value) + "</span>";
})


// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("mouseover",tip.show)
.on("mouseout", tip.hide)
.call(tip);

Incorporate a data pop-up feature onto a d3js visualization map

Answer №1

Similar questions

The Event of XMLHttpRequest State Transition Error

Employing jQuery tabs to reveal or conceal extra information

Guide on initiating a GET request to a Rails server using JavaScript

Is it possible to utilize the function(e) multiple times within a single file?

Is there a way to create a component that will vanish when hovered over using only CSS and HTML?

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

Secure your browsing experience with AngularJS authentication prompt

JQuery: Detecting the Arrival of New Messages

Selecting an option from a Javascript CSS drop-down menu functions successfully in the WebDriver IDE, but encounters issues when

The input value in the HTML form was altered momentarily before reverting back to its original state

Error: HTMLButtonElement on notes-taking website unable to read property 'push' of null

When implementing ReplaySubject in Angular for a PUT request, the issue of data loss arises

Steer clear of changing props directly in VueJS to prevent unintended

Hover shows no response

What is the best way to retrieve a value from a JSON object when there are duplicate

Adding row numbers to a table generated by a JQuery DataTable with server-side data source can be achieved by implementing a custom function

Gain entry to this specific data structure [{"id":"1","name":"2"},{...}]

What could be causing the values I push into the array to show up as undefined?

What is the method for determining the length of an array in nlohmann's JSON library?

Caching JSON Results in ASP .Net MVC 5