This is a starter template for the Letter Count Bar Chart example. See that gist for the fully worked out example.
Fork this gist for a starter template to see if you can rebuild the example on your own.
Last active
January 30, 2020 20:56
-
-
Save sjengle/bd5ba3847e0d65af55e85b75aa5c0f73 to your computer and use it in GitHub Desktop.
Letter Count Bar Chart (2020 Edition, Template)
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
| let updateData = function() { | |
| // TODO: implement function | |
| return new Map(); | |
| }; | |
| let drawBarChart = function() { | |
| // TODO: implement function | |
| // https://github.com/d3/d3-array/blob/master/README.md | |
| // https://bl.ocks.org/mbostock/3019563 | |
| // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions | |
| // https://github.com/d3/d3-scale#api-reference | |
| // https://github.com/d3/d3-scale#band-scales | |
| // https://bost.ocks.org/mike/selection/ | |
| // https://bost.ocks.org/mike/join/ | |
| }; | |
| let updateBarChart = function() { | |
| // TODO: optionally implement function | |
| // https://github.com/d3/d3-ease | |
| }; |
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
| let letters = "abcdefghijklmnopqrstuvwxyz".split(""); | |
| let keepLetters = function(text) { | |
| // TODO: implement function | |
| return text; | |
| }; | |
| let countLetters = function(input) { | |
| // TODO: implement function | |
| return new Map(); | |
| }; |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Letter Count Bar Chart</title> | |
| <!-- TODO: include stylesheets --> | |
| </head> | |
| <body> | |
| <!-- TODO: include html elements --> | |
| Hello world! | |
| <!-- TODO: include external javascript --> | |
| <!-- TODO: embed starter javascript --> | |
| </body> |
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
| Peter Piper picked a peck of pickled peppers. | |
| A peck of pickled peppers Peter Piper picked. | |
| If Peter Piper picked a peck of pickled peppers, | |
| Where's the peck of pickled peppers that Peter Piper picked? |
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
| body, textarea { | |
| /* TODO: set font */ | |
| } | |
| body { | |
| /* TODO: set margin, padding, background */ | |
| /* see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value */ | |
| } | |
| textarea { | |
| /* TODO: set text area position and style */ | |
| } | |
| textarea, svg { | |
| /* TODO: add border to text area and svg */ | |
| } | |
| svg { | |
| /* TODO: set svg size and style */ | |
| } | |
| /* TODO: style svg elements */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment