Matthew Oxley matt-oxley
matt-oxley
/ join.js
Created
April 7, 2019 17:47
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const bars = svg | |
| .selectAll("rect") | |
| .data(data) | |
| .join('rect') | |
| .attr("height", d => yScale(d)) |
matt-oxley
/ index.html
Created
April 7, 2019 17:45
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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") |
matt-oxley
/ fullUpdatePattern.js
Created
April 7, 2019 17:44
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const binding = svg | |
| .selectAll("rect") | |
| .data(data) | |
| binding | |
| .enter() | |
| .append("rect") | |
| .merge(binding) | |
| .attr("height", d => yScale(d)) | |
| binding.exit().remove() |
matt-oxley
/ index.html
Created
April 7, 2019 17:42
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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") |
matt-oxley
/ merged.js
Created
April 7, 2019 17:40
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const binding = svg | |
| .selectAll("rect") | |
| .data(data) | |
| binding | |
| .enter() | |
| .append("rect") | |
| .merge(binding) | |
| .attr("height", d => yScale(d)) |
matt-oxley
/ visibleUpdate.js
Created
April 7, 2019 17:36
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const updatedBars = svg | |
| .selectAll("rect") | |
| .data(data) | |
| .attr("height", d => yScale(d)) |
matt-oxley
/ enterWithStyling.js
Created
April 7, 2019 17:34
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const newBars = svg | |
| .selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect") | |
| .attr("height", d => yScale(d)) |
matt-oxley
/ enter.js
Created
April 7, 2019 17:32
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const newBars = svg | |
| .selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect") |
matt-oxley
/ index.html
Created
April 7, 2019 17:15
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 |
matt-oxley
/ snippetThree.js
Created
April 7, 2019 17:00
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"); |
NewerOlder