~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]
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.
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.
-
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 rungit clone <YOUR_REPO_URL>
-
CD
or open a terminal / command prompt window into the cloned folder. -
Start a simple python webserver. E.g.,
python -m http.server
,python3 -m http.server
, orpy -m http.server
. If you are using python 2 you will need to usepython -m SimpleHTTPServer
instead, but please switch to python 3 as Python 2 was sunset on 2020-01-01. -
Wait for the output:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/)
. -
Now open your web browser (Firefox or Chrome) and navigate to the URL: http://localhost:8000
- 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.)
- Open
index.html
. Just below this HTML comment:add this line to load the D3 javascript code (note the version number v6. D3 has many versions and they are not compatible.):<!-- Load the d3.js library (version 6 minified) -->
<script src='lib/d3.v6.1.1/d3.min.js'></script>
- You also have a file
linechart.js
. We want to load this javascript code as well. Inindex.html
, just below this HTML comment:add this line:<!-- Load the line.js file -->
<script src='linechart.js'></script>
Both of these should be at the end of the <body>
.
-
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. -
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 insidethen
: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.
-
In your browser (Firefox or Chrome), open the browser developer tools by pressing
CTRL
+SHIFT
+I
(Windows/Linux) orCmd
+Opt
+I
and select theConsole
view. Here is where you see any output fromconsole.log
or any otherconsole
messages such as errors. The browser developer tools and theConsole
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! -
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
-
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
.
- 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 tod3.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); });
-
Instead of writing everything inside the
then
function ofd3.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);
-
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
inlineChart
: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);
-
In your browser
Console
view check whether those variables have been set. Theconsole.log
is for your own assurance that your variable is indeed returning the value that you are asking for. You can remove this later. -
Check to see if you can see those variables in the browser debugger instead (
Debugger
in Firefox,Sources
in Chrome). Openlinechart.js
in the debugger. Click on the line number beside the closing parenthesis}
of thelineChart
function to create a breakpoint. Refresh the browser page. You should see the variable values at this point inside theScopes
view (Firefox) orScope
view (Chrome). Chrome also shows the values in-line. You can click theResume
button (right-facing triangle, e.g. a play button) to resume execution. Remove the breakpoint by clicking the line number again. -
Define the
width
andheight
for thesvg
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.
-
Now, create your
svg
inside thebody
in the DOM by using D3 toselect
thebody
andappend
thesvg
, giving it awidth
,height
, andbackground
color:let svg = d3.select('body') .append('svg') .attr('width' , width) .attr('height', height) .style('background', '#efefef');
-
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 + ')');
-
Now we will define two scales for the x (
d3.scaleTime
) and y (d3.scaleLinear
) axes and set theirdomain
(in the data) andrange
(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]);
-
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);
-
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));
-
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.
-
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?
-
Ensure you updated (1) the GitHub Pages clickable hyperlink at the top of this
README.md
file. -
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.
-
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.
See https://github.com/NEU-DS-4200-F20-Staff/General_Course_Information/blob/master/d3.md
See https://github.com/NEU-DS-4200-F20-Staff/General_Course_Information/blob/master/assignment-setup.md