jwilber/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    D3 v4 Line Chart Example

This is a example for basic line chart using D3. We are using the newest version of D3, version 4. As for all visualizations, we can break down this work into a checklist.
Line Chart Checklist


Add an SVG to draw our line chart on
Use the D3 standard margin convetion
Create an x axis
Create a y axis
Create an x scale
Create a y scale
Create a line generator
Create a random dataset
Create a path object for the line
Bind the data to the path object
Call the line generator on the data-bound path object
Add circles to show each datapoint
Add some basic styling to the chart so its easier on the eyes

Read through the code below to see where each part of the checklist is completed.
forked from pstuffa's block: D3 v4 Line Chart
forked from gordlea's block: D3 v5 Line Chart

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
/* 13. Basic Styling with CSS */

/* /* /* Style the lines by removing the fill and applying a stroke */
.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}


</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
</body>

<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

// 2. Use the margin convention practice
var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 131;

// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
    .domain([0, n-1]) // input
    .range([0, width]); // output

// 6. Y scale will use the randomly generate number
var yScale = d3.scaleLinear()
    .domain([0, 1]) // input
    .range([height, 0]); // output

// 7. d3's line generator
var line = d3.line()
    .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
    .y(function(d) { return yScale(d.y); }) // set the y values for the line generator
    .curve(d3.curveMonotoneX) // apply smoothing to the line

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

// 1. Add the SVG to the page and employ #2
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 3. Call the x axis in a group tag
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag
svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator
svg.append("path")
    .datum(dataset) // 10. Binds data to the line
    .attr("class", "line") // Assign a class for styling
    .attr("d", line); // 11. Calls the line generator

// 12. Appends a circle for each datapoint

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">
	/* 13. Basic Styling with CSS */

	/* /* /* Style the lines by removing the fill and applying a stroke */
	.line {
	fill: none;
	stroke: #ffab00;
	stroke-width: 3;
	}


	</style>
	<!-- Body tag is where we will append our SVG and SVG objects-->
	<body>
	</body>

	<!-- Load in the d3 library -->
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>

	// 2. Use the margin convention practice
	var margin = {top: 50, right: 50, bottom: 50, left: 50}
	, width = window.innerWidth - margin.left - margin.right // Use the window's width
	, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

	// The number of datapoints
	var n = 131;

	// 5. X scale will use the index of our data
	var xScale = d3.scaleLinear()
	.domain([0, n-1]) // input
	.range([0, width]); // output

	// 6. Y scale will use the randomly generate number
	var yScale = d3.scaleLinear()
	.domain([0, 1]) // input
	.range([height, 0]); // output

	// 7. d3's line generator
	var line = d3.line()
	.x(function(d, i) { return xScale(i); }) // set the x values for the line generator
	.y(function(d) { return yScale(d.y); }) // set the y values for the line generator
	.curve(d3.curveMonotoneX) // apply smoothing to the line

	// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
	var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

	// 1. Add the SVG to the page and employ #2
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// 3. Call the x axis in a group tag
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

	// 4. Call the y axis in a group tag
	svg.append("g")
	.attr("class", "y axis")
	.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

	// 9. Append the path, bind the data, and call the line generator
	svg.append("path")
	.datum(dataset) // 10. Binds data to the line
	.attr("class", "line") // Assign a class for styling
	.attr("d", line); // 11. Calls the line generator

	// 12. Appends a circle for each datapoint

	</script>