H

Héctor del Castillo

@hdc-g·18 public vizzes

Loading thumbnail…

Fork of Plantilla Tabla simple

This fork of the Plantilla Tabla simple template displays a seminar schedule as an HTML table, with columns for date, time block, speaker, and talk title. The talks are rendered as accordion buttons; clicking a title expands a panel containing the talk abstract. The page uses custom CSS for responsive flexbox layout and zebra-striped table rows, alongside JavaScript to toggle accordion visibility. It relies on the MathJax library for potential formula rendering and includes embedded styles for document structure.

Loading thumbnail…

Jornada Valpo

Jornada Valpo is an interactive schedule for a mathematics conference, displaying a table of talks with times, speakers, and titles. Each talk title is an accordion button that expands to reveal an abstract, and some entries include links to recorded videos on YouTube. The page is built with HTML, CSS, and JavaScript, using MathJax to render mathematical notation, and is generated by plasTeX.

Loading thumbnail…

Plantilla Tabla simple

This example presents a simple, responsive HTML table that lists dated entries with expandable titles. Each title is a button that toggles a hidden description panel below it, allowing users to reveal additional details on demand. The table uses CSS for striped row highlighting and a two-column layout, while vanilla JavaScript adds the accordion-style interactivity. The page is generated with Pandoc and relies on plain HTML, CSS, and JavaScript without external frameworks.

Loading thumbnail…

Jornada PUCV-USACh

Jornada PUCV-USACh presents a scheduled seminar timetable as an interactive HTML table. The page lists talk times, speaker names, universities, and titles, with accordion-style expandable panels for additional abstract details. Built with plain JavaScript and CSS, it incorporates MathJax for rendering mathematical notation within talk descriptions. The layout uses flexbox rows and two-column tables for responsive organization, with links to recorded video sessions embedded in the schedule.

Loading thumbnail…

Grupo de estudio

This example shows a schedule of mathematics seminar talks on finite group representations, presented in an HTML table with expandable accordion panels for session details. The page uses the MathJax library to render any inline mathematical notation, while the accordion functionality is implemented with custom JavaScript and CSS toggling panel visibility. Each talk entry includes the date, speaker, a short title, and links to external resources like videos and notes. The data is hardcoded directly in the HTML structure.

Loading thumbnail…

Plantilla Tabla simple

This example displays a simple HTML table listing seminar speakers and their talk summaries, with accordion buttons that expand to reveal additional text. Built with React and styled using CSS, the page uses vanilla JavaScript to toggle panel visibility through button click handlers. The table includes alternating row colors and collapsible content panels, generated from static data within the markup.

Loading thumbnail…

Tabla Argentina Simple

This example displays a multi-tab schedule for an event, with each tab revealing a table of daily sessions. It shows time slots, speakers, and talk titles in a clean, styled layout. The visualization uses standard HTML tables with CSS for styling, including striped rows and tabbed navigation. Built with React and basic JavaScript, it relies on CSS radio-button techniques for interactive tab switching and presents the data as structured, readable text rather than graphical charts.

Loading thumbnail…

Map of Dependencies for tag 0ELT of the Stacks Project

This visualization maps the dependency relationships between four mathematical concepts—abelian group, injective object, subgroup, and homomorphism—from the Stacks Project tag 0ELT. It uses a force-directed graph where nodes represent concepts and links represent dependencies. The code employs D3 v7’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position elements, while SVG circles and lines render the nodes and edges. Dragging is enabled via `d3.drag`, and the simulation updates coordinates on each tick.

Loading thumbnail…

Map of Dependencies for tag 0ELT of the Stacks Project

A force-directed graph maps dependencies among four mathematical concepts from the Stacks Project tag 0ELT: abelian group, injective object, subgroup, and homomorphism. Circles represent nodes, with lines showing links between related terms. The visualization uses D3 v7's `d3.forceSimulation` with link, charge, and center forces, and supports interactive dragging via `d3.drag`. Data is defined inline as static arrays in the HTML.

Loading thumbnail…

Sfsdfds

