Woman, computer scientist, introvert, daughter of an immigrant, and Associate Professor at the University of San Francisco.
Published unlisted
Edited
Jan 31, 2019
// this cell is pinned so you can view the code
// the line below will load d3v5
d3 = require('d3@5')
d3.version
peter = d3.text(gist);
function keepLetters(input) {
let notLetter = /[^a-z]/g;
return input.toLowerCase().replace(notLetter, "");
}
function countLetters(input) {
let text = keepLetters(input);
let count = d3.map();
for (var i = 0; i < text.length; i++) {
let letter = text[i];
if (count.has(letter)) {
count.set(letter, count.get(letter) + 1);
}
else {
count.set(letter, 1);
}
}
return count;
}
// calculate the letter count map and show the entries
countLetters("Book-Keeper").entries();
html`
<svg width="100%" height="400" class="placeholder" id="first">
<rect x="10" y="10" width="100" height="100" rx="15" ry="15"/>
</svg>`
html`
<p><em>See the stylesheet defined below.</em></p>
<style>
/* this is standard html/css style attributes */
svg {
background-color: #eeeeee;
}
/* this is standard svg style attributes */
svg rect {
fill: #17a589;
}
</style>
`
config = {
let svg = d3.select("svg#first");
let bounds = svg.node().getBoundingClientRect();
return {
outerWidth: Math.floor(bounds.width),
outerHeight: Math.floor(bounds.height),
// the inner plot area
innerWidth: Math.floor(bounds.width - margin.right - margin.left),
innerHeight: Math.floor(bounds.height - margin.top - margin.bottom)
};
}
x = d3.scaleBand()
.domain(letters)
.range([0, config.innerWidth])
.paddingInner(0.1); // space between bars
md`
Using this scale, we can calculate that \`x('a') = ${x('a')}\`, \`x('b') = ${x('b')}\`, and \`x('z') = ${x('z')}\`. We will use those as *x* pixel values when drawing our bars.
We will also need an axis line, tick marks, and tick labels. Thankfully, this functionality is built-in to D3:
`
xAxis = d3.axisBottom(x);
{
let height = 100;
const svg = d3.select(DOM.svg(config.outerWidth, height));
let g = svg.append("g");
g.call(xAxis);
g.attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")");
return svg.node();
}
countMax = d3.max(letterCount.values())
y = d3.scaleLinear()
.domain([0, countMax]) // always start at 0!
.range([config.innerHeight, 0]) // remember y is flipped!
.nice(); // rounds the domain a bit for nicer output
yAxis = d3.axisLeft(y);
// this is an example of embedding code from other notebooks!
// see: https://beta.observablehq.com/@mbostock/tweet
import {tweet} from "@mbostock/tweet"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.