K

KacieW

@KacieW·30 public vizzes

Loading thumbnail…

Rank Chart

This chart tracks the changing intra-university National Student Survey ranks of Imperial College departments between 2012 and 2017, highlighting select departments from an array. It uses D3 v4 with SVG and animation to draw ranked lines over time. A multi-line Voronoi diagram (`d3.voronoi`) powers the tooltip, while `d3.scaleOrdinal` assigns colors and `d3.line`, `d3.axisBottom`, and `d3.axisLeft` structure the visualization. Data comes from a local CSV file, rendered with open-source code inspired by Nadieh Bremer’s baby-name chart.

Loading thumbnail…

fresh block

A donut chart displays the value and percentage for eight iPad models, with each wedge colored by a categorical scale and connected to a labeled callout line. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to generate the arcs, while a custom `relax` function iteratively adjusts overlapping text labels, shifting their `y` positions and updating the corresponding line endpoints to reduce clutter. The code mixes D3 v3 and v4 scripts, rendering to SVG.

Loading thumbnail…

Pie Chart Labels with missing data

This donut chart demonstrates how to label slices with external text and leader lines, and it gracefully handles missing or new data when the button is clicked. The randomized data updates trigger smooth animated transitions using `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate between states. Labels and polylines reposition via `outerArc.centroid` and tweened transforms, with the duration controlled by a slider. The example uses D3 v3 to render SVG, and it merges old and new datasets to keep removed slices from disappearing abruptly.

Loading thumbnail…

Inline Labels

A multi-series line chart of apple and banana harvest data over seven years uses inline labels placed directly on each data point to show the values. The code, written in D3 v4, positions label text for each point and then calculates a white background rectangle behind it using `getBBox()` to improve legibility. Series names are appended to the final label of each line via a `tspan`, with colors assigned by `d3.scaleCategory10`. Data is loaded from a TSV file using `d3.requestTsv` and parsed with `d3.timeParse`.

Loading thumbnail…

fresh block

A single blue line traces Amazon's daily closing stock price from July to February, showing a gradual rise with notable dips and peaks. The SVG chart includes labeled axes for date and price in dollars. Built with D3.js v3, it loads data from a CSV file, uses `d3.time.scale` and `d3.svg.line` to map the temporal and linear values, and renders the line and axes via SVG paths within a viewBox.

Loading thumbnail…

fresh block

A bar chart displays the frequency of each letter in the English alphabet, with steelblue bars that turn brown on hover. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` to map letters and frequencies, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data comes from a tab-separated `data.tsv` file, and the visualization is drawn as SVG inside a viewBox.

Loading thumbnail…

Reusable Line Chart VK

This chart displays four time-series variables from a CSV dataset, plotted over a shared x-axis of years where each line is color-coded and can be toggled on or off by clicking legend markers. Built with D3 v3, the SVG rendering is fully responsive, resizing with the browser window while custom margins, axis labels, and chart dimensions are configurable. The implementation uses D3’s `d3.scale.category10` for automatic color assignment, `d3.bisector` for data interpolation, and `d3.csv` for data ingestion. Animated tooltips highlight data points on hover, while the layout adapts via CSS media queries.

Loading thumbnail…

"Percent complete" bar

This example visualizes progress as two rounded horizontal bars: the first shows the total value in white, and the second overlays the current value in blue, with numeric labels on each bar. It uses D3.js v2 with a linear scale to map the data values [900, 350] to pixel widths within a fixed 200-pixel SVG. The code selects SVG rect elements via `chart.selectAll("rect")` and appends text labels using `chart.selectAll("text")`, with styling defined in an external CSS file.

Loading thumbnail…

fresh block

This grouped bar chart compares “Not Satisfied” percentages between Men and Women, using two simple bars on a shared linear scale. The visualization is built with D3 v3 and rendered as SVG, with each group positioned by an ordinal scale (x0) and each bar sized by a linear y-axis. Color is assigned via d3.scale.category20, and the tooltip and axis code is present but commented out, leaving only the core bar rendering active.

Loading thumbnail…

fresh block

A stacked bar chart displays the causes of mortality—wounds, other, and disease—among a historical population over several months in 1855–1856. The visualization uses a horizontal orientation, with each bar segmented by cause and colored via a categorical scale. Built with D3 v4, it employs `d3.stack()` to compute layer positions, `d3.scaleBand` for the time-based y-axis, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is parsed with `d3.timeParse` and rendered as SVG rectangles.

Loading thumbnail…

d3.js learning

