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.
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 */ |