To create a line chart in D3 I used the same data file of assignment V3 (as asked for the assignment V4) linechart.csv to plot the data.
Now, I take the two seperate SVG id's for both charts in which I defined the width and height.
To plot a chart first thing we need to create the X and Y axes. To do so, I declared a domain and range. Where domain refers to the values from minimum to maximum and range refers to the amount that the SVG will cover. I set the range for axes by considering the left and right margin.
For the axes X and Y I defined the scale and afterward appended both the axis to the SVG and applied the transform.
To apply the range of X and Y to transform them into the plotting space and to draw a line I used the d3.svg.line() to draw the line graph. Including this, I created a line generator function which returns the x and y coordinates from data to plot the line.
At the begining of the line chart code, for the line chart design I gave the parameters viz. stroke, stroke-width, fill. Where stroke is used for line color which I chose steel blue. Stroke-width is used todefine the width of line which is 2. For fill I gave the parameter "none" to make it visual on web page.
For the bar chart, I used the data barchart.csv similarly as V3 to track the donation amount in year 2010. I plotted the horizontal bar chart since the country list (Y axis) is longer than X axis.
I used the X, Y coordinates to set the height and width of the bar. Each bar contains a "g" element which has a rect and a text. I use a data join to create a g element for every data point.
In the steps of creating the bar chart, it includes the following steps like line charts, respectively-
setting the chart scale, loading the data followed by sorting it, set the domain based on data. Later, appending the X axis to svg
and append Y axis to svg followed by apeending rects to svg based on our data. At last, I defined the chart title to svg as "Donation by the United States in year 2010". After that
appending source data to svg.
Comparative analysis of D3 and Vega-Lite for Bar and Line chart creation:
D3 is useful to visualize data using HTML, SVG, and CSS. On the other hand, Vega-Lite also provides the solutions regarding information visualization. While using both for the assignment V3 and V4 using same data sets. I find D3 better in terms of visualization. Though, cding part in D3 feels tedious than Vega-Lite. D3 has much more options to manipulate data. On the other hand, Vega-Lite is easy to generate charts but for the visualization of complex and multiple data sets, D3 is better than Vega-Lite.
Helpful tutorial links to understand concepts:
These are the folowing links that I used to understand the concept of d3.js's v3 and v4 concepts and differences along with the joins concept to make a bar and line chart.