This example presents a tabbed interface for organizing seminar schedules, displaying details such as dates, speakers, and talk titles within CSS-based tab panels. The implementation uses plain HTML and CSS with radio-button inputs to toggle between tabs, and the MathJax library is loaded for potential mathematical content rendering. The styling employs flexbox for layout and custom color schemes for visual separation between tab labels and content areas.

Loading thumbnail…

Charlas USACH 2022

This example presents a tabbed interface for browsing talks given at the Universidad de Santiago de Chile (USACH) in 2022, organized by semester. It displays tables of talks with their dates, speakers, and titles within interactive tabs styled with CSS. The visualization uses HTML tables, CSS flexbox for layout, and pure CSS radio-button-based tabs for switching between content panels, with no JavaScript framework or data library involved.

Loading thumbnail…

Untitled

A lunar phase calendar displays each day of 2023 as a small orthographic moon, arranged by day along the x-axis and month along the y-axis. The SVG chart uses d3.geoCircle and d3.geoOrthographic projections within d3.geoPath to render moon phases from a computed lunar period. It includes axes via d3.axisLeft, d3.axisTop, and d3.axisBottom, with scales from d3.scaleLinear and d3.scalePoint. Clicking the SVG triggers a red animated pulse, expanding via a .transition().duration().attr() chain to highlight the current day's position.

Loading thumbnail…

Mini curso: GGP

This example presents a schedule of seminar talks, formatted as an HTML table with expandable accordion sections. It uses vanilla JavaScript to toggle the visibility of abstract panels beneath each talk title, allowing users to view additional details about topics like Hecke's central value formula and the GGP conjectures. The page relies on CSS for layout and styling, including a flexbox row structure and table striping, and incorporates MathJax for potential mathematical notation rendering, along with links to recorded video lectures.

Loading thumbnail…

Table with Filter

A table of names, ages, and cities allows filtering its rows through interactive dropdown menus placed in the header. Selecting a value from any menu hides rows that do not match the chosen text in that column, while multiple selections combine to show only rows meeting all criteria. The implementation uses jQuery to listen for `change` events on the `.filter` selects, reads each menu’s `data-column` attribute to locate the corresponding table cell, and toggles row visibility by calling `hide()` and `show()` on the filtered `<tbody>` elements. All data is hardcoded within the HTML file.

Loading thumbnail…

PlasTeX: Ejemplo...

This example demonstrates a mathematical research abstract on Siegel cusp forms, rendered as an HTML page with LaTeX-style typesetting. The page displays inline and display equations alongside body text, using MathJax to convert LaTeX notation into readable mathematics. It is generated by PlasTeX and styled with a white theme, while JavaScript files (jquery.min.js, plastex.js, svgxuse.js) handle page behavior. The content presents the Fourier series representation and the main theorem about coefficient non-vanishing, showing how static academic documents can be converted into web pages.

Loading thumbnail…

Jornada

This example presents the schedule and abstracts for a mathematics conference, titled "Jornada," with talks on topics like Siegel cusp forms. It displays a table of time slots, speakers, and talk titles, with expandable accordion panels revealing detailed abstracts containing mathematical notation. The page is built with HTML, CSS, and vanilla JavaScript, using the MathJax library to render LaTeX equations, and features interactive buttons that toggle the visibility of the talk descriptions.

Loading thumbnail…

Untitled

This example presents a schedule of mathematics seminars, listing dates, speakers, and talk titles in an HTML table. The table includes expandable accordion panels for details and external links to videos and reference materials. It uses a CSS tab interface to switch between semesters, with JavaScript-free tab switching via the `:checked` pseudo-class and radio inputs. The page relies on HTML tables, the `details` analogy through custom accordion buttons, and styles from inline `<style>` blocks for layout and interaction.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 starter template that renders the text “Hello D3 version 7” directly into the page body. It loads D3 from a CDN and uses the `select` method to target the body element and the `text` method to set its content. The page also includes a separate dependency graph visualization built with d3-graphviz and hpcc-js, which renders a DOT graph and enables click interactions on nodes to show related statements.