• Stars
    star
    1,235
  • Rank 38,018 (Top 0.8 %)
  • Language
    TypeScript
  • License
    GNU Affero Genera...
  • Created almost 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Convert any blog or website to an interactive learning platform for data science

DataCamp Light

Roadmap | Docs

DataCamp Light banner

Table of Contents

Features

  • Convert any website or blog to an interactive learning platform.
  • Works for both R and Python. Sessions are maintained on DataCamp's servers.
  • Convert existing markdown documents to an interactive course using the tutorial package.
  • Check out a demo R and Python example.
  • Leverage the same Submission Correctness Tests (SCT) DataCamp uses for all their courses. For R, there's the testwhat (GitHub wiki); for Python, there's pythonwhat (GitHub wiki).

How to run the app

Add the script to your HTML page (there is an example in examples/standalone-example.html):

<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>

That's it! If your app adds DataCamp Light exercises after the initial page load (for example, in React apps), call the following function to initialize those new exercises:

initAddedDCLightExercises();

You can also use the JavaScript library in a stackoverflow.com answer by including the exercise and script tag as a snippet.

Writing the HTML block

After including the JavaScript library, you can start writing HTML blocks in the format below. These will be dynamically converted to exercises.

<div data-datacamp-exercise data-lang="r">
	<code data-type="pre-exercise-code">
		# This will get executed each time the exercise gets initialized
		b = 6
	</code>
	<code data-type="sample-code">
		# Create a variable a, equal to 5


		# Print out a


	</code>
	<code data-type="solution">
		# Create a variable a, equal to 5
		a <- 5

		# Print out a
		print(a)
	</code>
	<code data-type="sct">
		test_object("a")
		test_function("print")
		success_msg("Great job!")
	</code>
	<div data-type="hint">Use the assignment operator (<code><-</code>) to create the variable <code>a</code>.</div>
</div>

As we can see in the example, the whole exercise is contained in a single <div> element with two data attributes data-datacamp-exercise and data-lang. The first attribute data-datacamp-exercise indicates that the <div> should be treated as a DataCamp Light exercise, while the other attribute data-lang specifies which programming language should be used. The accepted values for data-lang are r and python. There is also an optional attribute data-height which can sets the height in px of the div (minimum height is 300px) or set the size according to the amount of sample code lines: data-height="auto".

Pre-Exercise Code

Pre-exercise code is executed when the R/Python session is initialized. You can use it to pre-load datasets, packages, etc. for students. The way to specify this is by defining a <code> tag containing your initialization code and set the data-type attribute to pre-exercise-code like this:

<code data-type="pre-exercise-code">
	# This will get executed each time the exercise gets initialized
	b = 6
</code>

In our example we initialize the (rather useless) variable b with value 6.

Sample Code

To set the sample code that will be present initially in the code editor, a <code> tag should be defined containing the sample code and the data-type attribute should be set to sample-code like this:

<code data-type="sample-code">
	# Create a variable a, equal to 5


	# Print out a


</code>

Our example simply shows a couple of comments together with some newlines. The JavaScript library also takes care of stripping leading indentation so no need to worry about that.

Solution

To set the solution code, a <code> tag should be defined containing the solution code and the data-type attribute should be set to solution like this:

<code data-type="solution">
	# Create a variable a, equal to 5
	a <- 5

	# Print out a
	print(a)
</code>

Submission Correctness Test (SCT)

A Submission Correctness Test is used to check whether the code submitted by the user properly solves the exercise. For detailed information on this you can look at the documentation for R and at the documentation for Python. The way to specify the SCT is by defining a <code> tag containing your SCT code and set the data-type attribute to sct like this:

<code data-type="sct">
	test_object("a")
	test_function("print")
	success_msg("Great job!")
</code>

In our example the first line checks whether the user declared the variable a and whether its value matches that of the solution code. The second line checks whether the print function is called and lastly a success message is specified that will be shown to the user when the exercise is successfully completed.

