davo/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple graph demonstrating filtering. Specifically filtering graph points that fall below 400.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.
forked from d3noob's block: Filtering in v7

  
## d3-on-worker.js
let w = createWorker({ iframe: true }, async (w) => {
	// set the dimensions and margins of the graph
	const margin = { top: 20, right: 20, bottom: 30, left: 50 };

	const width = 960 - margin.left - margin.right;
	const height = 500 - margin.top - margin.bottom;

	// parse the date / time
	const parseTime = d3.timeParse("%d-%b-%y");

	// set the ranges
	const x = d3.scaleTime().range([0, width]);
	const y = d3.scaleLinear().range([height, 0]);

	// define the line
	const valueline = d3
		.line()
		.x(({ date }) => x(date))
		.y(({ close }) => y(close));

	// append the svg obgect to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	const 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})`);

	// Get the data
	d3.csv("data.csv").then((data) => {
		// format the data
		data.forEach((d) => {
			d.date = parseTime(d.date);
			d.close = +d.close;
		});

		// Scale the range of the data
		x.domain(d3.extent(data, ({ date }) => date));
		y.domain([0, d3.max(data, ({ close }) => close)]);

		// Add the valueline path.
		svg.append("path").data([data]).attr("class", "line").attr("d", valueline);

		// Add the scatterplot
		svg
			.selectAll("dot")
			.data(data)
			.enter()
			.append("circle")
			.filter(({ close }) => close < 400) // <== This line
			.style("fill", "red") // <== and this one
			.attr("r", 5)
			.attr("cx", ({ date }) => x(date))
			.attr("cy", ({ close }) => y(close));

		// Add the X Axis
		svg
			.append("g")
			.attr("transform", `translate(0,${height})`)
			.call(d3.axisBottom(x));

		// Add the Y Axis
		svg.append("g").call(d3.axisLeft(y));
	});
});

## data.csv

          
            date
            close

            
              1-May-12
              58.13

            
              30-Apr-12
              53.98

            
              27-Apr-12
              67.00

            
              26-Apr-12
              89.70

            
              25-Apr-12
              99.00

            
              24-Apr-12
              130.28

            
              23-Apr-12
              166.70

            
              20-Apr-12
              234.98

            
              19-Apr-12
              345.44

            
              18-Apr-12
              443.34

            
              17-Apr-12
              543.70

            
              16-Apr-12
              580.13

            
              13-Apr-12
              605.23

            
              12-Apr-12
              622.77

            
              11-Apr-12
              626.20

            
              10-Apr-12
              628.44

            
              9-Apr-12
              636.23

            
              5-Apr-12
              633.68

            
              4-Apr-12
              624.31

            
              3-Apr-12
              629.32

            
              2-Apr-12
              618.63

            
              30-Mar-12
              599.55

            
              29-Mar-12
              609.86

            
              28-Mar-12
              617.62

            
              27-Mar-12
              614.48

            
              26-Mar-12
              606.98

## data.json
[
	{
		"date": "1-May-12",
		"close": 58.13
	},
	{
		"date": "30-Apr-12",
		"close": 53.98
	},
	{
		"date": "27-Apr-12",
		"close": 67
	},
	{
		"date": "26-Apr-12",
		"close": 89.7
	},
	{
		"date": "25-Apr-12",
		"close": 99
	},
	{
		"date": "24-Apr-12",
		"close": 130.28
	},
	{
		"date": "23-Apr-12",
		"close": 166.7
	},
	{
		"date": "20-Apr-12",
		"close": 234.98
	},
	{
		"date": "19-Apr-12",
		"close": 345.44
	},
	{
		"date": "18-Apr-12",
		"close": 443.34
	},
	{
		"date": "17-Apr-12",
		"close": 543.7
	},
	{
		"date": "16-Apr-12",
		"close": 580.13
	},
	{
		"date": "13-Apr-12",
		"close": 605.23
	},
	{
		"date": "12-Apr-12",
		"close": 622.77
	},
	{
		"date": "11-Apr-12",
		"close": 626.2
	},
	{
		"date": "10-Apr-12",
		"close": 628.44
	},
	{
		"date": "9-Apr-12",
		"close": 636.23
	},
	{
		"date": "5-Apr-12",
		"close": 633.68
	},
	{
		"date": "4-Apr-12",
		"close": 624.31
	},
	{
		"date": "3-Apr-12",
		"close": 629.32
	},
	{
		"date": "2-Apr-12",
		"close": 618.63
	},
	{
		"date": "30-Mar-12",
		"close": 599.55
	},
	{
		"date": "29-Mar-12",
		"close": 609.86
	},
	{
		"date": "28-Mar-12",
		"close": 617.62
	},
	{
		"date": "27-Mar-12",
		"close": 614.48
	},
	{
		"date": "26-Mar-12",
		"close": 606.98
	}
]

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