This example visualizes fruit production data for two years as a stacked bar chart using D3.js v3. The chart compares four fruit categories—Red Delicious apples, McIntosh apples, oranges, and pears—across 2006 and 2007, with each bar segment sized by its value. It uses `d3.layout.stack()` to compute stack offsets, `d3.scale.ordinal()` for the x-axis, `d3.scale.linear()` for the y-axis, and renders SVG rectangles for each segment. Mouseover events reveal a tooltip displaying the exact value, while a legend identifies each fruit category.

Loading thumbnail…

fresh block

This example shows a simple pie chart visualizing three data values (10, 20, 100) as proportional slices. The chart uses an SVG rendering with D3 v4, creating arcs with a white stroke separation. Colors are assigned via a categorical ordinal scale with a muted three-color palette. The pie layout uses `d3.pie` with null sorting, while `d3.arc` defines the slice geometry, keeping the label text commented out. The visualization is static, with the data hardcoded in the script.

Loading thumbnail…

fresh block

A grouped bar chart compares satisfaction levels between men and women, with each gender broken into four categories: Not Satisfied, Not Much Satisfied, Satisfied, and Very Satisfied. The bars are colored by category using a categorical color scale, and a tooltip appears on mouseover. Built with D3 v3, the visualization uses ordinal scales for the x-axis groups and categories, a linear scale for the y-axis, and SVG rendering. The data is hardcoded in the script as an array of objects with percentage values for each group.

Loading thumbnail…

fresh block

A bar chart displays two healthcare claims, each with a `chargeAmount` and `allowedAmount`, using static data defined in the script. The SVG chart is selected via `d3.select` and assigned width and height attributes, though the code does not yet render bars or axes. It sets a background color and binds the data using `.data()`, but no scales or shapes are drawn. The example relies on d3.v4 and presents an incomplete or early-stage visualization.

Loading thumbnail…

fresh block

This example displays a simple line chart of six numeric values from a static array, rendered as a single green path on a blank SVG canvas. The visualization uses D3 v4 to create linear scales for the x- and y-axes, with the x domain set to the indices of the data points and the y domain scaled from zero to the maximum value. An SVG path is drawn using `d3.line()` with coordinates mapped through those scales. The chart does not include axes, labels, or gridlines, showing only the raw trend line.

Loading thumbnail…

fresh block

A vertical bar chart displays the relative frequencies of the first five letters, A through E, using bright green bars. Built with D3 v4, the visualization employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering positions each rectangle using the scales, and the data is hardcoded as an array of letter-frequency objects.

Loading thumbnail…

Day3-30day30sites

This example presents a visual tour of the coastal city of Dalian, beginning with a slideshow of three photographs that cycle every two seconds, each captioned with a landmark name. Below the slideshow, two static image-and-text cards describe local seafood and Tiger Beach Ocean Park. The page also embeds a Google Map centered on Dalian (latitude 38.915883, longitude 121.619674) with a single marker, using the Google Maps JavaScript API’s `google.maps.Map` and `google.maps.Marker` objects. All images are pulled from external URLs.

Loading thumbnail…

Day2 - 30day30sites

This example presents a full-screen, scroll-driven exploration of the four seasons, using large background images and fixed-position text overlays to label each section. The page relies on background-attachment: fixed to create parallax-style imagery as the user scrolls, with anchor links in a navigation bar jumping to corresponding seasonal sections. Content is structured with plain HTML and CSS only, using background-image URLs for the season photos and absolute positioning with transforms to place the headings. No JavaScript libraries are used; the implementation is purely static markup and styling.

Loading thumbnail…

JS Bin-neighborhood map

This interactive map shows the locations of six San Francisco restaurants, with corresponding list items below the map. The map is built using the Google Maps JavaScript API, while AngularJS and jQuery are included but not actively used. Users can filter the visible restaurants by typing in a search input, which hides non-matching list items and regenerates markers on the map. Clicking either a marker or a visible list item opens an info window displaying the restaurant’s name. Data is hard-coded as an array of coordinates and names.

Loading thumbnail…

JS Bin

This interactive dog clicker displays a list of dog names and images, allowing users to select a dog and click its photo to increment a visible click counter. Clicking the "Admin Change" button reveals a form for editing the selected dog’s name, image URL, and click count, with save and cancel options. The interface is built with plain HTML, CSS, and vanilla JavaScript, using DOM manipulation methods like `createElement`, `addEventListener`, and `classList.toggle` to manage the view and form interactions.

Loading thumbnail…

JS Bin

