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-Seven, 2020-09-20Day 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 Four, 28 Aug 2020Day Three, 27 Aug 2020Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands
Day Five, 29 Aug 2020
md`# Day Five, 29 Aug 2020`
d3 = require("d3@6")
var dataset=[5,10,15,20,25];
md`I might just be me but I found that lots of the codes in the book could not be ran on Observable. I then searched "Interactive Data Visualization for the Web with Observable". I didn't find the information I wanted but I stumbled into [this website](https://www.williamrchase.com/) and [his journey of learning D3.js](https://www.williamrchase.com/post/how-i-m-learning-d3-js/).`
md`I started going back to [Mike Bostock's tutorials on D3](https://www.williamrchase.com/).
Again, I encountered problems that should'n be there. For exmaple:`
values = FileAttachment("values-1@2.json").json()
md`This is so frustrating because the tutorial didn't tell me how to attach files in the first place.
I latered searched "how to attach files in observable" and found [this article](https://observablehq.com/@observablehq/file-attachments): To upload files, use \`Shift-Command-U\`.
I totally understand that when you have mastered a thing, you'll be so lazy to introduce every simple step in the tutorials you'll write. But to really help beginnners, I think it's always to show **every simple step**, without skimming.`
[d3.min(values), d3.median(values), d3.max(values)]
import {chart as chart1} with {values as data} from "@d3/histogram"
chart1
height = 200
import {chart as chart2} with {values as data, height} from "@d3/histogram"
chart2
md `The chart3 part is too difficult for me. I didn't want to go into details for something I don't know now.
`
temp = FileAttachment("temperature.csv")
temp.text()
d3.csvParse(await temp.text())
// This will parse the text into objects
d3.csvParse(await temp.text(), d3.autoType)
1+1
name = "Mike"
[...name].reverse().join("")
sum = {
let s = 0;
for (let i = 0; i < 10; ++i) {
s += i;
}
return s;
}
data = {
const text = await temp.text();
const parseDate = d3.utcParse("%Y-%m-%d");
return d3.csvParse(text, ({date, temperture}) => ({
date: parseDate(date),
temperature: +temperture
}));
}
md `Right now, I realized that this tutorial is not for beginners like me. For example, I didn't know when to use \`await\` and the tutorial didn't even mention this function.`
md `Apart from \`await\`, there are some other things I don't know now:
- when to use \`await\` and when not to?
- What does \`=>\` mean?
- What does \`data.map\` mean?
`
fruits = [
{name: "🍊", count: 21},
{name: "🍇", count: 13},
{name: "🍏", count: 8},
{name: "🍌", count: 5},
{name: "🍐", count: 3},
{name: "🍋", count: 2},
{name: "🍎", count: 1},
{name: "🍉", count: 1}
]
md` [By now](https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3), I realized that this tutorial is not for me. It does not touch upon the basic concepts at all. These tutorials are for those who have experience with JavaScript.
`
datasets = [100, 200, 300, 400, 500];
scale = d3.scaleLinear();
scale(2.5)
scale.domain([100,500]);
scale.range([10,350])
scale(100)
scale(300)
scale_2 = d3.scaleLinear().
domain([100,500]).
range([10,350]);
scale_2(300)
{
let x = 0;
for (let i = 1; i <= 5; ++i) {
x += i; //
}
return x;
}
function Program(name) {
return `Program: ${name}`;
}
Program("I am learning D3 now!")
dataset = [
[5,20], [480,90], [250,50], [100,33], [330,95],
[410,12], [475,44], [25,67], [85,21], [220,88]
];
md`The book (p.120) says that this \`dataset\` is an array of arrays. What is an array anyway? "An array is a sequence of values, conveniently stored in a single variable" (p. 37). The example Scott gives is pretty clear.
`
md`**Attention**: \`[a,b]\` here doesn't mean all the numbers between \`a\` and \`b\`. It simply means \`a\` and \`b\`. `
d3.max(dataset, function(d) {
return d[0];
}); //p.121
md` My understanding of the code above:
My understanding: the data, i.e., array, will come from \`dataset\`, one at a time. For each array (the first being [5,20], and the last being [220,88]), the anonymous function will "take" the array first, and then give the output: the first number in the array, i.e., 5, 480, 250, 100, 330,... And then the \`max()\` function will tell us which one number is the largest among all the numbers in the output.
`
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.