Bar chart using D3

Line chart using D3

Assignment description

URLs of examples that I used in completing the assignment:


Getting started with D3:

  1. 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.
  2. Now, I take the two seperate SVG id's for both charts in which I defined the width and height.
  3. 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.
  4. For the axes X and Y I defined the scale and afterward appended both the axis to the SVG and applied the transform.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.

By considering "joins",we can make our code more declarative. We are able to deal with multiple states without any branching like if or for.