Hint

To specify a hint, a tag should be defined containing the hint and the data-type attribute should be set to hint like this:

<div data-type="hint">
    Use the assignment operator (<code><-</code>) to create the variable <code>a</code>.
</div>

It is possible for the hint to contain for instance <code> tags as is the case in our example.

Other Options

  • Add a data-show-run-button attribute to always show the "Run" button, so your visitors can try out the code without submitting it.
  • Add a data-no-lazy-loading attribute to load all exercises as soon as the page is loaded, instead of waiting for the user to scroll down to them. This may cause performance issues, but can fix compatibility problems with iFrame-based pages.
  • Add the following css to the styling of your page to hide the configuration code of the exercises until they are loaded:
[data-datacamp-exercise] {
  visibility: hidden;
}

How does it work?

divs with the data-datacamp-exercise attribute are converted into a minimal version of DataCamp's learning interface (for the real deal, you can visit www.datacamp.com). It contains a session manager that connects to DataCamp's servers to provide an R or Python session as if you're working on your local system. The R and Python computing environments feature the most popular packages:

If you want to use a package that is not available, create an issue and we can install it (it's not possible to install packages at runtime).

Contributing

If you'd like to contribute, awesome! You can start by reading this section of the readme to get an idea of the technical details of this project. For the most part, it's structured as a standard React/Redux project (written in TypeScript) so if you're not familiar with one of those, you might want to read up a bit.

To develop DataCamp Light, you'll need to run the app locally. This repository includes some example exercises to test it on.

Get started by cloning this repository, installing the dependencies and starting the development server. As you make changes, the page will reload with your new code.

git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start

Dependencies

The vendor/ folder includes minified code of some internal DataCamp packages that are not hosted publicly right now.

Testing

Please read these two documents before starting to implement any tests:

Test files are named as {moduleName}.spec.js.

Run tests

npm test

Reducers

Since a reducer is a pure function, it's not that complicated to test it. You have to use a seed to create a mock state. Then you can pass it to the reducer as argument along with the action you want to test.

Components

Use snapshot testing to make sure components don't change by accident (see src/components/Footer.spec.ts for an example). Other tests can be done for components that have logic inside them.

Middleware

Testing middleware is a bit more involved since they have side effects. You can test Epics with the rxjs-marbles framework since they transform Observable streams. See src/autocomplete.spec.ts for an example.

DevOps

Formatting with Prettier

We use Prettier to keep formatting consistent. This will format your files (JS, TS, CSS, JSON) on a pre-commit hook. If you want, you can also call prettier --write filename to update a file manually.

There are also plugins for editors, like prettier-vscode that can auto-format on save.

Code Quality: ESLint, TSLint, Stylelint

I recommend installing plugins for these checkers in your editor. TSLint and Stylelint are also run in the development command, so you'll see their warnings pop up there as well.

Commit Messages

We've been using this commit message convention because it has emoji and emoji are 👍.

Continuous Integration

Development is primarily done on the development branch.

Commits to the development branch trigger a build on the DataCamp development environment and produce a build here:

https://cdn.datacamp.com/dcl-react-dev.js.gz

Next, commits to the beta branch push a release to the staging environment:

https://cdn.datacamp.com/dcl-react-staging.js.gz

Finally, when we create a release, an update is pushed to the production environment. This should be a stable version of DataCamp Light:

https://cdn.datacamp.com/dcl-react.js.gz

Commits to this branch trigger a build that is deployed on the DataCamp Dev environment. Commits to the main branch, beta, are built and deployed to staging. When a release is created, that build is deployed to production.

Packages used that you might want to know about

More Repositories

1

datacamp-community-tutorials

Tutorials for DataCamp (www.datacamp.com)
Jupyter Notebook
965
star
2

course-resources-ml-with-experts-budgets

Further student resources for DrivenData's 'Machine Learning with the Experts: School Budgets' DataCamp course.
Jupyter Notebook
559
star
3

courses-introduction-to-python

Introduction to Python by Filip Schouwenaars
Shell
367
star
4

rdocumentation-2.0

📚 RDocumentation provides an easy way to search the documentation for every version of every R package on CRAN and Bioconductor.
TypeScript
283
star
5

RDocumentation

R package to integrate rdocumentation.org into your R workflow
R
212
star
6

COVID-19-EDA-tutorial

This tutorial's purpose is to introduce people to the [2019 Novel Coronavirus COVID-19 (2019-nCoV) Data Repository by Johns Hopkins CSSE](https://github.com/CSSEGISandData/COVID-19) and how to explore it using some foundational packages in the Scientific Python Data Science stack.
Jupyter Notebook
159
star
7

funneljoin

Join tables based on events occurring in sequence in a funnel.
R
140
star
8

shinybones

A highly opinionated framework for building shiny dashboards.
R
136
star
9

courses-introduction-to-r

Introduction to R by Jonathan Cornelissen
R
132
star
10

datacamp_facebook_live_nlp

DataCamp Facebook Live Code Along Session 1: Enjoy.
Jupyter Notebook
126
star
11

courses-intermediate-sql-queries

Intermediate SQL Queries by Nick Carchedi
Python
124
star
12

viewflow

Viewflow is an Airflow-based framework that allows data scientists to create data models without writing Airflow code.
Python
122
star
13

careerhub-data

Certification Data
103
star
14

tutorial

R Package to convert R Markdown files to DataCamp Light HTML files
R
82
star
15

pythonwhat

Verify Python code submissions and auto-generate meaningful feedback messages.
Python
61
star
16

datacamp_facebook_live_titanic

DataCamp Facebook Live Code Along Session 2: Learn how to complete a Kaggle competition using exploratory data analysis, data munging, data cleaning and machine leaning. Enjoy.
Jupyter Notebook
61
star
17

courses-introduction-to-version-control-with-git

Introduction to Version Control with Git by DataCamp
Shell
57
star
18

misc-courses-HarvardX-IDS-Mod-1

R
46
star
19

tidymetrics

Dimensional modeling done the tidy way!
R
45
star
20

rdocumentation-app

The web application running rdocumentation.org.
JavaScript
44
star
21

courses-introduction-to-shell

Introduction to Shell by Greg Wilson
Shell
44
star
22

datacamp_facebook_live_ny_resolution

In this Facebook live code along session with Hugo Bowne-Anderson, you're going to check out Google trends data of keywords 'diet', 'gym' and 'finance' to see how they vary over time.
Jupyter Notebook
44
star
23

Market-Basket-Analysis-in-python-live-training

Live Training: Market Basket Analysis in Python
Jupyter Notebook
42
star
24

antlr-ast

Library for building abstract syntax trees from antlr parsers
Python
39
star
25

datacamp_facebook_live_intro_to_tidyverse

DataCamp Facebook Live Code Along Session 5: Learn how to to use tidy tools in R, such as dplyr and ggplot2, to intuitively explore & analyze your data.
38
star
26

testwhat

Write Submission Correctness Tests for R exercises
R
33
star
27

ast-viewer

app to visualize antlr parse tree ast
Vue
26
star
28

community-courses-kaggle-python-tutorial-on-machine-learning

Kaggle Python Tutorial on Machine Learning by Weston Stearns [OPEN]
Shell
26
star
29

datacamp_facebook_live_dataframed

DataCamp Facebook Live Code Along Session 4: Learn techniques that guests on the DataFramed podcast say are their favourite. Enjoy!
Jupyter Notebook
24
star
30

design-system

The DataCamp Design System, aka Waffles
TypeScript
21
star
31

jsconfig

All the dotfiles for javascript @ DataCamp
JavaScript
20
star
32

courses-intro-to-r-beta

Reworked introduction to R course hosted on DataCamp
R
20
star
33

community-groupby

This repository contains notebook + code for DataCamp community post on groupbys, split-apply-combine and pandas.
Jupyter Notebook
19
star
34

datacamp-light-wordpress

A WordPress Plugin that allows easy integration of the DataCamp Light interactive learning widget into posts and pages.
PHP
18
star
35

antlr-plsql

ANTLR
17
star
36

data-cleaning-with-pyspark-live-training

Live Training Session: Cleaning Data with Pyspark
Jupyter Notebook
14
star
37

Machine-Learning-With-XGboost-live-training

Live Training Session: Machine Learning with XGboost
Jupyter Notebook
14
star
38

awesome

A list of tools and resources we love
14
star
39

machine-learning-with-scikit-learn-live-training

Live Training Session: Machine Learning with Scikit Learn
Jupyter Notebook
13
star
40

waffles

Waffles is the DataCamp design system.
TypeScript
13
star
41

Hacker-Stats-in-Python-Live-Training

Live Training Session: Hacker Stats in Python
Jupyter Notebook
12
star
42

universal-rx-request

Library to do HTTP requests with RxJS
JavaScript
11
star
43

codemirror-6-getting-started

Getting started with CodeMirror 6, the popular code editor library
JavaScript
10
star
44

shinymetrics

Shiny modules for visualizing tidy metrics
R
10
star
45

community-courses-tidy-data-in-python-mini-course

Tidy Data in Python Mini-Course by Vincent Lan [OPEN]
Jupyter Notebook
9
star
46

data-analysis-in-sql-live-training

Live Training Session: Data Analysis in SQL
Jupyter Notebook
9
star
47

Applied-Machine-Learning-Ensemble-Modeling-live-training

Live Training Session: Applied Machine Learning:Ensemble Modeling
Jupyter Notebook
9
star
48

time-series-analysis-in-python-live-training

Live Training Session: Time Series Analysis in Python
Jupyter Notebook
8
star
49

projects-introduction-to-datacamp-projects-python-guided

Introduction to DataCamp Projects by Rasmus Bååth
Jupyter Notebook
8
star
50

authoring

CSS
8
star
51

datacamp-metoo-analysis

What can data science tell us about tweets with the #MeToo hashtag? This repository contains the code for the analysis
Jupyter Notebook
8
star
52

antlr-tsql

ANTLR
7
star
53

dbconnect-python

Easily connect to all internal databases. Only for internal use.
Python
7
star
54

community-hierarchical-indices

This repository contains notebook + code for DataCamp community post on hierarchical indices, groupby, split-apply-combine and pandas.
Jupyter Notebook
6
star
55

ggdc

Datacamp Themes for ggplot2.
R
6
star
56

dbconnectr

Fetch credentials on the fly as you connect to databases
R
6
star
57

working-with-text-data-in-python-live-training

Live Training Session: Working with Text Data in Python
Jupyter Notebook
6
star
58

community-courses-introduction-to-probability-and-data-labs

Introduction to Probability and Data - Labs by Mine Çetinkaya-Rundel [OPEN]
HTML
6
star
59

community-courses-education-data-analysis-primer-r-dplyr-and-plotly

Education Data Analysis Prime: R, dplyr, and Plotly by Jake Moody [OPEN]
R
6
star
60

react-native-survicate

React Native bindings for the Survicate SDK
Java
6
star
61

datacamp-thanksgiving-spending

How much money does America spend in the holiday season? Let's delve into the data to find out.
Jupyter Notebook
5
star
62

python-live-training-template

Jupyter Notebook
5
star
63

sheetwhat

Verify Spreadsheets and auto-generate meaningful feedback messages.
Python
4
star
64

community-courses-r-for-the-intimidated

R for the Intimidated by Annika Salzberg [OPEN]
4
star
65

community-courses-exploring-polling-data-in-r

Exploring Polling Data in R by Matt Isaacs [OPEN]
R
4
star
66

Visualizing-Big-Data-in-R-live-training

Live Training Session: Visualizing Big Data in R
Jupyter Notebook
4
star
67

community-courses-dataframe-manipulation-r-chinese

Dataframe Manipulation in R by Yao-Jen Kuo [OPEN]
R
3
star
68

sqlwhat

Python
3
star
69

Brand-Analysis-using-Social-Media-Data-in-R-Live-Training

Live Training Session: Brand Analysis using Social Media Data in R
Jupyter Notebook
3
star
70

base-plugin

JS boilerplate to create plugins
JavaScript
3
star
71

community-courses-introduction-to-r-chinese

Introduction to R (Chinese) by Jonathan Cornelissen/Translated by Yao-Jen Kuo [OPEN]
R
3
star
72

data-processing-in-shell-live-training

Jupyter Notebook
3
star
73

projects-introduction-to-datacamp-projects-r-guided

Introduction to DataCamp Projects by Rasmus Bååth
Jupyter Notebook
3
star
74

community-hurricane-visualizations

This repository contains notebook + code used to generate the figures in my DataCamp article 'How not to plot hurricane predictions'
Jupyter Notebook
3
star
75

protobackend

Python
3
star
76

IRkernel.testthat

R
3
star
77

projects-instructor-application-python

The application process for becoming a project instructor
Jupyter Notebook
3
star
78

workspace-codealong-afors

Explore US Air Force personnel data
Jupyter Notebook
3
star
79

asana

An R package for accessing the Asana API
R
3
star
80

shellwhat

Python
2
star
81

protowhat

Python
2
star
82

community-courses-reading-data-into-r-with-readr

Reading Data into R with readr by Hadley Wichkam [OPEN]
R
2
star
83

sme-dle-case-study-application

The audition portion of the application process for becoming a subject matter expert (SME) for Data Literacy and Essentials (DLE).
2
star
84

ipython_nose

Python
2
star
85

community-courses-introduction-to-r-french

Introduction to R (French) by Jonathan Cornelissen/Translated by Vincent Guyader [OPEN]
R
2
star
86

shell-notebook-sandbox

Jupyter Notebook
2
star
87

Visualizing-Big-Data-in-R-live-training2

DataCamp live training on visualizing big data in R
Jupyter Notebook
2
star
88

community-courses-r-yelp-and-the-search-for-good-indian-food

R, Yelp and the search for good Indian food by Weston Stearns [OPEN]
R
2
star
89

community-courses-introduction-to-r-portuguese

Introduction to R (Portugese) by Jonathan Cornelissen/Translated by Paulo Vasconcellos [OPEN]
R
2
star
90

catsim

Python
2
star
91

r-live-training-template

Jupyter Notebook
2
star
92

string-manipulation-in-sql-live-training

Live Training Session: String Manipulation with SQL
Jupyter Notebook
2
star
93

bash_kernel

Python
2
star
94

finddatasetpkgs

An R package that lists all CRAN R packages with "datasets" or "data sets" in the Title field of their DESCRIPTION file.
R
1
star
95

Creating-Dashboards-in-Shiny-R-live-training

Live Training Session: Creating Dashboards with Shiny R
Jupyter Notebook
1
star
96

Visualizing-Big-Data-in-R-live-training3

DataCamp live training on visualizing big data in R
Jupyter Notebook
1
star
97

Visualizing-Big-Data-in-R-live-training4

DataCamp live training on visualizing big data in R
Jupyter Notebook
1
star
98

setting-up-your-environment-in-r-live-training

Live Training Session: Setting Up Your Environment in R
Jupyter Notebook
1
star
99

workspace-tutorial-python-linear-regression

Notebook for a video tutorial on modeling in Python, focussed on linear regression.
Jupyter Notebook
1
star
100

shell-live-training-template

Jupyter Notebook
1
star