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 Five, 29 Aug 2020Day Four, 28 Aug 2020Day 1 & Day 2, 25 Aug. & 26 Aug., 2020, Basic Commands
Day Three, 27 Aug 2020
md`# Day Three, 27 Aug 2020
I am learning Shirley Wu's *[Introduction to SVG and D3.js](https://observablehq.com/@sxywu/introduction-to-svg-and-d3-js)*`
html`
<svg width=100 height=100 style='overflow: visible; margin: 5px;'>
<path d='M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
`
import {penguins} from "@enjalot/palmer-penguins"
html`
<div style="height:2em; padding:.5em; background:#C39BD3;">
<h2 style="color:white;">Hello ! I am some HTML code page inside Observable</h2>
</div>
`
md `if you are not familiar with \`padding\`, read [here](https://www.w3schools.com/css/css_padding.asp).`
//Writing SVG code is exacly like writing HTML code.
html`
<svg width="200" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:pink;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
`
function Program(name) {
return `Program: ${name}`;
}
Program("What's your name?")
d3 = require("d3@6")
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
DOM.download(new Blob([d3.csvFormat(flare)], {type:"text/csv"}),"flare.csv")
ArrayofData = [5, 10, 15, 20, 25]
//{
// const D3DataConnection = d3.select(p).select
md` While I am doing this, I came across these tutorials:
- [Interactive Data Visualization for the Web](https://alignedleft.com/work/d3-book)
- [Intro to D3.js by Square](http://square.github.io/intro-to-d3/)
- [Dashing D3.js](http://square.github.io/intro-to-d3/)
- [D3 in Depth](https://www.d3indepth.com/)`
md`
- URL: Uniform Resource Locator
- HTTP: Hypertext Transfer Protocol
`
html`
<p> This is a <em>really</em> interesting post! </p>
`
html`
<h1>Amazing Visualization Tool Cures All Ills</h1>
<p>A new open-source tool designed for visualization of data turns out to have an unexpected, positive side effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms:</p>
<ul>
<li>fevers</li> <li>chills</li> <li>general malaise</li>
</ul>
<p>It achieves this end with a patented, three-step process.</p> <ol>
<li>Load in data.</li>
<li>Generate a visual representation.</li> <li>Activate magic healing function.</li>
</ol>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
