Matthew Oxley matt-oxley

## join.js
const bars = svg
 .selectAll("rect")
 .data(data)
 .join('rect')
 .attr("height", d => yScale(d))

## index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    const height = 500;
    const width = 200;
    const svg = d3
      .select("body")
      .style("text-align", "center")

## fullUpdatePattern.js
const binding = svg
 .selectAll("rect")
 .data(data)

 binding
 .enter()
 .append("rect")
 .merge(binding)
 .attr("height", d => yScale(d))
binding.exit().remove()

## index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    const height = 500;
    const width = 200;
    const svg = d3
      .select("body")
      .style("text-align", "center")

## merged.js
const binding = svg
 .selectAll("rect")
 .data(data)

 binding
 .enter()
 .append("rect")
 .merge(binding)
 .attr("height", d => yScale(d))

## visibleUpdate.js
const updatedBars = svg
 .selectAll("rect")
 .data(data)
 .attr("height", d => yScale(d))

## enterWithStyling.js
const newBars = svg
 .selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("height", d => yScale(d))

## enter.js
const newBars = svg
 .selectAll("rect")
 .data(data)
 .enter()
 .append("rect")

## index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    const data = [3, 5, 7, 2, 9, 2, 10, 4, 9, 3];
    const height = 500;
    const width = 200;
    const barWidth = width / data.length;
    const yScale = d3

## snippetThree.js
const bars = svg
 .selectAll("rect")
 .data(data)
 .join("rect")
 .attr("height", d => yScale(d))
 .attr("width", barWidth)
 .attr("x", (d, i) => i * barWidth)
 .attr("y", d => height - yScale(d))
 .attr("stroke", "white")
 .attr("fill", "steelblue");
	const bars = svg
	.selectAll("rect")
	.data(data)
	.join('rect')
	.attr("height", d => yScale(d))
	<!DOCTYPE html>
	<meta charset="utf-8" />
	<body>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
	const height = 500;
	const width = 200;
	const svg = d3
	.select("body")
	.style("text-align", "center")
	const binding = svg
	.selectAll("rect")
	.data(data)

	binding
	.enter()
	.append("rect")
	.merge(binding)
	.attr("height", d => yScale(d))
	binding.exit().remove()
	const updatedBars = svg
	.selectAll("rect")
	.data(data)
	.attr("height", d => yScale(d))
	const newBars = svg
	.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("height", d => yScale(d))