d3js project

First, you will use D3 to create a column chart and then you will need to update the given code for rendering a scatter plot to use the circle size as an additional channel . For Task 3, you will explore additional data (attributes) and visualize them by using other chart types in D3. Task 1: Column Chart (40%) 1. You should start a local web server and create [login to view URL] . 2. Load the data file(maybe need preprocessing first), sort a properties according to its values and select the top 10. Set the bar chart (x and y dimensions). 3. Set the fill color of the bars to a shade of grey 4. Set the chart orientation to show vertical columns instead of horizontal bars. Make sure that the x-axis is at the bottom of the chart and the columns are not rendered upside down 5. You will need to combine the 2 files in your datasets by a common identifier. You can choose to merge the datasets in an external tool or load both with [login to view URL] use new properties (from the second data file) instead of the old one on the y-axis Hint: You can use [login to view URL] to load multiple CSV files in JavaScript [login to view URL]([ [login to view URL]("[login to view URL]"), [login to view URL]("[login to view URL]") ]).then(files => { // files[0] contains [login to view URL] // files[1] contains [login to view URL] }) 6. Add a chart title in HTML (SVG axis titles are optional). Task 2: Scatter Plot (20%) [login to view URL] create [login to view URL], you should generate a scatter plot of your dataset presenting one properties on the y-axis and other on the x-axis 2. Use the radius to encode a third dimension, in addition to the circle’s x and y position (e.g., between 2 and 10px depending on the data value). Task 3: Chart Types (40%) 1. Create the HTML document [login to view URL] contains a 2-column layout with empty SVG drawing areas that you will populate with two different D3 visualizations. 2. Pick two data files from the BB datasets：One that can be visualized as a scatter plot and a second one that can be visualized as a line or area [login to view URL] different dimensions and provide two perspectives on the data by showing 2 charts. 3. Create charts Scatterplot: You can copy the D3 code from task 2 and connect the scatter plot to the new data. Line or area chart: Implement the chart yourself or find an appropriate starter template on [login to view URL] or [login to view URL] Connect the chart to the chosen dataset. The two charts need to be displayed side by side 4. Tweak the charts in some substantive way. For example, a combination of smaller changes (e.g., colors, tick format) or one major change (e.g., show circle marks on top of the line). 5. Add descriptive chart titles and axis labels 6. Reflect about your design choices in [login to view URL] below the charts State the source of your datasets What is your rationale for the fit between your chosen data and the chart types? Have you used a base code? If yes, please provide the URL