Skip to content

Instantly share code, notes, and snippets.

@sjengle
Last active January 30, 2020 20:56
  • Star 0 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save sjengle/bd5ba3847e0d65af55e85b75aa5c0f73 to your computer and use it in GitHub Desktop.
Letter Count Bar Chart (2020 Edition, Template)

Letter Count Bar Chart Template

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.

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
};
let letters = "abcdefghijklmnopqrstuvwxyz".split("");
let keepLetters = function(text) {
// TODO: implement function
return text;
};
let countLetters = function(input) {
// TODO: implement function
return new Map();
};
<!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>
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?
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