Day 40, 2020-10-03Day 37&38&39, 2020-09-30 & 2020-10-01 & 2020-10-02Day 35 & Day 36, 2020-09-28 & 2020-09-29Day 34, 2020-09-27Day 33, 2020-09-26Day 32 (Task 10), 2020-09-25Day 31 (9-2-10), 2020-09-24Day Thirty (A puzzle to be solved), 2020-09-22Day Twenty Nine, 2020-09-22Day Twenty-Eight (Task 9-2-9), 2020-09-21Day Twenty Six, 2020-09-19Day Twenty Five, 2020-09-18Day Twenty Four, 2020-09-17Day Twenty Three (Task 9-2), 2020-09-16Day Twenty Two (Task 9-1 continued), 2020-09-15Day Twenty-One (Task 9-1 continued), 2020-09-14Day Twenty (Task 8 Continued + Task 9-1), 2020-09-13Day Nineteen (Task 8), Spet. 12, 2020Day Eighteen (Task 7-1-10, 11, Sept. 11, 2020Day Fourteen, Fifteen, Sixteen & Seventeen, Spet. 07 ~ 10, 2020Day Thirteen (Task 7-1), 2020-09-06Day Twelve, Sept. 5, 2020: ScalesDay Eleven, Sept.4th, 2020Day Ten (Task 6-6), Sept. 3rd, 2020Day Nine, 2020-09-02Day Eight, Spet. 1, 2020Day Six, 30 Aug 2020Day Five, 29 Aug 2020Day Four, 28 Aug 2020Day Three, 27 Aug 2020Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands
Day Twenty-Seven, 2020-09-20
md`# Day Twenty-Seven, 2020-09-20`
md`
I have long been struggleing with how to execuate what I haver learned from the book in Observable. I didn't know how to create an SVG in the first place. In the book, I'll do that via \`d3.select("body").append("svg").attr...\`, however, there is no "body" for me to select in Observable. Also, I didn't know what the symbol of \`=>\` mean. Thrid, I didn't know why so many Observable notebooks have \`consta\`.
`
md`
Today is a breakthrough for me, because I showed the results I usually see when I was practicing with the book. You can see the results below.
I learned from Mike Bostock's [notebook of Bar Chart](https://observablehq.com/@d3/bar-chart). I also learned that I can include my codes in curly brackets, and that I need to return at the end, from [this blog post](https://www.markusdosch.com/2020/04/exploring-observables-interactive-javascript-notebooks/) by [Markus Dosch](https://www.markusdosch.com/).
`
d3 = require("d3@6")
chart = {
const w = 600;
const h = 250;
const dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
const xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
const svg = d3.create("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => h - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb(0, 0, "+ Math.round(d * 10) +")");
return svg.node();
}
md`
Some points worth mentioning:
- You can write codes involving multiple variables by including them in curly brackets. If you don't use curly brackets, you have to dedicate one cell to each variable. See [this example](https://observablehq.com/@hongtaoh/bar-chart-cell-by-cell) if you don't know what "dedicating one cell to each variable" means.
- In the book, you normally write \`var w = 600\`. In Observable, however, you need to write \`const w = 600\`. Don't ask me why. If you are dedicating one cell to each variable, then you don't need to write \`const w = 600\`. Don't ask me why.
- To show the results, you need to use \`return svg.node()\`. Again, don't ask me why.
- By the way, \`d => yScale(d)\` is simply short for \`function(d) { return yScale(d) }\`. Similarly, \`(d, i) => xScale(i)\` means \`function(d, i) { return xScale(i)}\`
`
p = html `<p>Click here for new data</p>`
md`
Go to [Day 28](https://observablehq.com/@hongtaoh/day-twenty-eight-task-9-2-continued-2020-09-21).
`
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.