Make it pretty - Playing around with CSS, SVG, Animated CSS in Jupyter Notebook

100%

Make it pretty - Playing around with CSS, SVG, Animated CSS in Jupyter Notebook

✓ Published0🌍 Public

Last edited Jan 16, 2016

Created on Jan 16, 2016

This example demonstrates how to style and animate pandas DataFrames within a Jupyter Notebook using custom CSS and SVG. It applies a fantasy font, colored table headers and cells, and integrates the animate.css library to add animated effects like bouncing. The code injects CSS rules directly into the notebook’s HTML output, transforming standard table rendering into a more visually engaging presentation.

AI-generated description

Similar vizzes

Loading thumbnail…

{p.title}

This animated visualization illustrates the structure and interactive features of a FastHTML-based blogging application, rendering the flow from notebook files to styled HTML pages. The code demonstrates how Jupyter notebooks are parsed and converted into markdown with embedded HTML, using `mistletoe` for markdown processing and `fastcore.nbio` for file handling. The application manages subscriber data through a SQLite database via `fastlite`, while the user interface is built with `fasthtml.common` and `monsterui.all` components. The animation highlights the templating system that transforms content into a complete blog layout, including navigation, article rendering, and social media links.

深深度碎片

64% match

Loading thumbnail…

Animation_Data

This example loads a CSV file of CSS named colors and displays a text summary of the dataset, including file size, row count, and column count. The page also features decorative SVG illustrations of an eye and a smiling face. It uses d3.v7's `d3.csv` to fetch and parse the data from a remote GitHub Gist URL. The rendering is done with SVG elements defined directly in the HTML, while the summary is injected into a `<pre>` block using vanilla JavaScript. The design employs a maroon background and black text for contrast.

Ppmbhupathibalu@gmail.com

64% match

Loading thumbnail…

Play with CSS and SVG

This example demonstrates how CSS and SVG can be combined to create interactive visual effects. It uses d3-force for simulation and D3’s selection and transition methods to animate SVG elements. The visualization manipulates CSS properties and SVG attributes in response to user interaction, with the underlying data generated dynamically in JavaScript. The code leverages D3 v3, applying force-directed layouts and custom styling through an external stylesheet.

Hhhhheeee

63% match

Loading thumbnail…

A jupyter notebook for D3

This example demonstrates how to run D3 code inside an IJavascript notebook using `jsdom` as a virtual DOM environment. It builds a Voronoi diagram from randomly generated points, then computes and draws the Urquhart graph, which removes the longest edge from each Delaunay triangle. The visualization renders as SVG, with the notebook exporting the resulting HTML into the cell output. The code uses `d3.voronoi()`, `d3.map()`, and `d3.extent()` to construct the diagram and graph.

PPhilippe Rivière

63% match

Loading thumbnail…

tutorial1

This example presents an animated scatter plot of the Iris dataset, cycling through different pairings of sepal and petal measurements on the axes. The visualization uses D3.js to load CSV data, render SVG circles colored by species, and update axis scales dynamically with a `setInterval`. It employs reusable custom modules like the `scatterPlot` function, D3 scales (`scaleLinear`), and axis generators (`axisLeft`, `axisBottom`), alongside manual SVG text elements for labels and legends. The dataset is fetched from a GitHub Gist and rendered with smooth, looping transitions.

Ssailalith2000@gmail.com

63% match

Loading thumbnail…

Fork of [Ex.10] Animated Reusable D3 Scatter Plot with labels

This example presents the Iris dataset as an animated scatter plot, cycling through different petal and sepal measurements on the x-axis. The reusable plot, created with D3 v6, uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` APIs to animate point positions and axis updates. The code dynamically re-binds the x-axis and labels every three seconds, while SVG circles morph and exit with a staggered delay, creating a visually engaging comparison of the dataset's features.

PPriyaEnuganti

63% match

Loading thumbnail…

Modified Panda

A data visualization presents a stylized panda face built from SVG shapes in a React application, rendered with D3’s `arc` generator for the eyes, nose, mouth, and ears, while circles and ellipses create cheeks and eye sockets. The panda’s head is a large gray circle with a black stroke, and all components are positioned via translations and rotations around the center of a 960 by 500 viewport. The code uses React’s `ReactDOM.render` to mount the SVG, and D3 v6 is loaded directly in the HTML. No external data is used; the piece is purely generative.

CChathurya

63% match

Loading thumbnail…

Simple Webpage

This webpage presents a minimal interactive dashboard that loads the penguins dataset from a CSV file and visualizes it using D3.js. The page displays a simple title and paragraph alongside a data-driven chart, with styling applied through an external CSS file. The JavaScript file (main.js) handles data parsing and rendering, likely using D3’s CSV loading and SVG-based plotting. The example demonstrates a basic HTML/CSS/JavaScript setup where D3 binds the external data to visual elements, showcasing a clean, straightforward approach to embedding a chart in a standard web document.

LLuluh8080

62% match