Utilizing D3.js v4 to showcase a JSON file on a map

Question

Utilizing D3.js v4 to showcase a JSON file on a map

I am attempting to create a map similar to the one created by Mike Bostock.

You can access my JSON file (here), which represents Europe divided into NUTS 2 regions. The structure of the JSON file is as follows:

{
    "type": "Topology",
    "objects":
    {
        "nuts2":
        {
            "type": "GeometryCollection",
            "bbox": [-63.15345500000001, -21.387309500000015, 55.83662850000002, 71.18531800099998],
            "geometries": [
            {
                "type": "Polygon",
                "properties":
                {
                    "nuts_id": "AT11",
                    "name": "Burgenland (AT)",
                    "population": 286691
                },
                "id": "AT11",
                "arcs": [
                    [0, 1, 2, 3, 4]
                ]
            },
            ...

...

To display the European map colored with the Italian vaccination coverage data from the CSV file using radio buttons for antigen selection.

Upon testing two solutions in creating the map, I encountered issues. The first solution didn't display anything while the second had trouble locating the path for the CSV file.

Here are snippets of code from my attempts:

// First Solution (map.js)
// Code runs but doesn't display the map

// Second Solution (map.js)
var width = 700;
var height = 600;

...

...

If anyone can assist me in resolving these issues, I would greatly appreciate it.

javascript json csv d3.js choropleth

Answer 1

Answer №1

When dealing with a BIG JSON file, do we need to extract only the information related to Italy or include all EU data? Let's proceed by running with the full JSON and breaking down the steps from simple to difficult.

#index.html

Add the following code snippet to the top of your HTML document: <!DOCTYPE html>
Correct the script source path as follows:

<script src="https://d3js.org/topojson.v2.min.js"></script>

#map.js (in JavaScript section)

Steps one and two:

var width = 700;
var height = 600;

var svg = d3.select("#container-map").append("svg")
  .attr("width", width)
  .attr("height", height);

// more code here...

Step three and four:

Now that you've worked successfully with the JSON data, let's move on to handling CSV files (specifically coverage data for Italy). The process involves working with different delimiters such as ",", ";", etc. Finally, we'll delve into integrating a database (CSV) for enhanced data management.

Step five:

In this step, we'll focus on color filling the map for a specific region in Italy - Piemonte. Emphasis will be given on parsing data from the CSV embedded within an HTML element.

Update 1 (2020):

An original CSV file 'Coverage Italy 24 months.csv' was deleted causing a halt in operations. However, efforts are now being made to implement color filling specifically for the Piemonte region.

(Data from CSV stored inside an HTML <pre> tag)

<pre id="data-IT">
ID;NUTS2-ID;NUTS2-NAME;YEAR;ANTIGEN;COVERAGE-PERC
1;IT;Italy;2000;POL;96,6
...
</pre>

For access to DB(CSV) utilizing D3:

var data = d3.dsvFormat(delimiter).parse(d3.select("pre#data-IT").text());

Visit the provided link for further details and test out the Beta version. Wishing you a HAPPY NEW YEAR!

https://i.sstatic.net/qnotD.png PS: Explore this example further on JSFiddle

Answer 2

When dealing with a BIG JSON file, do we need to extract only the information related to Italy or include all EU data? Let's proceed by running with the full JSON and breaking down the steps from simple to difficult.

#index.html

Add the following code snippet to the top of your HTML document: <!DOCTYPE html>
Correct the script source path as follows:

<script src="https://d3js.org/topojson.v2.min.js"></script>

#map.js (in JavaScript section)

Steps one and two:

var width = 700;
var height = 600;

var svg = d3.select("#container-map").append("svg")
  .attr("width", width)
  .attr("height", height);

// more code here...

Step three and four:

Now that you've worked successfully with the JSON data, let's move on to handling CSV files (specifically coverage data for Italy). The process involves working with different delimiters such as ",", ";", etc. Finally, we'll delve into integrating a database (CSV) for enhanced data management.

Step five:

In this step, we'll focus on color filling the map for a specific region in Italy - Piemonte. Emphasis will be given on parsing data from the CSV embedded within an HTML element.

Update 1 (2020):

An original CSV file 'Coverage Italy 24 months.csv' was deleted causing a halt in operations. However, efforts are now being made to implement color filling specifically for the Piemonte region.

(Data from CSV stored inside an HTML <pre> tag)

<pre id="data-IT">
ID;NUTS2-ID;NUTS2-NAME;YEAR;ANTIGEN;COVERAGE-PERC
1;IT;Italy;2000;POL;96,6
...
</pre>

For access to DB(CSV) utilizing D3:

var data = d3.dsvFormat(delimiter).parse(d3.select("pre#data-IT").text());

Visit the provided link for further details and test out the Beta version. Wishing you a HAPPY NEW YEAR!

https://i.sstatic.net/qnotD.png PS: Explore this example further on JSFiddle

Utilizing D3.js v4 to showcase a JSON file on a map

Answer №1

Update 1 (2020):

Similar questions

ReferenceError: _jquery2.default.ajax is not a function" encountered in a React Native application

Content OverFlow: DropDown Menu is not overlapping the content, but rather pushing it downwards

Managing the versions of ViewState and serialized objectsIs this what you

Using an array in jade rendering

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

Ways to transmit the appropriate model

The CSS stylesheet is not being applied to the components in Next.js

JavaScript not functioning properly with HTML loaded via .load()

Using JSON in Highcharts: Customizing Border and Label Colors

Move the option from one box to another in jQuery and retain its value

Splitting a string in Typescript based on regex group that identifies digits from the end

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

Selenium WebDriver keeps crashing with a newSession error after around 70 seconds of running

Discovering ways to optimize argument type declarations in TypeScript

Tips for concealing the bar graph while maintaining the visibility of the data labels in HighCharts

The render props on the child component are not appearing on the screen as expected

Limit the selected values to calculate a partial sum

The issue of Rails 4 serving JavaScript as plain text instead of executing it when attempting to utilize AJAX

Mapping dynamic JSON in JAX-RS: A comprehensive guide

Information that is not included in the Linq query's join will not be present in the resulting JSON output. Only data that is connected in both classes will be displayed