diff --git a/_includes/head.html b/_includes/head.html index bd5cedb..5fff0ee 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -8,4 +8,5 @@ + diff --git a/css/syntax.css b/css/syntax.css new file mode 100644 index 0000000..2774b76 --- /dev/null +++ b/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/index.md b/index.md index 3c6bd4f..19f4cbf 100644 --- a/index.md +++ b/index.md @@ -5,14 +5,14 @@ title: Overview In this course, we're going to provide a quick intro to [D3.js](http://d3js.org/). It's a Javascript library with a lot of little pieces -and we use it for creating data visualizations in the browser. It. relies a lot +and we use it for creating data visualizations in the browser. It relies a lot on web standards. -A good way to approach D3 is that it's a library that helps by +A good way to approach D3 is a library that helps by "automating the hard bits you already understand" as opposed to "hiding the hard -bits" (hat tip [@andy_matuschak](https://twitter.com/andy_matuschak/status/365547794129358849)) +bits" (hat tip [@andy_matuschak](https://twitter.com/andy_matuschak/status/365547794129358849)). -This is not a deep-dive, this is a quick tour. The goal here is to learn how to +This is a quick tour, not a deep-dive. The goal here is to learn how to learn D3, not to learn everything at once. -Let's get started! \ No newline at end of file +Let's get started! diff --git a/z01-web-standards.md b/z01-web-standards.md index 6a6a4ce..38b61d6 100644 --- a/z01-web-standards.md +++ b/z01-web-standards.md @@ -4,6 +4,41 @@ title: Web Standards permalink: /web-standards/ --- +Like we mentioned, D3 takes advantage of a lot of web standards. + +- [HTML](#html) +- [CSS](#css) +- [The DOM](#the-dom) +- [SVG](#svg) + +### HTML + +HTML (HyperText Markup Language) is a text format that most web pages are +written in. It's loosely related to the XML family, but much less strict (for +example some tags such as `
` don't need matching closing tags. + +The basic outline of an HTML page is something like this: + +{% highlight html %} + + + + TITLE GOES HERE + + + MAIN CONTENT GOES HERE + + +{% endhighlight %} + +### CSS + +CSS (Cascading Stylesheets) is a language for styling web pages. + +### The DOM + +### SVG + like a whirlwind tour of web standards, these are the hard bits you already understand (or if you don’t, it’s ok! you can pick this stuff up pretty quicky HTML/CSS