Skip to content

Latest commit

 

History

History
215 lines (173 loc) · 10.4 KB

README.md

File metadata and controls

215 lines (173 loc) · 10.4 KB
Raw

In-Class Programming — D3 Line Chart

~35 min total

This repository is your starting point for the assignment and includes the instructions below.

Link to your GitHub pages website: [insert your *clickable* hyperlink here]

Aim of the assignment

In this activity, you are going to create a line chart using D3, HTML, CSS, JavaScript, git, GitHub, and GitHub Pages to familiarize yourself with these technologies.

Instructions

Setup

Under no circumstances should you be editing files via the GitHub website user interface. Do all your edits locally after cloning the repository. Commit major versions to your git repository.

  1. Clone this repository to your local machine. E.g., in your terminal / command prompt CD to where you want this the folder for this activity to be. Then run git clone <YOUR_REPO_URL>

  2. CD or open a terminal / command prompt window into the cloned folder.

  3. Start a simple python webserver. E.g., python -m http.server, python3 -m http.server, or py -m http.server. If you are using python 2 you will need to use python -m SimpleHTTPServer instead, but please switch to python 3 as Python 2 was sunset on 2020-01-01.

  4. Wait for the output: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/).

  5. Now open your web browser (Firefox or Chrome) and navigate to the URL: http://localhost:8000

Update hyperlinks

  1. Edit near the top of this README.md file to include a clickable hyperlink to the GitHub pages website for your repo., replacing the `[insert your *clickable* hyperlink here]` code with your markdown. (Detailed instructions for GitHub pages here.)

JavaScript Loading

  1. Open index.html. Just below this HTML comment: 
    <!-- Load the d3.js library (version 6 minified) -->
    add this line to load the D3 javascript code (note the version number v6. D3 has many versions and they are not compatible.): 
    <script src='lib/d3.v6.1.1/d3.min.js'></script>
  2. You also have a file linechart.js. We want to load this javascript code as well. In index.html, just below this HTML comment: 
    <!-- Load the line.js file -->
    add this line: 
    <script src='linechart.js'></script>

Both of these should be at the end of the <body>.

Data Loading and Parsing

  1. Open the file data.csv with a text editor and see what is inside. It is comma-separated. You will see a header row followed by several data rows with a date in the MM/D/YYYY format, e.g., 10/6/2018, and a price, e.g., 33.9. Note that you can open CSV files with Excel or other clever tools but they can make mistakes with parsing the data into their own formats.

  2. In linechart.js we are going to load this CSV file. Add this line to use D3 to load the file and then pass it to a callback function inside then:

    d3.csv('data.csv').then(function(data) {
  console.log(data);
});

Once the data is loaded from the CSV file it is stored in the data variable. Your entire code for creating the line chart will go here inside the then function which happens after the data is asynchronously loaded.

  1. In your browser (Firefox or Chrome), open the browser developer tools by pressing CTRL+SHIFT+I (Windows/Linux) or Cmd+Opt+I and select the Console view. Here is where you see any output from console.log or any other console messages such as errors. The browser developer tools and the Console view are very useful for debugging. Here you can see the that your code logged an array of 50 objects to the console. If you see this, your data has loaded!

  2. However, if you interact with the object by clicking the triangles you will notice that the date and price are enclosed in double-quotes (") and are thus strings. This is not the format that we want our data to be in for us to interpret it properly. Hence we need to parse the data into the formats we want. To learn about date parsing visit this site: http://learnjsdata.com/time.html

  3. To parse our date data to the format we want, we are going to define a variable called parseDate before the step where we loaded our data:

    let parseDate = d3.timeParse('%m/%d/%Y');

Because our dates use forward slashes / as delimiters, our format string includes them. If our date was instead 02-02-2009, we would parse it using %m-%d-%Y.

  1. Now we can use parseDate to parse our dates and we can use the built-in unary + operator to parse our numbers. Modify your call to d3.csv like so, passing an anonymous row conversion function that does the parsing: 
    d3.csv('data.csv', function(d) {
  return {
    date: parseDate(d.date),
    price: +d.price
  };
}).then(function(data) {
  console.log(data);
});

Line Chart

  1. Instead of writing everything inside the then function of d3.csv, lets create a new function that creates our line chart given some data:

    function lineChart(data){
  console.log(data);
}

    and replace the anonymous function inside then with our new function, like so:

    d3.csv('data.csv', function(d) {
  return {
    date: parseDate(d.date),
    price: +d.price
  };
}).then(lineChart);

  2. In order to have the proper scales for your line chart, you need to know the max and min of your data. This is easy to do manually for static, small datasets but in general this is cumbersome, error-prone, and can be done instead algorithmically. Add these lines after the console.log in lineChart:

      let maxDate  = d3.max(data, function(d){return d.date; });
  let minDate  = d3.min(data, function(d){return d.date; });
  let maxPrice = d3.max(data, function(d){return d.price;});
  console.log(maxDate, minDate, maxPrice);

  3. In your browser Console view check whether those variables have been set. The console.log is for your own assurance that your variable is indeed returning the value that you are asking for. You can remove this later.

  4. Check to see if you can see those variables in the browser debugger instead (Debugger in Firefox, Sources in Chrome). Open linechart.js in the debugger. Click on the line number beside the closing parenthesis } of the lineChart function to create a breakpoint. Refresh the browser page. You should see the variable values at this point inside the Scopes view (Firefox) or Scope view (Chrome). Chrome also shows the values in-line. You can click the Resume button (right-facing triangle, e.g. a play button) to resume execution. Remove the breakpoint by clicking the line number again.

  5. Define the width and height for the svg you will use:

    let width  = 600;