</style>
<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// Get the data
d3.csv("data.csv").then(function(data) {


  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

  // Add the scatterplot
  svg.selectAll("dot")
      .data(data)
    .enter().append("circle")
      .filter(function(d) { return d.close < 400 })  // <== This line
      .style("fill", "red")                          // <== and this one
      .attr("r", 5)
      .attr("cx", function(d) { return x(d.date); })
      .attr("cy", function(d) { return y(d.close); });

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

</script>
</body>
	let w = createWorker({ iframe: true }, async (w) => {
	// set the dimensions and margins of the graph
	const margin = { top: 20, right: 20, bottom: 30, left: 50 };

	const width = 960 - margin.left - margin.right;
	const height = 500 - margin.top - margin.bottom;

	// parse the date / time
	const parseTime = d3.timeParse("%d-%b-%y");

	// set the ranges
	const x = d3.scaleTime().range([0, width]);
	const y = d3.scaleLinear().range([height, 0]);

	// define the line
	const valueline = d3
	.line()
	.x(({ date }) => x(date))
	.y(({ close }) => y(close));

	// append the svg obgect to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	const 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})`);

	// Get the data
	d3.csv("data.csv").then((data) => {
	// format the data
	data.forEach((d) => {
	d.date = parseTime(d.date);
	d.close = +d.close;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, ({ date }) => date));
	y.domain([0, d3.max(data, ({ close }) => close)]);

	// Add the valueline path.
	svg.append("path").data([data]).attr("class", "line").attr("d", valueline);

	// Add the scatterplot
	svg
	.selectAll("dot")
	.data(data)
	.enter()
	.append("circle")
	.filter(({ close }) => close < 400) // <== This line
	.style("fill", "red") // <== and this one
	.attr("r", 5)
	.attr("cx", ({ date }) => x(date))
	.attr("cy", ({ close }) => y(close));

	// Add the X Axis
	svg
	.append("g")
	.attr("transform", `translate(0,${height})`)
	.call(d3.axisBottom(x));

	// Add the Y Axis
	svg.append("g").call(d3.axisLeft(y));
	});
	});
	date	close
	1-May-12	58.13
	30-Apr-12	53.98
	27-Apr-12	67.00
	26-Apr-12	89.70
	25-Apr-12	99.00
	24-Apr-12	130.28
	23-Apr-12	166.70
	20-Apr-12	234.98
	19-Apr-12	345.44
	18-Apr-12	443.34
	17-Apr-12	543.70
	16-Apr-12	580.13
	13-Apr-12	605.23
	12-Apr-12	622.77
	11-Apr-12	626.20
	10-Apr-12	628.44
	9-Apr-12	636.23
	5-Apr-12	633.68
	4-Apr-12	624.31
	3-Apr-12	629.32
	2-Apr-12	618.63
	30-Mar-12	599.55
	29-Mar-12	609.86
	28-Mar-12	617.62
	27-Mar-12	614.48
	26-Mar-12	606.98
	[
	{
	"date": "1-May-12",
	"close": 58.13
	},
	{
	"date": "30-Apr-12",
	"close": 53.98
	},
	{
	"date": "27-Apr-12",
	"close": 67
	},
	{
	"date": "26-Apr-12",
	"close": 89.7
	},
	{
	"date": "25-Apr-12",
	"close": 99
	},
	{
	"date": "24-Apr-12",
	"close": 130.28
	},
	{
	"date": "23-Apr-12",
	"close": 166.7
	},
	{
	"date": "20-Apr-12",
	"close": 234.98
	},
	{
	"date": "19-Apr-12",
	"close": 345.44
	},
	{
	"date": "18-Apr-12",
	"close": 443.34
	},
	{
	"date": "17-Apr-12",
	"close": 543.7
	},
	{
	"date": "16-Apr-12",
	"close": 580.13
	},
	{
	"date": "13-Apr-12",
	"close": 605.23
	},
	{
	"date": "12-Apr-12",
	"close": 622.77
	},
	{
	"date": "11-Apr-12",
	"close": 626.2
	},
	{
	"date": "10-Apr-12",
	"close": 628.44
	},
	{
	"date": "9-Apr-12",
	"close": 636.23
	},
	{
	"date": "5-Apr-12",
	"close": 633.68
	},
	{
	"date": "4-Apr-12",
	"close": 624.31
	},
	{
	"date": "3-Apr-12",
	"close": 629.32
	},
	{
	"date": "2-Apr-12",
	"close": 618.63
	},
	{
	"date": "30-Mar-12",
	"close": 599.55
	},
	{
	"date": "29-Mar-12",
	"close": 609.86
	},
	{
	"date": "28-Mar-12",
	"close": 617.62
	},
	{
	"date": "27-Mar-12",
	"close": 614.48
	},
	{
	"date": "26-Mar-12",
	"close": 606.98
	}
	]
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2px;
	}

	</style>
	<body>

	<!-- load the d3.js library -->
	<script src="https://d3js.org/d3.v7.min.js"></script>
	<script>

	// set the dimensions and margins of the graph
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// parse the date / time
	var parseTime = d3.timeParse("%d-%b-%y");

	// set the ranges
	var x = d3.scaleTime().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	// define the line
	var valueline = d3.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.close); });

	// append the svg obgect to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	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 + ")");

	// Get the data
	d3.csv("data.csv").then(function(data) {


	// format the data
	data.forEach(function(d) {
	d.date = parseTime(d.date);
	d.close = +d.close;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.close; })]);

	// Add the valueline path.
	svg.append("path")
	.data([data])
	.attr("class", "line")
	.attr("d", valueline);

	// Add the scatterplot
	svg.selectAll("dot")
	.data(data)
	.enter().append("circle")
	.filter(function(d) { return d.close < 400 }) // <== This line
	.style("fill", "red") // <== and this one
	.attr("r", 5)
	.attr("cx", function(d) { return x(d.date); })
	.attr("cy", function(d) { return y(d.close); });

	// Add the X Axis
	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	// Add the Y Axis
	svg.append("g")
	.call(d3.axisLeft(y));

	});

	</script>
	</body>