Real-world problems
43 |We will take applications such as climate change and show how you can participate in the big open source community looking to find solutions to challenging problems with exposure to github and parallel computing.
44 |Go to course website :balloon:
4 | 5 | Welcome to **MIT 18.C25 aka 6.C25**, **Fall 2024** edition! 6 | _For older semesters, see: 7 | - Fall 2023: [source code](https://github.com/mitmath/18S191/tree/Fall23) and [website](https://computationalthinking.mit.edu/Fall24/semesters/) 8 | - Fall 2022: [source code](https://github.com/mitmath/18S191/tree/Fall22) and [website](https://computationalthinking.mit.edu/Fall24/semesters/) 9 | - Spring 2021: [source code](https://github.com/mitmath/18S191/tree/Fall24) and [website](https://computationalthinking.mit.edu/Fall24/semesters/) 10 | - Fall 2020: [source code](https://github.com/mitmath/18S191/tree/Fall20) and [website](https://computationalthinking.mit.edu/Fall24/semesters/) 11 | - Spring 2020: [website](https://computationalthinking.mit.edu/Fall24/semesters/) 12 | - Fall 2019: [source code](https://github.com/dpsanders/6.S083_fall_2019/tree/fall_2019) 13 | 14 | This is an introductory course on Computational Thinking. We use the [Julia programming language](http://www.julialang.org) to approach real-world problems in varied areas applying data analysis and computational and mathematical modeling. In this class you will learn computer science, software, algorithms, applications, and mathematics as an integrated whole. 15 | 16 | Topics include: 17 | 18 | - Image analysis 19 | - Machine Learning 20 | - Network theory 21 | - Climate modeling 22 | 23 | # Go to [computationalthinking.mit.edu](https://computationalthinking.mit.edu/) to learn more! 24 | -------------------------------------------------------------------------------- /src/assets/mitx_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 30 | -------------------------------------------------------------------------------- /src/assets/discord_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 25 | -------------------------------------------------------------------------------- /src/logistics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Class logistics" 3 | tags: ["welcome"] 4 | order: 3 5 | layout: "md.jlmd" 6 | --- 7 | 8 | 14 | 15 | # Course logistics 16 | 17 | [](https://discord.gg/Z5qnVf8) 18 | 19 | ### MIT Students Only 20 | [](https://zoom.us/j/96183959527) 21 | [](https://piazza.com/mit/spring2021/6s083) 22 | [](https://canvas.mit.edu/courses/7590) 23 | [](https://lms.mitx.mit.edu/courses/course-v1:MITx+6.S083r+2021_Spring/course/) 24 | 25 | > **Suggestion**: Bookmark this page for easy access to everything you need to follow this class! 26 | 27 | Counts as 6.0001 and 6.0002 credit, or can be taken in addition. Counts as a course 28 | 6 elective. 29 | 30 | Course materials will be published on this website on **Monday 1:00pm**. Each week is a new _chapter_, which includes: 31 | 32 | - Asynchronous video lectures _(total 60 minutes)_ 33 | - Interactive visualizations 34 | - Exercises 35 | 36 | ## Live lectures 37 | 38 | On **Monday 1:00pm - 2:30pm**, after the material is published, there will also be: 39 | 40 | - Q&A on Discord 41 | - Live overview lecture _(30 minutes)_ 42 | 43 | On **Wednesday 1:00pm 2:30pm** _(MIT students only)_, you will meet with fellow students and your TA to: 44 | 45 | - Review the lecture 46 | - Work on problem sets in small groups or individually, with the opportunity to ask questions to your TA 47 | 48 | Start date: February 16, 2021 49 | 50 | ## Discussion forum and homework submission 51 | 52 | - [Discord](https://discord.gg/Z5qnVf8): discussion (we encourage you to hang out here during class!) 53 | 54 | - MIT Only: [Canvas](https://canvas.mit.edu/courses/7590): Homework submissions, Piazza Link. If you're a non-MIT student, don't worry, the **homework has built-in answers checks**, or you can find a partner to cross-grade homeworks via Discord. 55 | 56 | ## Evaluation 57 | 58 | The final grade is 80% problem sets, and 20% MITx _quick questions_. 59 | 60 | - Problem sets are released on Friday and due the following Friday by 11:59pm EST. They have equal weight; your lowest score will be dropped. 61 | 62 | - [MITx](https://lms.mitx.mit.edu/courses/course-v1:MITx+6.S083r+2021_Spring/course/) exercises (_quick questions_) are due before Wednesday (11:59pm), but are best done on Monday, during or right after the lectures. 63 | -------------------------------------------------------------------------------- /.github/workflows/ExportNotebooks.yml: -------------------------------------------------------------------------------- 1 | name: Fall 24 - Export Pluto notebooks & Deploy 2 | on: 3 | push: 4 | branches: 5 | - Fall24 6 | workflow_dispatch: 7 | concurrency: 8 | group: export 9 | cancel-in-progress: true 10 | 11 | jobs: 12 | build-and-deploy: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout Fall 24 source 16 | uses: actions/checkout@v5 17 | 18 | - name: 🙌 Install Julia 19 | uses: julia-actions/setup-julia@v2 20 | with: 21 | version: "1.10.4" 22 | 23 | - name: ⏱ Cache notebook states 24 | uses: actions/cache@v4 25 | with: 26 | path: _cache 27 | key: ${{ runner.os }}-pluto_state_cache-v3-${{ hashFiles('**/Project.toml', '**/Manifest.toml') }}-${{ github.run_id }} 28 | restore-keys: | 29 | ${{ runner.os }}-pluto_state_cache-v3-${{ hashFiles('**/Project.toml', '**/Manifest.toml') }} 30 | 31 | - name: ⏱ Cache .julia 32 | uses: actions/cache@v4 33 | with: 34 | path: ~/.julia 35 | key: ${{ runner.os }}-dotjulia-v1-${{ hashFiles('**/Project.toml', '**/Manifest.toml') }}-${{ github.run_id }} 36 | restore-keys: | 37 | ${{ runner.os }}-dotjulia-v1-${{ hashFiles('**/Project.toml', '**/Manifest.toml') }} 38 | 39 | - name: 📅 Checkout Fall20, Spring21, Fall22, Fall23 output 40 | uses: actions/checkout@v4 41 | with: 42 | path: Fall23-output 43 | ref: Fall23-output 44 | 45 | - name: 🪴 Generate site 46 | run: | 47 | julia --project=pluto-deployment-environment -e ' 48 | import Pkg 49 | Pkg.instantiate() 50 | import PlutoPages 51 | 52 | PlutoPages.generate("."; html_report_path="generation_report.html") 53 | 54 | cp("./netlify.toml", "./_site/netlify.toml")' 55 | env: 56 | JULIA_PKG_SERVER: "" 57 | 58 | 59 | - name: 📰 Upload site generation report 60 | uses: actions/upload-artifact@v4 61 | if: always() 62 | with: 63 | path: generation_report.html 64 | 65 | - name: 🔀 Combine semesters into single site 66 | run: | 67 | mkdir www 68 | mv Fall23-output/Fall20/ www/Fall20 69 | mv Fall23-output/Spring21/ www/Spring21 70 | mv Fall23-output/Fall22/ www/Fall22 71 | mv Fall23-output/Fall23/ www/Fall23 72 | mv _site www/Fall24 73 | mv extra_outputs/* www 74 | 75 | - name: 🚀 Deploy to GitHub Pages 76 | uses: JamesIves/github-pages-deploy-action@v4 77 | with: 78 | token: ${{ secrets.GITHUB_TOKEN }} 79 | branch: Fall24-output 80 | folder: www 81 | -------------------------------------------------------------------------------- /src/reviews.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Class reviews" 3 | tags: ["welcome"] 4 | order: 2.2123 5 | layout: "md.jlmd" 6 | --- 7 | 8 | 9 | # Student feedback 10 | 11 | 12 |
13 |
14 | $(let
15 | feedback = [
16 | (
17 | "Applications Feedback",
18 | "Spring 2020",
19 | @htl("
55 |
56 | # What other people are saying
57 |
58 | The Introduction to Computational Thinking with Julia class is a welcome departure from the paradigm of teaching the canonical computer science examples such as sorting algorithms and graph search that are often overused in introductory curricula.
The class delves into real-world applications from the very beginning in a way that gives students an opportunity to be excited about the possibilities of computer science and mathematical modelling all while learning how to harness the power and elegance of the modern language of Julia.
"), 20 | ), 21 | ( 22 | "Class Feedback", 23 | "Spring 2020", 24 | @htl("This is one of the best classes I have ever taken. I like how the content is divided into four main real-world applications of computational thinking, which made learning very enjoyable and also made working with Julia easier for me.
I also found it amazing that this class provided applications of topics in differential equations and linear algebra classes and added a new way to view them. Unfortunately, I haven't found a similar class on computational thinking for the spring as the skills I gain are very practical and needed in research (I was impressed by the number of MISTI research opportunities that asked for experience with agent-based modeling or modeling in general.)
"), 25 | ), 26 | ( 27 | "Website Feedback", 28 | "Spring 2020", 29 | @htl("The class website made the class lectures and homework easy to find in addition to the GitHub page and canvas. - The Discord channel and Piazza also made it easier to ask questions and see other students' questions and comments. - The feedback for assignments was very clear, and the instructors were willing to explain my mistakes further by email.
"), 30 | ), 31 | ( 32 | "Lecture Feedback", 33 | "Spring 2020", 34 | @htl("The synchronous lectures were very comfortable, and the instructors encouraged us to ask questions.
"), 35 | ) 36 | ] 37 | 38 | [ 39 | @htl(""" 40 |
41 |
49 | """)
50 | for f in feedback
51 | ]
52 | end)
53 |
54 |
42 |
48 | $(f[1]) 43 |
44 |$(f[2])
45 |
46 | $(f[3])
47 | MIT's Free Online Course to Learn Julia — The Rising Star — Review of 18.S191 by Towards AI Newsletter59 | 60 |
61 | 62 |the course is exceptional🎇🎇🎇
— YT Cai (@Yitao_CAI) December 15, 2020
63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/assets/homepage/bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Website maintenance.md: -------------------------------------------------------------------------------- 1 | # Website maintenance 2 | 3 | This document describes how the website works. 4 | 5 | # Overview 6 | 7 | This is the source code for the computational thinking website! It uses a site generation system inspired by [https://www.11ty.dev/](https://www.11ty.dev/), but there are only three template systems: 8 | - **`.jlhtml` files** are rendered by [HypertextLiteral.jl](https://github.com/JuliaPluto/HypertextLiteral.jl) 9 | - **`.jlmd` files** are rendered by [MarkdownLiteral.jl](https://github.com/JuliaPluto/MarkdownLiteral.jl) 10 | - **`.jl` files** are rendered by [PlutoSliderServer.jl](https://github.com/JuliaPluto/PlutoSliderServer.jl) 11 | 12 | The `/src/` folder is scanned for files, and all files are turned into HTML pages. 13 | 14 | Paths correspond to URLs. For example, `src/data_science/pca.jl` will become available at `https://computationalthinking.mit.edu/data_science/pca/`. For files called *"index"*, the URL will point to its parent, e.g. `src/docs/index.jlmd` becomes `https://computationalthinking.mit.edu/docs/`. Remember that changing URLs is very bad! You can't share this site with your friends if the links break. 15 | 16 | > **To add something to our website, just create a new file!** Fons will be happy to figure out the technical bits. 17 | 18 | You can generate & preview the website locally (more on this later), and we have a github action generating the website when we push to the `Fall23` branch. The result (in the `Fall23-output` branch) is deployed with GitHub Pages. 19 | 20 | # Content 21 | 22 | ## Literal templates 23 | We use *Julia* as our templating system! Because we use HypertextLiteral and MarkdownLiteral, you can write regular Markdown files and HTML files, but you can also include `$(interpolation)` to spice up your documents! For example: 24 | 25 | ```markdown 26 | # Hey there! 27 | 28 | This is some *text*. Here is a very big number: $(1 + 1). 29 | ``` 30 | 31 | Besides small inline values, you can also write big code blocks, with `$(begin ... end)`, and you can output HTML. Take a look at some of our files to learn more! 32 | 33 | ## Pluto notebooks 34 | 35 | Pluto notebooks will be rendered to HTML and included in the page. What you see is what you get! 36 | 37 | On a separate system, we are running a PlutoSliderServer that is synchronized to the `Fall23` brach. This makes our notebooks interactive! 38 | 39 | Notebook outputs are **cached** (for a long time) by the file hash. This means that a notebook file will only ever run once, which makes it much faster to work on the website. If you need to re-run your notebook, add a space somewhere in the code :) 40 | 41 | ## `.css`, `.html`, `.gif`, etc 42 | 43 | Web assets go through the system unchanged. 44 | 45 | # Front matter 46 | 47 | Like many SSG systems, we use [*front matter*](https://www.11ty.dev/docs/data-frontmatter/) to add metadata to pages. In `.jlmd` files, this is done with a front matter block, e.g.: 48 | ```markdown 49 | --- 50 | title: "🌼 How to install" 51 | description: "Instructions to install Pluto.jl" 52 | tags: ["docs", "introduction"] 53 | layout: "md.jlmd" 54 | --- 55 | 56 | # Let's install Pluto 57 | 58 | here is how you do it 59 | ``` 60 | 61 | Every page **should probably** include: 62 | - *`title`*: Will be used in the sidebar, on Google, in the window header, and on social media. 63 | - *`description`*: Will be used on hover, on Google, and on social media. 64 | - *`tags`*: List of *tags* that are used to create collections out of pages. Our sidebar uses collections to know which pages to list. (more details in `sidebar data.jl`) 65 | - *`layout`*: The name of a layout file in `src/_includes`. For basic Markdown or HTML, you probably want `md.jlmd`. For Pluto, you should use `layout.jlhtml`. 66 | 67 | ## How to write front matter 68 | For `.jlmd` files, see the example above. 69 | 70 | For `.jl` notebooks, use the [Frontmatter GUI](https://github.com/fonsp/Pluto.jl/pull/2104) built into Pluto. 71 | 72 | For `.jlhtml`, we still need to figure something out 😄. 73 | 74 | # Running locally 75 | 76 | ## Developing *content, styles, etc.* 77 | 78 | Open this repository in VS Code, and install the recommended extensions. 79 | 80 | To start running the development server, open the VS Code *command palette* (press `Cmd+Shift+P`), and search for **`Tasks: Run Task`**, then **`PlutoPages: run development server`**. The first run can take some time, as it builds up the notebook outputs cache. Leave it running. 81 | 82 | This will start two things in parallel: the PlutoPages.jl development server (which generates the static website), and a static file server (with LiveServer.jl). It will open two tabs in your browser: one is the generation dashboard (PlutoPages.jl), the other is the current site preview (LiveServer.jl). 83 | 84 | Whenever you edit a file, PlutoPages will automatically regenerate! Refresh your browser tab. If it does not pick up the change, go to the generation dashboard and click the "Read input files again" button. 85 | 86 | This workflow is recommended for writing static content, styles, and for site maintenance. But for writing Pluto notebooks, it's best to prepare the notebook first, and then run the site (because it re-runs the entire notebook on any change). 87 | -------------------------------------------------------------------------------- /src/assets/piazza_logo.svg: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /src/assets/styles/layout.css: -------------------------------------------------------------------------------- 1 | /* COLOR */ 2 | 3 | #pages-layout { 4 | /* --bg-color: set by pluto */ 5 | --sidebar-bg: #fafafa; 6 | --sidebar-color: rgb(82, 82, 82); 7 | --sidebar-li-active-bg: rgb(235, 235, 235); 8 | --sidebar-li-hover-bg: rgb(247, 240, 190); 9 | } 10 | @media (prefers-color-scheme: dark) { 11 | #pages-layout { 12 | --sidebar-bg: #303030; 13 | --sidebar-color: rgb(255, 255, 255); 14 | --sidebar-li-active-bg: rgb(82, 82, 82); 15 | --sidebar-li-hover-bg: rgb(108, 94, 70); 16 | } 17 | } 18 | 19 | /* LAYOUT */ 20 | 21 | #pages-layout { 22 | display: flex; 23 | flex-direction: row; 24 | min-height: 100vh; 25 | align-items: stretch; 26 | } 27 | 28 | #pages-sidebar { 29 | font-family: system-ui, sans-serif; 30 | flex: 0 0 auto; 31 | width: 15rem; 32 | font-weight: 400; 33 | z-index: 1900; 34 | } 35 | 36 | #pages-content { 37 | display: block; 38 | flex: 1 1 auto; 39 | min-width: 0; 40 | } 41 | 42 | #pages-sidebar > div { 43 | margin: 1rem; 44 | margin-right: 0; 45 | padding: 0.5rem; 46 | /* padding-bottom: 2rem; */ 47 | border-radius: 1rem; 48 | background: var(--sidebar-bg); 49 | color: var(--sidebar-color); 50 | } 51 | 52 | #toggle-nav { 53 | display: none; 54 | cursor: pointer; 55 | } 56 | 57 | /* SIDEBAR COLLAPSING */ 58 | 59 | #pages-content::after { 60 | content: ""; 61 | z-index: 23400; 62 | touch-action: none; 63 | pointer-events: none; 64 | position: fixed; 65 | top: 0; 66 | left: 0; 67 | right: 0; 68 | bottom: 0; 69 | transition: background-color 0.2s ease-out; 70 | } 71 | 72 | @media screen and (max-width: 768px) { 73 | #pages-layout { 74 | flex-direction: column; 75 | } 76 | #toggle-nav { 77 | display: inline-flex; 78 | align-self: start; 79 | border: none; 80 | background: none; 81 | } 82 | #toggle-nav::after { 83 | --size: 40px; 84 | content: " "; 85 | display: inline-block; 86 | width: var(--size); 87 | height: var(--size); 88 | background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/menu-outline.svg); 89 | background-size: var(--size) var(--size); 90 | filter: var(--image-filters); 91 | } 92 | #pages-sidebar { 93 | position: fixed; 94 | top: 0; 95 | bottom: 0; 96 | right: 100%; 97 | overflow-y: auto; 98 | transition: transform 300ms cubic-bezier(0.18, 0.89, 0.45, 1.12); 99 | } 100 | @media (prefers-reduced-motion) { 101 | #pages-sidebar { 102 | transition: none; 103 | } 104 | } 105 | 106 | .pages_show_sidebar #pages-sidebar { 107 | transform: translateX(100%); 108 | z-index: 23401; 109 | } 110 | .pages_show_sidebar #pages-content::after { 111 | display: block; 112 | background-color: rgba(0, 0, 0, 0.5); 113 | } 114 | } 115 | 116 | /* SIDEBAR */ 117 | 118 | #pages-sidebar { 119 | --child-padding: 0.2em 0.6em; 120 | --border-radius: 0.5em; 121 | } 122 | 123 | #pages-sidebar > div > ul { 124 | margin-block-start: 0px; 125 | margin-block-end: 0px; 126 | } 127 | 128 | #pages-sidebar li, 129 | #pages-sidebar ul { 130 | padding: 0px; 131 | list-style-type: none; 132 | } 133 | 134 | #pages-sidebar a { 135 | color: unset; 136 | text-decoration: none; 137 | } 138 | 139 | #pages-sidebar li li a, 140 | #pages-sidebar li h3 { 141 | border-radius: var(--border-radius); 142 | padding: var(--child-padding); 143 | } 144 | 145 | #pages-sidebar li h3 { 146 | color: var(--sidebar-accent-1); 147 | font-variant-caps: all-petite-caps; 148 | margin-block-start: 3rem; 149 | margin-block-end: 0; 150 | } 151 | 152 | #pages-sidebar li hr { 153 | margin: 3rem 1rem; 154 | /* border-color: red; */ 155 | border-style: solid; 156 | opacity: 0.2; 157 | } 158 | 159 | #pages-sidebar li:first-of-type h3 { 160 | margin-block-start: 0; 161 | } 162 | 163 | #pages-sidebar li, 164 | #pages-sidebar ul { 165 | display: flex; 166 | flex-direction: column; 167 | align-items: stretch; 168 | } 169 | 170 | #pages-sidebar li li.homework { 171 | padding-left: 1ch; 172 | /* background: yellow; */ 173 | } 174 | 175 | #pages-sidebar li li a { 176 | margin: 0.2em 0; 177 | } 178 | 179 | #pages-sidebar li li.homework a { 180 | /* background: #ffb60012; */ 181 | margin: 0.4em 0px; 182 | outline: 3px dashed #92929278; 183 | outline-offset: -1px; 184 | } 185 | 186 | /* #pages-sidebar li li.homework a::before { 187 | content: "👉 "; 188 | } */ 189 | 190 | #pages-sidebar li li span.entry-number { 191 | opacity: 0.6; 192 | } 193 | #pages-sidebar li li.homework span.entry-number { 194 | display: block; 195 | } 196 | 197 | #pages-sidebar li li.active a { 198 | background-color: var(--sidebar-li-active-bg); 199 | } 200 | #pages-sidebar li li:hover a { 201 | background-color: var(--sidebar-li-hover-bg); 202 | } 203 | #pages-sidebar li li.not_in_track { 204 | opacity: 0.4; 205 | } 206 | 207 | /* TRACK CHOOSER */ 208 | 209 | .track-chooser { 210 | margin-top: 3em; 211 | padding: 0.5em; 212 | border: 3px solid var(--track-bg-accent); 213 | background: var(--track-bg); 214 | color: var(--fg); 215 | border-radius: 0.3em; 216 | display: flex; 217 | flex-direction: column; 218 | align-items: center; 219 | } 220 | 221 | .track-chooser h2:not(#asdf) { 222 | font-weight: 900; 223 | font-family: sans-serif; 224 | font-style: normal; 225 | font-size: 1.2rem; 226 | margin-block-end: 0.3em; 227 | margin-block-start: 0; 228 | } 229 | 230 | .track-chooser label { 231 | display: contents; 232 | } 233 | 234 | .track-chooser select { 235 | max-width: 100%; 236 | } 237 | 238 | /* SIDEBAR LOGO */ 239 | 240 | #pages-sidebar .home_link img { 241 | height: 1.2em; 242 | width: 1.2em; 243 | } 244 | #pages-sidebar a.home_link { 245 | font-size: 1.7rem; 246 | padding: 0.3em; 247 | font-weight: 800; 248 | display: flex; 249 | flex-direction: row; 250 | align-items: center; 251 | gap: 0.5ch; 252 | } 253 | 254 | /* Markdown content */ 255 | 256 | .pages-markdown main { 257 | max-width: 700px; 258 | margin-left: auto; 259 | margin-right: auto; 260 | margin-top: 5rem; 261 | } 262 | -------------------------------------------------------------------------------- /src/assets/julia-logo-color.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /src/assets/julia-logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /src/assets/scripts/search.js: -------------------------------------------------------------------------------- 1 | const root_href = document.head.querySelector("link[rel='root']").getAttribute("href") 2 | 3 | const minby = (arr, fn) => arr.reduce((a, b) => (fn(a) < fn(b) ? a : b)) 4 | const maxby = (arr, fn) => arr.reduce((a, b) => (fn(a) > fn(b) ? a : b)) 5 | const range = (length) => [...Array(length).keys()] 6 | 7 | const sortby = (arr, fn) => arr.sort((a, b) => fn(a) - fn(b)) 8 | 9 | const setup_search_index = async () => { 10 | const search_data_href = document.head.querySelector("link[rel='pp-search-data']").getAttribute("href") 11 | console.log(search_data_href) 12 | 13 | const search_data = await (await fetch(search_data_href)).json() 14 | window.search_data = search_data 15 | 16 | console.log(search_data) 17 | 18 | // create a search bar powered by lunr 19 | // const search_bar = document.createElement('div') 20 | // search_bar.id = 'search-bar' 21 | // search_bar.innerHTML = ` 22 | // 23 | // 24 | // ` 25 | // document.body.appendChild(search_bar) 26 | 27 | // create a search index 28 | const before = Date.now() 29 | const search_index = window.lunr(function () { 30 | this.ref("url") 31 | 32 | this.field("title", { boost: 10 }) 33 | this.field("tags", { boost: 5 }) 34 | this.field("text") 35 | this.metadataWhitelist = ["position"] 36 | search_data.forEach(function (doc) { 37 | this.add(doc) 38 | }, this) 39 | }) 40 | const after = Date.now() 41 | console.info(`lunr: Indexing ${search_data.length} documents took ${after - before}ms`) 42 | window.search_index = search_index 43 | 44 | return { search_data, search_index } 45 | } 46 | 47 | const excerpt_length = 200 48 | const excerpt_padding = 50 49 | 50 | const init_search = async () => { 51 | const query = new URLSearchParams(window.location.search).get("q") 52 | console.warn({ query }) 53 | 54 | document.querySelector(".search-bar.big input").value = query 55 | 56 | const { search_data, search_index } = await setup_search_index() 57 | 58 | if (query) { 59 | const results = search_index.search(query) 60 | console.log(results) 61 | 62 | const search_results = document.getElementById("search-results") 63 | 64 | if (results.length !== 0) { 65 | search_results.innerHTML = "" 66 | results.forEach((result) => { 67 | const { url, title, tags, text } = search_data.find((doc) => doc.url === result.ref) 68 | const result_div = document.createElement("a") 69 | result_div.classList.add("search-result") 70 | result_div.innerHTML = ` 71 | 72 | 73 | 74 | ` 75 | console.log(root_href) 76 | result_div.querySelector(".title").innerText = title 77 | result_div.href = new URL(url, new URL(root_href, window.location.href)).href 78 | result_div.querySelector(".tags").innerText = tags.join(", ") 79 | result_div.querySelector(".snippet").innerText = text.substring(0, excerpt_length) + "..." 80 | 81 | const text_match_positions = Object.values(result?.matchData?.metadata ?? {}) 82 | .flatMap((z) => z?.text?.position ?? []) 83 | .sort(([a, _a], [b, _b]) => a - b) 84 | const title_match_positions = Object.values(result?.matchData?.metadata ?? {}) 85 | .flatMap((z) => z?.title?.position ?? []) 86 | .sort(([a, _a], [b, _b]) => a - b) 87 | 88 | console.error(title_match_positions) 89 | if (title_match_positions.length > 0) { 90 | const strong_el = document.createElement("strong") 91 | strong_el.innerText = title 92 | result_div.querySelector(".title").innerHTML = `` 93 | result_div.querySelector(".title").appendChild(strong_el) 94 | } 95 | 96 | if (text_match_positions.length > 0) { 97 | // console.log(text_match_positions) 98 | // console.log(find_longest_run(text_match_positions, 50)) 99 | // console.log(find_longest_run(text_match_positions, 100)) 100 | // console.log(find_longest_run(text_match_positions, 200)) 101 | // console.log(find_longest_run(text_match_positions, 300)) 102 | // console.log(find_longest_run(text_match_positions, 400)) 103 | 104 | const [start_index, num_matches] = find_longest_run(text_match_positions, excerpt_length) 105 | 106 | const excerpt_start = text_match_positions[start_index][0] 107 | const excerpt_end = excerpt_start + excerpt_length 108 | 109 | const highlighted_ranges = text_match_positions.slice(start_index, start_index + num_matches) 110 | 111 | const elements = highlighted_ranges.flatMap(([h_start, h_length], i) => { 112 | const h_end = h_start + h_length 113 | const word = text.slice(h_start, h_end) 114 | const filler = text.slice(h_end, highlighted_ranges[i + 1]?.[0] ?? excerpt_end) 115 | const word_el = document.createElement("strong") 116 | word_el.innerText = word 117 | return [word_el, filler] 118 | }) 119 | 120 | const snippet_p = result_div.querySelector(".snippet") 121 | snippet_p.innerHTML = `` 122 | ;["...", text.slice(excerpt_start - excerpt_padding, excerpt_start).trimStart(), ...elements, "..."].forEach((el) => snippet_p.append(el)) 123 | } 124 | 125 | // text_match_positions.slice(start_index, start_index + num_matches).forEach(([start, length]) => { 126 | 127 | search_results.appendChild(result_div) 128 | }) 129 | } else { 130 | search_results.innerText = `No results found for "${query}"` 131 | } 132 | } 133 | } 134 | 135 | const count = (arr, fn) => arr.reduce((a, b) => fn(a) + fn(b), 0) 136 | 137 | const find_longest_run = (/** @type{Array<[number, number]>} */ positions, max_dist) => { 138 | const legal_run_size = (start_index) => 139 | positions.slice(start_index).filter(([start, length]) => start + length < positions[start_index][0] + max_dist).length 140 | 141 | console.warn(range(positions.length).map(legal_run_size)) 142 | 143 | const best_start = maxby(range(positions.length), legal_run_size) 144 | const best_length = legal_run_size(best_start) 145 | return [best_start, best_length] 146 | } 147 | 148 | window.init_search = init_search 149 | -------------------------------------------------------------------------------- /src/assets/styles/homepage.css: -------------------------------------------------------------------------------- 1 | @import url("newdefault.css"); 2 | 3 | body { 4 | background: url("../homepage/bg.svg"); 5 | background-color: hsl(231deg 14% 57%); 6 | background-size: cover; 7 | backdrop-filter: blur(3vw); 8 | } 9 | main h1 { 10 | font-family: "Vollkorn", serif; 11 | font-weight: 800; 12 | font-style: italic; 13 | margin-block-end: 0.5em; 14 | font-size: 3rem; 15 | margin-block-start: 0; 16 | border-bottom: 5px solid #74747414; 17 | letter-spacing: -0.2px; 18 | color: #424250; 19 | padding: 0px 10px; 20 | text-shadow: 7px 5px 0px #e5dbb8; 21 | } 22 | 23 | a { 24 | text-decoration: none; 25 | /* background: #f3f3ff; */ 26 | /* border: 3px solid; */ 27 | color: black; 28 | /* border-bottom: 0.2em solid rgba(0, 0, 0, 0.3); */ 29 | } 30 | .homepage a:not(.no-decoration) { 31 | background-position: 0 0.83em; 32 | background-repeat: repeat-x; 33 | background-size: 2px 8px; 34 | background-image: linear-gradient(to bottom, rgba(165, 213, 235, 0.3) 33%, rgba(165, 213, 235, 0.3)); 35 | /* text-shadow: 2px 2px white, 2px -2px white, -2px 2px white, -2px -2px white; */ 36 | transition: background-position 50ms linear, background-size 50ms linear; 37 | } 38 | 39 | a:hover { 40 | background-position: 0 0em; 41 | background-size: 2px auto; 42 | } 43 | 44 | div.banner { 45 | min-height: 20rem; 46 | display: grid; 47 | place-items: center; 48 | } 49 | 50 | div.banner h1 { 51 | transform: perspective(187px) rotate3d(0, 2, 0, 0deg); 52 | font-family: "Alegreya", sans-serif; 53 | background: #000000ad; 54 | padding: 0.2em 0.5em; 55 | margin: 0px 10px; 56 | border-radius: 0.4em; 57 | transition: transform 200ms ease-in-out; 58 | color: #ffffffc7; 59 | font-style: normal; 60 | border: none; 61 | backdrop-filter: blur(6px); 62 | /* flex: 1 1 auto; */ 63 | /* display: block; */ 64 | } 65 | div.banner h1 strong { 66 | color: white; 67 | } 68 | 69 | div.banner:hover h1 { 70 | /* transform: perspective(187px) rotate3d(0, 2, 0, 3deg) scale(1.05); */ 71 | } 72 | 73 | #title { 74 | background-image: url("../homepage/swoosh.png"); 75 | 76 | background-size: cover; 77 | image-rendering: pixelated; 78 | } 79 | 80 | img.logo { 81 | position: absolute; 82 | top: 5px; 83 | left: 5px; 84 | z-index: 10; 85 | height: 2rem; 86 | background: #ffffff96; 87 | padding: 3px; 88 | } 89 | 90 | .twocols { 91 | column-count: 2; 92 | color: #fffffff7; 93 | background: linear-gradient(155deg, #7c7e87, #5a594a); 94 | } 95 | 96 | main { 97 | /* background: white; */ 98 | padding: 1em; 99 | max-width: 86rem; 100 | z-index: -1; 101 | margin: 3em auto 0 auto; 102 | } 103 | main > div { 104 | z-index: 4; 105 | background: white; 106 | padding: 2rem; 107 | margin-block-end: 15rem; 108 | border-radius: 1rem; 109 | box-shadow: 0px 6px 7px #1c12120d; 110 | 111 | max-width: 700px; 112 | margin-left: auto; 113 | margin-right: auto; 114 | } 115 | 116 | main > div.wide { 117 | max-width: unset; 118 | } 119 | 120 | main > div:last-of-type { 121 | margin-block-end: 0px; 122 | } 123 | main > div > *:last-child, 124 | main > div > .contain > *:last-child { 125 | margin-block-end: 0px; 126 | margin-bottom: 0em; 127 | } 128 | main thingy { 129 | background: #ff00005e; 130 | width: 300vw; 131 | border-radius: 50%; 132 | height: 60vh; 133 | display: block; 134 | /* position: unset; */ 135 | z-index: -4; 136 | /* transform: translate(10px, -64px); */ 137 | /* transform: rotate(11deg); */ 138 | } 139 | .asdf { 140 | position: absolute; 141 | transform: translate(-); 142 | overflow: hidden; 143 | max-width: 100vw; 144 | } 145 | .contain { 146 | max-width: 700px; 147 | margin-left: auto; 148 | margin-right: auto; 149 | } 150 | 151 | blockquote { 152 | border-left: 0.6em solid #b97777; 153 | padding: 0.5em 1em; 154 | max-width: 30em; 155 | font-style: italic; 156 | background: #f9f9f9; 157 | font-size: 1rem; 158 | margin: 0 auto; 159 | } 160 | 161 | blockquote.banner { 162 | margin-top: -46px; 163 | font-style: unset; 164 | font-size: 1rem; 165 | border-radius: 0.5em; 166 | box-shadow: 0px 3px 17px #0000001a; 167 | } 168 | 169 | .pillars { 170 | display: flex; 171 | flex-direction: row; 172 | justify-content: space-between; 173 | overflow-x: auto; 174 | } 175 | 176 | .pillars > div { 177 | color: white; 178 | padding: 1em; 179 | background: #434366; 180 | min-height: 300px; 181 | flex: 1 1 33%; 182 | margin: 0px 10px; 183 | } 184 | 185 | .scrolly { 186 | /* max-height: 20em; */ 187 | /* overflow-y: auto; */ 188 | } 189 | .pillars > div ul { 190 | padding-left: 0.6rem; 191 | } 192 | .pillars > div li { 193 | list-style: "- "; 194 | margin-bottom: 0.3rem; 195 | margin-right: 0.5rem; 196 | } 197 | .pillars > div li::marker { 198 | color: rgba(255, 255, 255, 0.4); 199 | } 200 | 201 | .subjects { 202 | display: grid; 203 | grid-template-columns: repeat(3, auto); 204 | grid-gap: 1rem; 205 | /* display: flex; */ 206 | /* flex-wrap: wrap; */ 207 | } 208 | 209 | @media (max-width: 1350px) { 210 | .subjects { 211 | grid-template-columns: repeat(2, auto); 212 | } 213 | } 214 | @media (max-width: 850px) { 215 | .subjects { 216 | grid-template-columns: repeat(1, auto); 217 | } 218 | } 219 | 220 | @media (min-width: 1250px) { 221 | .subjectscontainer { 222 | display: flex; 223 | flex-direction: row; 224 | margin-block-start: 15rem; 225 | } 226 | 227 | .subjectscontainer h1 { 228 | flex-shrink: 0; 229 | position: sticky; 230 | top: 100px; 231 | align-self: flex-start; 232 | margin-block-start: 0px; 233 | /* padding-right: 0; */ 234 | margin-right: 1em; 235 | } 236 | } 237 | 238 | .subjects > a { 239 | display: block; 240 | border: 7px solid #c19d1c1f; 241 | min-height: 200px; 242 | min-width: min(90vw, 188px); 243 | padding: 1em; 244 | border-radius: 1em; 245 | transition: transform 100ms ease-in-out; 246 | /* width: 27%; */ 247 | box-shadow: 0px 6px 7px #1c12120d; 248 | } 249 | 250 | .subjects > a:hover { 251 | transform: scale(1.05); 252 | } 253 | 254 | .subjects > a img { 255 | max-width: 100%; 256 | width: 100%; 257 | } 258 | section { 259 | display: flex; 260 | flex-direction: row; 261 | background: linear-gradient(145deg, #a6b8ef, #daeaff); 262 | padding: 1em; 263 | background-repeat: repeat-x; 264 | border-radius: 1em; 265 | margin-bottom: 2em; 266 | } 267 | 268 | .shadow, 269 | section { 270 | box-shadow: 0px 6px 9px #0606060f; 271 | padding: 1rem; 272 | border-radius: 1rem; 273 | } 274 | 275 | @media (max-width: 500px) { 276 | section { 277 | flex-direction: column; 278 | } 279 | } 280 | 281 | section > div { 282 | flex: 1 1 60%; 283 | } 284 | 285 | section > div.content { 286 | margin-right: 1em; 287 | } 288 | section > div.preview { 289 | flex: 0 1 40%; 290 | } 291 | 292 | section > div.preview > img { 293 | width: 100%; 294 | } 295 | 296 | .github-logo { 297 | width: 1em; 298 | } 299 | 300 | .homepage, 301 | .banner { 302 | color: #3c3c3c; 303 | } 304 | -------------------------------------------------------------------------------- /src/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Software installation" 3 | tags: ["welcome"] 4 | order: 1 5 | layout: "md.jlmd" 6 | --- 7 | 8 | $( 9 | begin 10 | # these special elements will automatically update to read the latest Julia version. See the JavaScript snippet at the bottom of this page to see how it works! 11 | 12 | version = html"I cannot recommend this class enough, it’s awesome. https://t.co/4BsBEygeLd
— James Doss-Gollin (@jdossgollin) December 16, 2020
55 | julia> ]
56 |
57 | (@v$(pkg_version)) pkg>
58 |
66 | (@v$(pkg_version)) pkg> add Pluto
67 |
64 |
65 |
162 |
182 |
183 |
184 |
--------------------------------------------------------------------------------
/src/week0/basic_syntax.jl:
--------------------------------------------------------------------------------
1 | ### A Pluto.jl notebook ###
2 | # v0.19.45
3 |
4 | #> [frontmatter]
5 | #> title = "Julia syntax basics"
6 | #> layout = "layout.jlhtml"
7 | #> description = ""
8 | #> tags = ["track_julia", "track_climate", "track_data", "track_math"]
9 |
10 | using Markdown
11 | using InteractiveUtils
12 |
13 | # ╔═╡ 0d3aec92-edeb-11ea-3adb-cd0dc17cbdab
14 | md"# Get started with Julia - live
15 |
16 | Before being able to run this notebook successfully locally, you will need to [set up Julia and Pluto.](https://plutojl.org/#install)
17 | "
18 |
19 |
20 | # ╔═╡ 3b038ee0-edeb-11ea-0977-97cc30d1c6ff
21 | md"## Variables
22 |
23 | We can define a variable using `=` (assignment). Then we can use its value in other expressions:
24 | "
25 |
26 | # ╔═╡ 3e8e0ea0-edeb-11ea-22e0-c58f7c2168ce
27 | x = 3
28 |
29 |
30 | # ╔═╡ 59b66862-edeb-11ea-2d62-71dcc79dbfab
31 | y = 2x
32 |
33 | # ╔═╡ 5e062a24-edeb-11ea-256a-d938f77d7815
34 | md"By default Julia displays the output of the last operation. (You can suppress the output by adding `;` (a semicolon) at the end.)
35 | "
36 |
37 | # ╔═╡ 7e46f0e8-edeb-11ea-1092-4b5e8acd9ee0
38 | md"We can ask what type a variable has using `typeof`:"
39 |
40 | # ╔═╡ 8a695b86-edeb-11ea-08cc-17263bec09df
41 | typeof(y)
42 |
43 | # ╔═╡ 8e2dd3be-edeb-11ea-0703-354fb31c12f5
44 | md"## Functions"
45 |
46 | # ╔═╡ 96b5a28c-edeb-11ea-11c0-597615962f54
47 | md"We can use a short-form, one-line function definition for simple functions:"
48 |
49 | # ╔═╡ a7453572-edeb-11ea-1e27-9f710fd856a6
50 | f(x) = 2 + x
51 |
52 | # ╔═╡ b341db4e-edeb-11ea-078b-b71ac00089d7
53 | md"Typing the function's name gives information about the function. To call it we must use parentheses:"
54 |
55 | # ╔═╡ 23f9afd4-eded-11ea-202a-9f0f1f91e5ad
56 | f
57 |
58 | # ╔═╡ cc1f6872-edeb-11ea-33e9-6976fd9b107a
59 | f(10)
60 |
61 | # ╔═╡ ce9667c2-edeb-11ea-2665-d789032abd11
62 | md"For longer functions we use the following syntax with the `function` keyword and `end`:"
63 |
64 | # ╔═╡ d73d3400-edeb-11ea-2dea-95e8c4a6563b
65 | function g(x, y)
66 | z = x + y
67 | return z^2
68 | end
69 |
70 | # ╔═╡ e04ccf10-edeb-11ea-36d1-d11969e4b2f2
71 | g(1, 2)
72 |
73 | # ╔═╡ e297c5cc-edeb-11ea-3bdd-090f415685ab
74 | md"## For loops"
75 |
76 | # ╔═╡ ec751446-edeb-11ea-31ba-2372e7c71b42
77 | md"Use `for` to loop through a pre-determined set of values:"
78 |
79 | # ╔═╡ fe3fa290-edeb-11ea-121e-7114e5c573c1
80 | let s = 0
81 |
82 | for i in 1:10
83 | s += i # Equivalent to s = s + i
84 | end
85 |
86 | s
87 | end
88 |
89 | # ╔═╡ 394b0ec8-eded-11ea-31fb-27392068ef8f
90 | md"Here, `1:10` is a **range** representing the numbers from 1 to 10:"
91 |
92 | # ╔═╡ 4dc00908-eded-11ea-25c5-0f7b2b7e18f9
93 | typeof(1:10)
94 |
95 | # ╔═╡ 6c44abb4-edec-11ea-16bd-557800b5f9d2
96 | md"Above we used a `let` block to define a new local variable `s`.
97 | But blocks of code like this are usually better inside functions, so that they can be reused. For example, we could rewrite the above as follows:
98 | "
99 |
100 | # ╔═╡ 683af3e2-eded-11ea-25a5-0d90bf099d98
101 | function mysum(n)
102 | s = 0
103 |
104 | for i in 1:n
105 | s += i
106 | end
107 |
108 | return s
109 | end
110 |
111 | # ╔═╡ 76764ea2-eded-11ea-1aa6-296f3421de1c
112 | mysum(100)
113 |
114 | # ╔═╡ 93a231f4-edec-11ea-3b39-299b3be2da78
115 | md"## Conditionals: `if`"
116 |
117 | # ╔═╡ 82e63a24-eded-11ea-3887-15d6bfabea4b
118 | md"We can evaluate whether a condition is true or not by simply writing the condition:"
119 |
120 | # ╔═╡ 9b339b2a-eded-11ea-10d7-8fc9a907c892
121 | a = 3
122 |
123 | # ╔═╡ 9535eb40-eded-11ea-1651-e33c9c23dbfb
124 | a < 5
125 |
126 | # ╔═╡ a16299a2-eded-11ea-2b56-93eb7a1010a7
127 | md"We see that conditions have a Boolean (`true` or `false`) value.
128 |
129 | We can then use `if` to control what we do based on that value:"
130 |
131 | # ╔═╡ bc6b124e-eded-11ea-0290-b3760cb81024
132 | if a < 5
133 | "small"
134 |
135 | else
136 | "big"
137 |
138 | end
139 |
140 | # ╔═╡ cfb21014-eded-11ea-1261-3bc30952a88e
141 | md"""Note that the `if` also returns the last value that was evaluated, in this case the string `"small"` or `"big"`, Since Pluto is reactive, changing the definition of `a` above will automatically cause this to be reevaluated!"""
142 |
143 | # ╔═╡ ffee7d80-eded-11ea-26b1-1331df204c67
144 | md"## Arrays"
145 |
146 | # ╔═╡ cae4137e-edee-11ea-14af-59a32227de1b
147 | md"### 1D arrays (`Vector`s)"
148 |
149 | # ╔═╡ 714f4fca-edee-11ea-3410-c9ab8825d836
150 | md"We can make a `Vector` (1-dimensional, or 1D array) using square brackets:"
151 |
152 | # ╔═╡ 82cc2a0e-edee-11ea-11b7-fbaa5ad7b556
153 | v = [1, 2, 3]
154 |
155 | # ╔═╡ 85916c18-edee-11ea-0738-5f5d78875b86
156 | typeof(v)
157 |
158 | # ╔═╡ 881b7d0c-edee-11ea-0b4a-4bd7d5be2c77
159 | md"The `1` in the type shows that this is a 1D array.
160 |
161 | We access elements also using square brackets:"
162 |
163 | # ╔═╡ a298e8ae-edee-11ea-3613-0dd4bae70c26
164 | v[2]
165 |
166 | # ╔═╡ a5ebddd6-edee-11ea-2234-55453ea59c5a
167 | v[2] = 10
168 |
169 | # ╔═╡ a9b48e54-edee-11ea-1333-a96181de0185
170 | md"Note that Pluto does not automatically update cells when you modify elements of an array, but the value does change."
171 |
172 | # ╔═╡ 68c4ead2-edef-11ea-124a-03c2d7dd6a1b
173 | md"A nice way to create `Vector`s following a certain pattern is to use an **array comprehension**:"
174 |
175 | # ╔═╡ 84129294-edef-11ea-0c77-ffa2b9592a26
176 | v2 = [i^2 for i in 1:10]
177 |
178 | # ╔═╡ d364fa16-edee-11ea-2050-0f6cb70e1bcf
179 | md"## 2D arrays (matrices)"
180 |
181 | # ╔═╡ db99ae9a-edee-11ea-393e-9de420a545a1
182 | md"We can make small matrices (2D arrays) with square brackets too:"
183 |
184 | # ╔═╡ 04f175f2-edef-11ea-0882-712548ebb7a3
185 | M = [1 2
186 | 3 4]
187 |
188 | # ╔═╡ 0a8ac112-edef-11ea-1e99-cf7c7808c4f5
189 | typeof(M)
190 |
191 | # ╔═╡ 1295f48a-edef-11ea-22a5-61e8a2e1d005
192 | md"The `2` in the type confirms that this is a 2D array."
193 |
194 | # ╔═╡ 3e1fdaa8-edef-11ea-2f03-eb41b2b9ea0f
195 | md"This won't work for larger matrices, though. For that we can use e.g."
196 |
197 | # ╔═╡ 48f3deca-edef-11ea-2c18-e7419c9030a0
198 | zeros(5, 5)
199 |
200 | # ╔═╡ a8f26af8-edef-11ea-2fc7-2b776f515aea
201 | md"Note that `zeros` gives `Float64`s by default. We can also specify a type for the elements:"
202 |
203 | # ╔═╡ b595373e-edef-11ea-03e2-6599ef14af20
204 | zeros(Int, 4, 5)
205 |
206 | # ╔═╡ 4cb33c04-edef-11ea-2b35-1139c246c331
207 | md"We can then fill in the values we want by manipulating the elements, e.g. with a `for` loop."
208 |
209 | # ╔═╡ 54e47e9e-edef-11ea-2d75-b5f550902528
210 | md"A nice alternative syntax to create matrices following a certain pattern is an array comprehension with a *double* `for` loop:"
211 |
212 | # ╔═╡ 6348edce-edef-11ea-1ab4-019514eb414f
213 | [i + j for i in 1:5, j in 1:6]
214 |
215 | # ╔═╡ Cell order:
216 | # ╟─0d3aec92-edeb-11ea-3adb-cd0dc17cbdab
217 | # ╟─3b038ee0-edeb-11ea-0977-97cc30d1c6ff
218 | # ╠═3e8e0ea0-edeb-11ea-22e0-c58f7c2168ce
219 | # ╠═59b66862-edeb-11ea-2d62-71dcc79dbfab
220 | # ╟─5e062a24-edeb-11ea-256a-d938f77d7815
221 | # ╟─7e46f0e8-edeb-11ea-1092-4b5e8acd9ee0
222 | # ╠═8a695b86-edeb-11ea-08cc-17263bec09df
223 | # ╟─8e2dd3be-edeb-11ea-0703-354fb31c12f5
224 | # ╟─96b5a28c-edeb-11ea-11c0-597615962f54
225 | # ╠═a7453572-edeb-11ea-1e27-9f710fd856a6
226 | # ╟─b341db4e-edeb-11ea-078b-b71ac00089d7
227 | # ╠═23f9afd4-eded-11ea-202a-9f0f1f91e5ad
228 | # ╠═cc1f6872-edeb-11ea-33e9-6976fd9b107a
229 | # ╟─ce9667c2-edeb-11ea-2665-d789032abd11
230 | # ╠═d73d3400-edeb-11ea-2dea-95e8c4a6563b
231 | # ╠═e04ccf10-edeb-11ea-36d1-d11969e4b2f2
232 | # ╟─e297c5cc-edeb-11ea-3bdd-090f415685ab
233 | # ╟─ec751446-edeb-11ea-31ba-2372e7c71b42
234 | # ╠═fe3fa290-edeb-11ea-121e-7114e5c573c1
235 | # ╟─394b0ec8-eded-11ea-31fb-27392068ef8f
236 | # ╠═4dc00908-eded-11ea-25c5-0f7b2b7e18f9
237 | # ╟─6c44abb4-edec-11ea-16bd-557800b5f9d2
238 | # ╠═683af3e2-eded-11ea-25a5-0d90bf099d98
239 | # ╠═76764ea2-eded-11ea-1aa6-296f3421de1c
240 | # ╟─93a231f4-edec-11ea-3b39-299b3be2da78
241 | # ╟─82e63a24-eded-11ea-3887-15d6bfabea4b
242 | # ╠═9b339b2a-eded-11ea-10d7-8fc9a907c892
243 | # ╠═9535eb40-eded-11ea-1651-e33c9c23dbfb
244 | # ╟─a16299a2-eded-11ea-2b56-93eb7a1010a7
245 | # ╠═bc6b124e-eded-11ea-0290-b3760cb81024
246 | # ╟─cfb21014-eded-11ea-1261-3bc30952a88e
247 | # ╟─ffee7d80-eded-11ea-26b1-1331df204c67
248 | # ╟─cae4137e-edee-11ea-14af-59a32227de1b
249 | # ╟─714f4fca-edee-11ea-3410-c9ab8825d836
250 | # ╠═82cc2a0e-edee-11ea-11b7-fbaa5ad7b556
251 | # ╠═85916c18-edee-11ea-0738-5f5d78875b86
252 | # ╟─881b7d0c-edee-11ea-0b4a-4bd7d5be2c77
253 | # ╠═a298e8ae-edee-11ea-3613-0dd4bae70c26
254 | # ╠═a5ebddd6-edee-11ea-2234-55453ea59c5a
255 | # ╟─a9b48e54-edee-11ea-1333-a96181de0185
256 | # ╟─68c4ead2-edef-11ea-124a-03c2d7dd6a1b
257 | # ╠═84129294-edef-11ea-0c77-ffa2b9592a26
258 | # ╟─d364fa16-edee-11ea-2050-0f6cb70e1bcf
259 | # ╟─db99ae9a-edee-11ea-393e-9de420a545a1
260 | # ╠═04f175f2-edef-11ea-0882-712548ebb7a3
261 | # ╠═0a8ac112-edef-11ea-1e99-cf7c7808c4f5
262 | # ╟─1295f48a-edef-11ea-22a5-61e8a2e1d005
263 | # ╟─3e1fdaa8-edef-11ea-2f03-eb41b2b9ea0f
264 | # ╠═48f3deca-edef-11ea-2c18-e7419c9030a0
265 | # ╟─a8f26af8-edef-11ea-2fc7-2b776f515aea
266 | # ╠═b595373e-edef-11ea-03e2-6599ef14af20
267 | # ╟─4cb33c04-edef-11ea-2b35-1139c246c331
268 | # ╟─54e47e9e-edef-11ea-2d75-b5f550902528
269 | # ╠═6348edce-edef-11ea-1ab4-019514eb414f
270 |
--------------------------------------------------------------------------------
/src/_includes/welcome.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: "layout.jlhtml"
3 | ---
4 |
5 |
6 |
7 |
163 | $(any(contains("lecture"), f("tags", String[])) ? @htl("""
164 |
181 |
165 |
178 | """) : nothing)
179 | $(content)
180 | Section $(f("chapter", "-")).$(f("section", "-"))
166 |$( 167 | f("title", basename(page.input.relative_path)) 168 | )
169 | 170 |
171 |
172 |
177 | Lecture Video
173 |
174 |
176 |
17 |
25 |
26 | MIT students: Sign up for the Fall 2024 edition of this class!
Register for 18C25, 6C25, etc:
"Julia: Solving Real-World Problems with Computation" (catalog link)
Counts for course 6 and course 18 majors, etc.
27 |
29 |
30 |
31 | Julia: A Fresh Approach to Computing
28 |32 |35 | 36 |This class uses revolutionary programmable interactivity to combine material from three fields creating an engaging, efficient learning solution to prepare students to be sophisticated and intuitive thinkers, programmers, and solution providers for the modern interconnected online world.
33 |Upon completion, students are well trained to be scientific “trilinguals”, seeing and experimenting with mathematics interactively as math is meant to be seen, and ready to participate and contribute to open source development of large projects and ecosystems.
34 |
38 |
78 | Highlights
39 |
40 |
41 |
49 |
50 |
58 |
59 |
67 |
68 |
76 |
77 |
42 |
45 |
46 | 
47 |
48 |
47 |
51 |
54 | Corgi in the washing machine
52 |You will learn mathematical ideas by immersion into the mathematical process, performing experiments, seeing the connections, and seeing just how much fun math can be.
53 |
55 | 
56 |
57 |
56 |
60 |
63 | Revolutionary interactivity
61 |Our course material is built using real code, and instead of a book, we have a series of interactive notebooks. On our website, you can play with sliders, buttons and images to interact with our simulations. You can even go further, and modify and run any code on our website!
62 |
64 | 
65 |
66 |
65 |
69 |
72 | Learning Julia
70 |In literature it’s not enough to just know the technicalities of grammar. In music it’s not enough to learn the scales. The goal is to communicate experiences and emotions. For a computer scientist, it’s not enough to write a working program, the program should be written with beautiful high level abstractions that speak to your audience. This class will show you how.
71 |
73 | 
74 |
75 |
74 |
79 |
93 | Why is this course different?
80 | 83 |We believe many classes cover what we call the vertices — specific topics in computer science, math, or an application.
84 | A student is left to figure out the edges, meaning the intellectual connections between the topics on their own as they mature.
85 | Some classes have you learn a math topic and you can then for homework implement an algorithm or application. The goal
86 | for this class, is to accelerate the process by which a student can participate in the exciting world of software development
87 | be it the big open source universe or privately, by seeing how math with CS abstractions can allow for applications that can
88 | be part of a big huge ecosystem rather than a one-off homework.
89 |
90 | … and have more fun in the process!
91 |
94 |
130 | Subjects
95 |$(
96 | let
97 | sidebar_data = Base.include(@__MODULE__, joinpath(@__DIR__, "..", "sidebar data.jl"))
98 | sections = sidebar_data["main"]
99 |
100 | [
101 | @htl("""
102 | $([
103 | let
104 | input = other_page.input
105 | output = other_page.output
106 |
107 | name = get(output.frontmatter, "title", basename(input.relative_path))
108 | desc = get(output.frontmatter, "description", nothing)
109 | tags = get(output.frontmatter, "tags", String[])
110 |
111 | image = get(output.frontmatter, "image", nothing)
112 |
113 | class = [
114 | "no-decoration",
115 | ("tag_$(replace(x, " "=>"_"))" for x in tags)...,
116 | ]
117 |
118 | image === nothing || isempty(image) ? nothing : @htl("""
119 | )
121 | """)
122 | end for other_page in pages
123 | ])
124 | """)
125 | for (section_name, pages) in sections
126 | ]
127 | end
128 | )
129 | $(name)
120 |
131 |
221 | Three fields, one course
132 |
133 |
220 |
134 |
219 |
135 |
159 | Computer Science
136 |-
137 |
- visualization 138 |
- structure, abstraction 139 |
- type systems 140 |
- multiple dispatch 141 |
- dynamic dispatch 142 |
- two-language problem 143 |
- expression problem 144 |
- functional programming 145 |
- arrays 146 |
- matrices 147 |
- dataframes 148 |
- git, github 149 |
- version control 150 |
- collaboration 151 |
- devops 152 |
- language design 153 |
- constraint solvers 154 |
- mathematical programming solvers 155 |
- heuristics 156 |
- DSLs 157 |
160 |
198 | Mathematics
161 |-
162 |
- matrices 163 |
- stencils 164 |
- univariate/multivariate functions 165 |
- vector calculus 166 |
- matrix calculus 167 |
- sequence convergence 168 |
- principal component analysis 169 |
- dimensionality reduction 170 |
- matrix rank 171 |
- projections, rotations 172 |
- eigenvalues 173 |
- singular value decomposition 174 |
- outliers, noise 175 |
- data bulk, data center 176 |
- statistics 177 |
- correlation 178 |
- random sampling 179 |
- probability density function 180 |
- monte carlo methods 181 |
- random walks 182 |
- continuous limit 183 |
- ordinary differential equations 184 |
- curve fitting 185 |
- partial differential equations 186 |
- finite differences 187 |
- discretization 188 |
- bifurcations 189 |
- hysteresis 190 |
- optimization 191 |
- gradient descent 192 |
- global optimization 193 |
- constrained optimization 194 |
- nonlinear optimization 195 |
- inverse modeling 196 |
199 |
218 | Applications
200 |-
201 |
- social science 202 |
- epidemic modelling 203 |
- agent based modelling 204 |
- climate economics 205 |
- climate science 206 |
- weather forecasting 207 |
- ocean/atmosphere models 208 |
- optimisation 209 |
- path finding 210 |
- image data 211 |
- image filtering 212 |
- seam carving 213 |
- data analysis 214 |
- model fitting 215 |
- random data 216 |
222 |
240 |
244 | Details
223 |224 |226 | 227 |See also the course repository github.com/mitmath/computational-thinking.
225 |
228 | 229 |230 |
Meet our staff
231 |Lecturers: Alan Edelman, David P. Sanders, Charles E. Leiserson
232 |Technical lead: Fons van der Plas
233 |Assistants: Bola Malek, Logan Kilpatrick
234 |Guest lecturers: Henri F. Drake, Fons van der Plas, more to be announced
235 |Get the T-shirt
236 |There is a MIT Computational Thinking t-shirt available for those who really enjoyed the course, you can find it on the Julia Language's Bonfire Shop.
237 |Introduction video from Fall 2020
238 | 239 |240 |
How to cite
241 |If you use or are inspired by any material, would you be so kind to prominently display
242 |Some material on this website is based on:243 |
Computational Thinking, a live online Julia/Pluto textbook. (computationalthinking.mit.edu)
245 |
249 |
250 | 