Skip to main content
100%

A 5hrs X 6weeks Bootcamp for Complete New Web Design Learner

✓ Published0🌍 Public
Aamazingandyyy
Last edited Feb 27, 2017
Created on Feb 10, 2017

The visualization maps a six-week bootcamp curriculum for novice web designers, showing weekly topics, projects, and homework assignments. It uses a structured grid layout where each week is represented as a column, with syllabus items, project numbers, and homework tasks as labeled cells. The data comes from a markdown file authored by amazingandyyy, rendered with d3.js to create an interactive timetable. Hovering over each cell highlights the associated week’s content, and the tooltip displays the full task description. The visualization emphasizes the progression from HTML basics to deployment and final project interviews.

AI-generated description

Similar vizzes

Loading thumbnail…

HBX

This interactive calendar displays HBX course schedules by week, with each cell representing a day and color-coded progress bars tracking completion. The visualization uses D3.js (v3) to render the calendar grid and animated progress indicators, while Flickity provides carousel navigation for switching between course views. Data is loaded from static JSON files, and the interface relies on Bootstrap for layout, Font Awesome for icons, and custom CSS for the Harvard-themed styling.

Aandresin87
64% match
Loading thumbnail…

List of Workshops

This example visualizes the schedule and topics of a fall 2015 workshop series, using a gist of raw Markdown as its data source. It renders each workshop as a distinct element, likely a card or list item, with titles, instructors, and dates drawn directly from the parsed text. The code employs a custom JavaScript parser to extract session details and uses d3.js for layout and transitions, though the core rendering relies on simple DOM manipulation via `d3.select` and `text` methods. The visualization emphasizes chronological ordering and thematic grouping, though it does not show interactive filtering or dynamic updates beyond static display.

CCliffordAnderson
62% match
Loading thumbnail…

plan of attack for Code with a Cause

This visualization presents a step-by-step plan of attack for a hackathon project, outlining the workflow from goal-setting through prototyping to construction. It uses a simple text-based list rendered with HTML and CSS, where each numbered step appears as a separate line item. The code relies on basic DOM manipulation via JavaScript to dynamically display the plan’s content from a plain-text source, with no external libraries or data APIs involved. The layout is static and readable, emphasizing the sequential nature of the plan without interactive elements.

Aandrewfulrich
61% match
Loading thumbnail…

Gist 1b0b20e0ad0d7c0f4d873ef2700bc4ff

This visualization presents a weekly job-application tracker from a markdown checklist, rendered as an interactive bubble chart. The data shows two goal categories—finishing take-home projects and applying to twenty specific companies—with completion states indicated by checkboxes. The code uses d3.forceSimulation to position bubbles by category, with each bubble sized by the length of the company name and colored by completion status. Hover interactions reveal the company name and status via tooltips, while the underlying data is parsed directly from the markdown structure. The rendering approach emphasizes the progress toward the application goal through spatial grouping and visual encoding of checkbox states.

FFrankieFabuloso
61% match
Loading thumbnail…

d3.js learning

A stacked column chart displays weekly data for six users across six weeks, with each column segment colored per user and labeled by date. Built with D3 v3's stack layout, the chart renders as SVG with axes and gridlines. Hovering over any segment reveals a tooltip that tracks the mouse position, showing the exact value. The chart is constructed using a margin convention, ordinal x-scale for dates, and linear y-scale for cumulative sums.

Aachalvs
61% match
Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates an interactive D3 v4 workshop that teaches basic HTML, d3, and data binding through a hands-on exercise. It shows a button that, when clicked, runs a d3 code snippet targeting paragraphs inside a sandboxed div, while a checklist outlines tasks like adding paragraphs, manipulating text, and binding arrays. The code uses d3.js v4, with d3.select and d3.selectAll to handle DOM selection and manipulation, plus event handling for button clicks. The visualization renders static HTML paragraphs as the primary data display, with the exercise structure guiding users through progressive coding challenges.

IIgathi
61% match
Loading thumbnail…

Fork of A week in San Francisco - Line chart

This visualization displays course demand statistics as multi-line time series, with each line representing a different course ID and tracking count values over dates. The chart uses D3 v5 with SVG rendering, employing `d3.nest()` to group data by course ID, `d3.line()` with `curveBasis` for smooth paths, and `scaleTime`/`scaleLinear` axes. A color legend appears on the right, generated by a custom `colorLegend` module, while the data is filtered to show only the first three courses from a CSV source.

Bbradleyyam
60% match
Loading thumbnail…

Data visualization Project

This visualization presents a dashboard for an art and technology workshop dataset, showing attendance metrics and registration trends. It uses D3 v7 to render SVG charts, including a track-based attendance breakdown and a registered-versus-attended comparison. The interface includes interactive controls like dropdowns and text inputs for filtering, alongside summary cards displaying key statistics. The visualization is built with Vue, incorporates custom CSS styling, and references embedded PNG images for chart representations.

Ssahasrakaturi91@gmail.com
60% match