cnu1812 / datavisd3-1

Data Visualisation using D3

Data story using the provided dataset

In this story we will have having

• Chapter1: The Rule of European Unis
• Chapter2: The Rise of Asian Unis
• Comparing facts: Asian Unis x European Unis
• Future Aim: Conquering the top 10
• Conclusion: The future?

Everywhere in our story Unis refers to Universities.

The entire story you'll find on the site!

Thought process behind the data story

• At the very first glance of the datasets we observerd the rise of Asian Universites.
• So, we decided to go with this story
• We don't have any bias, we have gone with the flow

Algorithms / libraries used to generate the visualization

• Data Visualisation using D3
• D3 Bubble Map
• echarts

This code generates a D3 bubble map that displays the number of universities in each country for a given year. The map uses data from two JSON files: world.geojson and all_years_data.json.

Getting Started

To use this code, you will need to include the D3 library in your project. You can do this by adding the following script tag to your HTML file:

<script src="https://d3js.org/d3.v4.min.js"></script>

You will also need to include the world.geojson and all_years_data.json files in your project. These files contain the geographic and university data used to generate the map.

SettingUp

To generate the map, simply open the HTML file in your browser. The map will be displayed in the #map-elements div. The map will display data for all years contained in the all_years_data.json file.

You can modify the map by changing the data in the all_years_data.json file, or by modifying the code to display different data. You can also modify the map styling by modifying the CSS in the HTML file.

The code has already included a CSS style that sets the font-family for all elements to 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif and adds a white background, padding of 5px, 70% opacity, and font size of 24px to any element with the title class.

If you are not able to see world map or get this error while setting up the project, please open the html file on localhost