This video explains how to draw a line chart using CSV.
- [Instructor] Now, that our data are shipshape,…let's set about using them to draw a line chart.…Now, one thing we need to do quickly,…so that we can see the resulting chart,…is just add some style declarations here for path.…So, we've got stroke of green…and we'll give it a stroke-width there of two.…We can arrange our get data on multiple lines here,…as long as it's within these curly brackets.…In this section, we're going to put together…all the things that we saw in the last chapter.…
So, we're going to start by defining height of 300…and a width of 500.…The next thing we need is some max and min…of the data that we have.…And we need this for the scales.…And the scales are going to be used to draw the chart…and to draw the axes.…So, we'll declare var max,…which we're going to use to return the maximum price data.…So, it's d3.max().…The data is held in an array called data.…And then again, we're using this optional function parameter…to tell d3 precisely which data point we want…which is d.price.…
And if we log back to the console,…
- Making a simple bar chart with D3
- Understanding SVG graphics
- Drawing basic shapes
- Adding text
- Using generators and the path element
- Creating a scale and axes
- Importing data into D3
- Creating trees and Voronoi tessellations
- Preparing your data for advanced graphics
- Adding interactivity and transitions
- Choosing the right graphic
- Finding D3.js plugins
Skill Level Intermediate
2. Making a Simple Bar Chart with D3
3. Basic Shapes, Courtesy of SVG
4. Advanced Shapes, with D3 and Path
5. Scales and Axes
6. Importing Data into D3
7. Additional Graphics with D3 Layout
8. Preparing Your Data for Advanced Graphics
10. Picking the Right Graphic
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.