let height = 500;
let margin = {
  top: 30,
  bottom: 30,
  left: 30,
  right: 30
};

For each of the following steps, you can save your file and reload the page in your web browser to see what has changed.

  1. Now, create your svg inside the body in the DOM by using D3 to select the body and append the svg, giving it a width, height, and background color:

    let svg = d3.select('body')
  .append('svg')
    .attr('width' , width)
    .attr('height', height)
    .style('background', '#efefef');

  2. Then create an SVG group g for all the elements that will make up our line chart.

    let chartGroup = svg
  .append('g')
    .attr('transform','translate(' + margin.left +',' + margin.top + ')');

  3. Now we will define two scales for the x (d3.scaleTime) and y (d3.scaleLinear) axes and set their domain (in the data) and range (on the screen):

    let xScale = d3.scaleTime()
  .domain([minDate, maxDate])
  .range([0, width]);
    let yScale = d3.scaleLinear()
  .domain([0, maxPrice])
  .range([height - margin.bottom - margin.top, 0]);

  4. Then we can draw our axes using these scales:

    let xAxis = d3.axisBottom(xScale);
chartGroup.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0, ' + (height - margin.bottom - margin.top) + ')')
  .call(xAxis);
    let yAxis = d3.axisLeft(yScale);
chartGroup.append('g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(0, 0)')
  .call(yAxis);

  5. Finally, we will draw the line:

    let line = d3.line()
  .x(function(d){return xScale(d.date);})    
  .y(function(d){return yScale(d.price);})
    chartGroup.append('path')
  .attr('d', line(data));

  6. At this point, if you save and reload in your browser you will see that your line looks rather bizarre. This is because by default the line is filled with black and it is trying to close the polygon. Let's add CSS to fix this.

  7. First, add a CSS class to the lines we want to style (adding to the original code):

    chartGroup.append('path')
  .attr('d', line(data))
  .attr('class', 'dataLine');

    Then, in linechart.css add these lines:

    .dataLine{
  stroke: #0000BB;
  stroke-width: 1px;
  fill: none;
}

Congratulations! You should now have a line chart. What else can you do with this by playing with JavaScript, HTML, and CSS?

Submission instructions

  1. Ensure you updated (1) the GitHub Pages clickable hyperlink at the top of this README.md file.

  2. Commit all your local files and push them to the remote repository on GitHub which was generated by GitHub Classroom. We will grade based on what is visible on the GitHub Page.

  3. Submit the URL of your GitHub Classroom-generated repository (not your GitHub Page) to the associated assignment on Canvas. Do not submit a link to a personal repository. It must be within our class GitHub organization.

Tips, tricks, and troubleshooting

See https://github.com/NEU-DS-4200-F20-Staff/General_Course_Information/blob/master/d3.md

Assignment setup (for instructors only)

See https://github.com/NEU-DS-4200-F20-Staff/General_Course_Information/blob/master/assignment-setup.md