A clickable list of dog breeds and scenes displays a corresponding image and a click counter. The interface presents eight dog photos from Flickr, each paired with a name. Selecting a name turns it green and loads the associated picture; clicking the image increments and displays its specific count. The code uses vanilla JavaScript with DOM manipulation via `document.createElement` and `addEventListener` to handle the interactions, storing data in a JavaScript object model.

Loading thumbnail…

JS Bin

The visualization is a dog image selector that displays a photo of a dog when a user clicks its name in a list. Each click makes the corresponding image visible, while hiding all others, and inserts a caption with the dog's name above the image. The page uses plain JavaScript with `addEventListener` for click handling, `classList.add` to toggle the `active` class, and `createElement`/`insertBefore` to manage the caption. No external libraries are used; the images are loaded from static Flickr URLs via `img` tags.

Loading thumbnail…

Effective JavaScript: Frogger

This is a complete implementation of the arcade game Frogger, rendered as an interactive animation on an HTML5 Canvas. The player controls a character with arrow keys to navigate across lanes of moving enemies, earning points by reaching the top while managing a limited number of lives. The code uses the game loop in `engine.js` with `requestAnimationFrame` for smooth updates, and custom `Enemy` and `Player` classes handle movement, collision detection, and score/life tracking. Sprites are loaded via the `Resources` utility and drawn using the Canvas `drawImage` method.

Loading thumbnail…

simple quiz

This simple quiz demonstrates a login-gated question interface that remembers returning users via cookies and localStorage. The page shows a start screen with a login form, then cycles through multiple-choice questions with radio buttons and previous/next navigation. JavaScript stores user answers in an array and compares them against the hardcoded correct answers to generate a results page. The code uses jQuery for DOM manipulation and event handling, along with native browser APIs like `document.cookie` and `localStorage.setItem`.

Loading thumbnail…

step by step form

This example demonstrates a multi-step form with a visual progress tracker. The form uses a numbered list of four steps, with the active step highlighted in purple, and each step displays as an animated sliding fieldset. The code uses vanilla JavaScript event listeners to navigate between fieldsets, storing input values in a Map array. CSS animations (`showme` and `hideme`) control the slide transitions, while the progress bar is built with styled list items and counters. The final review page displays all collected data as text before submission.

Loading thumbnail…

form with strip background and css animation bubbles

A form with floating labels sits on a striped background made via repeated CSS `linear-gradient` layers. Eight geometric shapes (circles, triangles, squares) float upward from the bottom in CSS keyframe animations (`shapes1`, `shapes2`, `shapes3`) with varied delays, durations, and colors, some using `border-radius` and border triangles. JavaScript event listeners on `focusin`/`focusout` toggle an `.active` class to animate labels. Password validation shows requirements when invalid, using `:invalid` and `:placeholder-shown` selectors. No external libraries are used; all rendering relies on native CSS and JavaScript.

Loading thumbnail…

want to cook-website, not finished yet.

This example is an unfinished recipe-sharing website called “Want To Cook,” built with HTML, CSS, and vanilla JavaScript. It shows a homepage with a large hero image and a breakfast page listing two dishes, each with a photo, description, and a clickable heart-shaped “likes” button. The site uses CSS Flexbox for layout, inline SVG-free CSS shapes for the heart icon, and JavaScript event listeners to toggle login/signup forms and the liked state. Images are hotlinked from xiachufang.com, and the page includes a footer crediting that source.

Loading thumbnail…

Build a Random Quote Machine - project from freecodecamp

This random quote machine displays a curated set of movie and historical quotes, each paired with its author. Clicking the “New Quote” button or loading the page triggers a function that selects a random entry from a hardcoded Map and displays it. The interface simultaneously changes both the page background and button colors to a randomly generated RGB value, using JavaScript’s `Math.random` and direct DOM manipulation via `querySelectorAll` and `innerHTML`. Social sharing links for Twitter and Facebook are included.

Loading thumbnail…

Auto Image Slider

This example displays an automatic image slider for navigating three nature photographs. It cycles through images every two seconds, with preview and next arrow buttons and clickable dots for direct slide selection. The code uses vanilla JavaScript with `getElementsByClassName`, `addEventListener`, and `setTimeout` for automation, while CSS manages positioning, transitions, and active states for navigation elements.

Loading thumbnail…

Birthday

The visualization presents a whimsical birthday greeting: a glowing moon, a candle-lit cake, and a corgi dog rendered with CSS. Animated fireflies drift across a gradient night sky, drawn using the Canvas API and a custom JavaScript animation loop. Text messages, "Happy Birthday!" and "I am a cute little corgi...", appear letter-by-letter via DOM manipulation. The scene is built from HTML/CSS SVG shapes, with styles referenced from external CodePen sources.