Skip to main content
100%

Gist 10297417

✓ Published0🌍 Public
Aakeshavan
Last edited Apr 9, 2014
Created on Apr 9, 2014

This example shows a Jupyter notebook template that hides input cells and reveals them on demand when a user clicks an output area, using jQuery to toggle visibility. The notebook’s rendered HTML is styled so code and text are centered, with hidden prompts and a custom font size for code blocks. The template extends the base HTML exporter and relies on jQuery’s `slideToggle` to animate the display of input sections, while CSS controls layout and typography. It demonstrates a reusable approach for converting notebook content into an interactive, cleanly formatted web page.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 18319c4f30bf20182aad

This example uses an iPython Notebook to teach basic Python and Markdown skills. It shows a sequence of tasks for editing text cells, writing code, and manipulating strings, using the NLTK library to process a sentence. The notebook’s cells contain instructional headings, markdown explanations, and Python code inputs with output. The visualization is the notebook itself, rendered as a static document with WebGL, demonstrating its interactive, code-driven structure.

MMartiHearst
67% match
Loading thumbnail…

Gist c884d46bec43f15765bd0ce7fc262723

This notebook presents an interactive Python crash course that teaches fundamental programming concepts through a Jupyter Notebook interface. It demonstrates variable assignment, data types (floats, booleans, strings), and error handling by showing intentional syntax errors like `5a = 5` alongside working examples. The notebook uses the standard Python interpreter via Jupyter, with markdown cells providing explanatory text and code cells executing live examples that print output or raise errors. The tutorial emphasizes practical usage, including installation instructions for Anaconda and keyboard shortcuts for notebook navigation.

Aakeshavan
66% match
Loading thumbnail…

Gist d3fc0b67d940e6854e6b44953373ab39

This notebook demonstrates a simple line plot created using matplotlib within an interactive IPython environment. The first cell enables inline plotting with `%pylab`, and the second cell generates a basic line chart, producing a single Line2D object rendered as an inline PNG image. The visualization serves as a minimal example of plotting a line with numpy/matplotlib in a Jupyter notebook.

Aakeshavan
66% match
Loading thumbnail…

Gist e3f5949ff1f99ab4126a

This notebook demonstrates Python string formatting through a series of interactive code cells. It shows how variables like `animal`, `verb`, and `noun` are assigned values and then inserted into template sentences using the `.format()` method from the Python standard library. The examples progress from simple variable printing with `print` statements to building sentences with placeholders like `{noun}` and `{verb}`, which are replaced with actual values, including numbers, demonstrating flexible substitution. The notebook uses standard Python 3 syntax and pandas for data handling, with matplotlib inline plotting enabled for visualization context.

Aakeshavan
66% match
Loading thumbnail…

Gist 251ad69ac5102b18e01d

This Vue-based visualization uses a Jupyter notebook with Python and matplotlib to display an embedded PNG image. The notebook loads inline plotting with `%pylab` and imports `prettyplotlib` for styling. The single visualization is an image file referenced from the user's local filesystem, rendered directly in the notebook output. No interactive or custom Vue components are shown; the example primarily demonstrates embedding a static image within a computational notebook workflow.

Aakeshavan
65% match
Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX
65% match
Loading thumbnail…

Gist 53b4091ce218de64d2d3

This dashboard example demonstrates an interactive report template editor that lets users modify custom fields, including updating categories, selecting field types, and toggling edit or delete actions. It shows how form inputs dynamically reveal relevant sub-fields based on the chosen type, and highlights recently modified elements with a temporary background animation. The code uses jQuery for DOM manipulation and event handling, jQuery’s `$.ajax` for asynchronous server requests to remove fields, and CSS animations via jQuery’s `.animate()` to fade highlight effects. The interface relies on a custom JavaScript module pattern (`HS.reportTemplate`) to organize the logic.

Aallyraza
64% match
Loading thumbnail…

Gist 85f76a1d46b0309fd975

This example presents a slide deck on HTML5 adoption for an internal IT presentation. It covers HTML5 elements, form enhancements, and new attributes such as `autofocus`, `input type="date"`, `datalist`, and the `dialog` element. The content includes code snippets for JavaScript and HTML, and references live samples like a CodePen demo. It explains how HTML5 simplifies validation and input controls compared to older JavaScript-heavy approaches.

MMiyaton
64% match