Interactive maps using d3?
I’m a freshman interaction design student in a Web Development I class. I have a pretty strong understanding of HTML& CSS already, but I have never used JavaScript. My professor asked me to lead a special web design project that will involve creating interactive maps to render economic related data.
Here are some requirements for the project:
• The local map (comprised of 2 counties) will include a visualization of: foreign direct investments per county (per year), exports by industry per county (per year)
• The world map will 1 map will provide a visualization of: export value to foriegn nations, import value from foriegn nations, service export value to foriegn nations , (all per year)
• Each map will pull from a JSON database that will be compiled for me.
• As the user mouses over each county or country, a popover including the $ value should appear.
• I need create the SVG containers and properly position the data within the containers.
• I would like to add drop down or radio options for each map that will includethe ability to switch between the sets of data. such as: years, exports, foriegn direct investments, etc.
• I also believe I should create a drop down or some type of list allowing the user to choose the specific country or industry they wish to find without having to click on the map.
• I would like to color the areas of the map according to each value, for example: light blue for $100M - dark blue for $100B.
I have been reading about JQuery on W3 Schools, I have watched multiple YouTube videos on how to use D3, and I tried it myself using some examples on GitHub. I have not received the data yet, but I do want to understand what my limitations are before I start the design for the rest of the website, so I will be trying out a csv file from the census to start learning how to position the elements within the container.
My question is, does anyone have experience creating similar maps? I have read through other threads here, and it’s given me a better understanding. However, I still feel a little lost. Does anyone know of any resources I could use to learn more?
I know this question is a bit vague, so I understand if there isn’t much to say. But really, I am just relieved that there is a place for me to even ask it! So, thank you for your time!