Create a narrative visualization of shopping malls using d3.js

Create a narrative visualisation through a drill down story structure that can be inserted on my webpage, currently hosted through wordpress. That is, the page will present an overview of my data and allow user to explore different storylines from there, such as, year, type of store formats, sales, locations. The page can also accept input from user as filters to narrow down to a subsample. When mouseover certain states, the page can return a summary of number of stores, formats. I will provide 7 years of shopping mall (U.S.) location data in .dbf format.

I suggest the following data visualisation structure.
1. First look provides an overview of the shopping mall distribution across the US using a US map as a consistent backdrop.

2. As you mouse over the states, the viewer can view the summary statistics such as the number of shopping malls and store formats.

3. Viewers can zoom into details at the year level, state level, city level and store format level using filters to trigger next scene.

4. Plots are provided as viewer click on them to show trends over time.

5. Annotations are provided in each scene reporting summary statistics.

6. Please feel free to also suggest possible scenes that highlight key information as you work on the data.



The visualisation should be built with some scenes, annotations, parameters, and triggers. Some guidelines provided below.

• The scenes should follow a template for visual consistency and follow an order to best convey the message. One way is to use d3.select(id).html = "" to clear the contents of a container element (e.g. an SVG element) and then repopulate that element using .append().

• The annotations should follow a template for visual consistency from scene to scene. These annotations should also
highlight and reinforce specific data items or trends that make the important points for the desired messaging of
the narrative visualization. The lessons on d3 popups can be helpful on how to to make and place annotations, but as
an annotation, they should appear as part of the scene and not have to wait for a mouseover event.

• The parameters are the state variables of your narrative visualization. Your narrative visualization should use these
parameters to control the construction of scenes. These parameters will be key variables in your JavaScript code, as
well as parameters to key functions used to set up each scene.

• The triggers connect user interface actions to changes in parameters that change the state of the narrative
visualization. These triggers can be event listeners (callback functions) that change parameter values and then
update the display to reflect the result of the event.

Feel free to reach out if you are interested to take this assignment. Turnaround within 2 days. Thanks.