diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json new file mode 100644 index 00000000..c3fa5cd3 --- /dev/null +++ b/.codesandbox/workspace.json @@ -0,0 +1,25 @@ +{ + "preview": [ + { + "views": [ + { + "id": "codesandbox.browser" + } + ] + }, + { + "open": true, + "views": [ + { + "id": "codesandbox.terminal" + }, + { + "id": "codesandbox.console" + }, + { + "id": "codesandbox.problems" + } + ] + } + ] +} \ No newline at end of file diff --git a/assets/world_choro.png b/assets/world_choro.png new file mode 100644 index 00000000..dee3c924 Binary files /dev/null and b/assets/world_choro.png differ diff --git a/decks/c19_ipynb.mdx b/decks/c19_ipynb.mdx new file mode 100644 index 00000000..8a9b31eb --- /dev/null +++ b/decks/c19_ipynb.mdx @@ -0,0 +1,346 @@ +import { CodeSurfer as Surfer } from "code-surfer"; +import { CodeSurferColumns, Step } from "code-surfer"; +import { Appear, Background } from "gatsby-theme-mdx-deck"; +import * as L from "../src/layout"; +import customTheme from "../src/theme"; +import GreetingLoader from "./src/greeting-loader"; +import "prismjs/components/prism-python"; +export const theme = customTheme; + +# Visualizing COVID-19 Data with Python + Google Colab! + +* Analyzing Bar charts +* Wrangling with Pandas + +--- + +# Getting set up + +- Search for Google Colab and click on first link +- File/New Notebook +- Sign into your Google account + +--- +# Initialize Notebook With Required Packages + +```python +import pandas as pd +import plotly.express as px +``` +--- + +# Where to find data? + +- Navigate to: + +```python +link = 'https://github.com/ + CSSEGISandData/ + COVID-19/raw/master/ + csse_covid_19_data/ + csse_covid_19_daily_reports/ + 04-17-2020.csv' +``` + +Click "+ code " on the upper left corner to create a new code chunk under + +Copy and paste the entire block above into the same code chunk in the colab. + + + +--- + +# Reading in data + +```python + +world = pd.read_csv(link) #read in csv via link +world.head() #lists the top 5 rows +``` +--- + + +```python +link = 'https://github.com/CSSEGISandData/ + COVID-19/raw/master/ + csse_covid_19_data/ + csse_covid_19_daily_reports/ + 04-17-2020.csv' + +world = pd.read_csv(link) #read in csv via link +world.head() #lists the top 5 rows +``` + +|....|FIPS|Admin2|Province_State|Country_Region|...|Confirmed|...|Active|...|Combined_Key +|----|----|------|--------------|--------------|---|---------|---|------|---|------------ +|0 |45001.0|Abbeville|South Carolina|US|...|10|...|10|...|Abbeville, South Carolina, US +|1 |22001.0|Acadia |Louisiana |US|...|110|...|104|...|Acadia, Louisiana, US +|:|:|:|:|:|:|:|:|:|:|: +|4 |19001.0|Adair |Iowa |US|...|1|...|1|...|Adair, Iowa, US + +--- + +# Selecting Columns + +- Create a new code chunk + +```python +world['FIPS'] # selects the first column +world.Confirmed # selected the 'Confirmed' column +``` +--- +# Practice with Pandas + +- Use pd.sum() find the overall sum by selecting 'Confirmed' + +--- +# Practice with Pandas + +- Use pd.sum() find the overall sum by selecting 'Confirmed' + +```python +world.Confirmed.sum() #240191 +``` +--- + +# US Sum + +- Use pd.sum() and the '==' operator +- find the overall confirmed sum for 'US' + +```python +dataframe[dataframe.Column == 'target'].sum() +``` + +--- + +# US Sum + +- Use pd.sum() and the '==' operator +- find the overall confirmed sum for 'US' + +```python +world[world.Country_Region == 'US'].Confirmed.sum() #699706 +``` +--- + +# Spain Sum + +- Use pd.sum() and the '==' operator +- find the overall confirmed sum for 'Spain' + +--- + +# Spain Sum + +- Use pd.sum() and the '==' operator +- find the overall confirmed sum for 'Spain' + + +```python +world[world.Country_Region == 'Spain'].Confirmed.sum() #190839 +``` +--- + +# Grouping by Country + +- Create a new code chunk + +```python + world.groupby('Country_Region') +``` + + +--- + +# Grouping by country + +```python + world.groupby('Country_Region') + + # +``` +--- +# Grouping by country and selecting 'Confirmed' + +```python +world.groupby('Country_Region').Confirmed + +# +``` +--- +# Summing up confirmed cases by country + +```python +world.groupby('Country_Region').Confirmed.sum() +``` + + +Country_Region| +--------------|--- +Afghanistan|906 +Albania| 539 +:|: +Zimbabwe|24 +Name: Confirmed, Length:| 185, dtype: int64 + + +--- +# Reformatting + +Turn previous output into a Pandas df + +```python +world.groupby('Country_Region').Confirmed.sum().reset_index() +``` + + +--- + +# save output to a variable + +```python +grouped_countries = world.groupby('Country_Region').Confirmed.sum().reset_index() +``` +--- + +# show top 5 rows + +```python +grouped_countries = world.groupby('Country_Region').Confirmed.sum().reset_index() +grouped_countries.head() +``` + +|....|Country_Region|Confirmed +|----|--------------|--------- +|0 |Afghanistan|906 +|1 |Albania |539 +|:|:| +|4 |Angola |19 + +--- +# Bar Chart for group_countries +```python +fig = px.bar(grouped_countries, #plots all n rows + x='Country_Region', + y='Confirmed', + color= 'Confirmed') +fig.show() +``` +--- + +# Bar Chart for group_countries.head() +```python +fig = px.bar(grouped_countries.head(), #plots top 5 rows in default order + x='Country_Region', + y='Confirmed', + color= 'Confirmed') +fig.show() +``` +--- + +# What if I wanted to see different order? + +- Create a new code chunk + +```python +sorted_countries = grouped_countries.sort_values('Confirmed',ascending=False) + +fig = px.bar(sorted_countries.head(), #plots top 5 rows in descending order + x='Country_Region', + y='Confirmed', + color= 'Confirmed') + +fig.show() +``` +--- + +# Select specefic countries to plot + +- Create a new code chunk + +```python +list = ['US','Turkey','Russia','Japan','Germany'] +``` + +--- +# Comparing to grouped df + +```python +list = ['US','China','Italy','France','Canada'] + +grouped_countries.Country_Region.isin(list) +``` +--- +# if True, return that row + +```python +list = ['US','China','Italy','France','Canada'] + +grouped_countries.loc[grouped_countries.Country_Region.isin(list)] +``` +--- +# Save output to a variable + +```python +list = ['US','China','Italy','France','Canada'] + +selected_groups = grouped_countries.loc[grouped_countries.Country_Region.isin(list)] +selected_groups +``` + +|....|Country_Region|Confirmed +|----|--------------|--------- +|0 |Canada|32814 +|1 |China |83760 +|:|:| +|4 |US |699706 +--- + +# Sort the dataframe + +```python +list = ['US','China','Italy','France','Canada'] + +selected_groups = grouped_countries.loc[grouped_countries.Country_Region.isin(list)] +selected_groups.sort_values('Confirmed',ascending = False) #sort in descending order +``` + +|....|Country_Region|Confirmed +|----|--------------|--------- +|0 |US|699706 +|1 |Italy |172434 +|:|:| +|4 |Canada |32814 +--- + +# Save to a variable + +```python +list = ['US','China','Italy','France','Canada'] + +selected_groups = grouped_countries.loc[grouped_countries.Country_Region.isin(list)] +sorted_conf = selected_groups.sort_values('Confirmed',ascending = False) +``` + +|....|Country_Region|Confirmed +|----|--------------|--------- +|0 |US|699706 +|1 |Italy |172434 +|:|:| +|4 |Canada |32814 +--- + +# Bar Chart for sorted_conf +```python +fig = px.bar(sorted_conf, + x='Country_Region', + y='Confirmed', + color= 'Confirmed') +fig.show() +``` +--- + +# That's it! Easy huh? + +Code used for this tutorial can be found [here](https://colab.research.google.com/drive/1O4kiZofDz31a5eM_v_o_LolPjBHUhqG3) \ No newline at end of file diff --git a/decks/food.mdx b/decks/food.mdx index aa8461bb..cb80ec08 100644 --- a/decks/food.mdx +++ b/decks/food.mdx @@ -1,379 +1,187 @@ -import { CodeSurfer as Surfer } from "code-surfer"; -import { CodeSurferColumns, Step } from "code-surfer"; -import { Appear, Background } from "gatsby-theme-mdx-deck"; -import * as L from "../src/layout"; -import customTheme from "../src/theme"; +import { CodeSurfer as Surfer } from "code-surfer"; +import { CodeSurferColumns, Step } from "code-surfer"; +import { Appear, Background } from "gatsby-theme-mdx-deck"; +import * as L from "../src/layout"; +import customTheme from "../src/theme"; import GreetingLoader from "./src/greeting-loader"; export const theme = customTheme; -# Concurrent Mode - +Concurrent Mode ---- - - - - - -```jsx file=./src/greeting.1.1.js -``` - - - - - - - -```jsx 7 file=./src/greeting.1.1.js -``` - - - - - - - -```jsx file=./src/greeting.class.1.1.js -``` - - - - - - - -```jsx file=./src/greeting.class.1.2.js -``` - - - - - - - -```jsx 10:12,15:17,25 file=./src/greeting.class.1.3.js -``` - - - - - - - -```jsx 1:31 file=./src/greeting.class.1.3.js -``` - - - - - ---- - - - -## Disclaimer - -### Information in this talk may not be accurate or may change in the future +Disclaimer +Information in this talk may not be accurate or may change in the future ---- - -## Time Slicing - -### "Chunking slow rendering on subtree into little blocks of work by interrupting the work loop." - +Time Slicing +"Chunking slow rendering on subtree into little blocks of work by interrupting the work loop." ---- - import DanDemoBlocking from '../assets/dan-demo-blocking.png'; - ---- import DanDemoConcurrent from '../assets/dan-demo-concurrent.png'; - ---- - - - -### "Wait a minute... I already know about this! What is this talk really about?" - ---- +"Wait a minute... I already know about this! What is this talk really about?" -# Concurrent Mode - -## A chain of unfortunate consequences - +Concurrent Mode +A chain of unfortunate consequences ---- - - - -### How does React "delay" rendering? - ---- - +How does React "delay" rendering? -## Sources of Slowdown - -- Slow component render functions -- Slow state setter or reducer updater functions -- Slow effect functions - +Sources of Slowdown +Slow component render functions +Slow state setter or reducer updater functions +Slow effect functions ---- - import DeferredSetState from '../assets/deferred-setstate.svg'; -## Deferred setState. - -### Any state setter or dispatch can be delayed. - +Deferred setState. +Any state setter or dispatch can be delayed. - - ---- - import InterruptRendering from '../assets/interrupt-rendering.svg'; -## Interrupt Rendering. - -### Any rendering can be interrupted and can be completed later before committing. - +Interrupt Rendering. +Any rendering can be interrupted and can be completed later before committing. - - ---- - -## Oops #1 - -### Delaying rendering is only safe when no effects are pending on a subtree. - +Oops #1 +Delaying rendering is only safe when no effects are pending on a subtree. ---- - import HooksAPI from '../assets/hooks-api.svg'; -## The Hooks API. - -### This restriction is reflected in the hooks API with encapsulation of effects. - +The Hooks API. +This restriction is reflected in the hooks API with encapsulation of effects. - - ---- - import HooksAPITiming from '../assets/hooks-api-timing.svg'; -## Hooks Timings. - -### With each hook we observe a part of the lifecycle and can react. - +Hooks Timings. +With each hook we observe a part of the lifecycle and can react. - - ---- - import ComponentLifecycle from '../assets/component-lifecycle.svg'; -## The Lifecycle. - -### The lifecycle we observe has three phases repeating. - +The Lifecycle. +The lifecycle we observe has three phases repeating. - - ---- - import ObservingLifecycleEvents from '../assets/observing-lifecycle-events.svg'; -## Observing the Lifecycle. - -### Overlapping the lifecycle with hooks, we see a phase that we can't observe... - +Observing the Lifecycle. +Overlapping the lifecycle with hooks, we see a phase that we can't observe... - - ---- - import InterruptedLifecycle from '../assets/interrupted-lifecycle.svg'; -## Interrupting the Lifecycle. - -### Unfortunately this phase becomes very relevant in Strict and Concurrent Mode. - +Interrupting the Lifecycle. +Unfortunately this phase becomes very relevant in Strict and Concurrent Mode. - - ---- - -## Oops #2 - -### It's not possible to have a subscription or effect track the component lifecycle. - +Oops #2 +It's not possible to have a subscription or effect track the component lifecycle. ---- - -## Workaround - -### Resort to useSubscription - +Workaround +Resort to useSubscription ---- - import SchedulerPriorities from '../assets/scheduler-priorities.svg'; -## Scheduler Priorities. - -### In Concurrent Mode the time budgets are switched on for time slicing. - +Scheduler Priorities. +In Concurrent Mode the time budgets are switched on for time slicing. - - ---- - -## Oops #3 - -### Seems like React isn't all that predictable anymore. - +Oops #3 +Seems like React isn't all that predictable anymore. ---- - -## Workaround - -### Synchronous Subscriber and scheduled teardown - +Workaround +Synchronous Subscriber and scheduled teardown https://github.com/facebook/react/issues/15317#issuecomment-573337558 ---- - - - -### "We didn't yet get to what happens when an effect is slow, right?" - ---- - +"We didn't yet get to what happens when an effect is slow, right?" -## Tearing - -### "When a subtree's renderered state falls behind while another subtree has committed updates already." - +Tearing +"When a subtree's renderered state falls behind while another subtree has committed updates already." ---- +import Tearing1 from '../assets/bvaughn-tearing-1.png'; import Tearing2 from '../assets/bvaughn-tearing-2.png'; -import Tearing1 from '../assets/bvaughn-tearing-1.png'; -import Tearing2 from '../assets/bvaughn-tearing-2.png'; - - - - - - ---- + -## React's solution? - -- When an effect slows down, React can't safely interrupt or delay updates. -- Instead it batches all updates and switches back to blocking mode -- This is called a _deopt_. - +React's solution? +When an effect slows down, React can't safely interrupt or delay updates. +Instead it batches all updates and switches back to blocking mode +This is called a deopt. ---- - -## Oops #4 - -### React Concurrent's deopt can be slower than Blocking was before. - +Oops #4 +React Concurrent's deopt can be slower than Blocking was before. ---- - -## However - -- This may still cause _tearing_ when another update is scheduled during this blocking batch. - +However +This may still cause tearing when another update is scheduled during this blocking batch. ---- - -## Oops #5 - -### A new `useMutableSource` hook is necessary to fix this tearing-during-deopt issue. - +Oops #5 +A new useMutableSource hook is necessary to fix this tearing-during-deopt issue. ---- - -# Concurrent Mode: Oops - - +Concurrent Mode: Oops + \ No newline at end of file