K

katebacon32

@katebacon32·29 public vizzes

Loading thumbnail…

Untitled

A simple SVG polygon is drawn on a blank canvas, using a custom `Polygon` constructor that wraps the native SVG `polygon` element and its `points` attribute. The code initializes a single shape with five coordinates and a dark blue fill. The page is centered using flexbox in CSS, with no D3 library calls present despite the README’s mention of D3 version 6. The visualization demonstrates basic SVG creation and manipulation through vanilla JavaScript, appending the element directly to the body.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with an animated expression. It shows a static face whose eyebrows smoothly move up and down over two-second intervals, using SVG shapes composed of circles, rectangles, and a path-based mouth. The code leverages D3 v5’s `select` and `append` methods for element creation, `arc()` for the mouth’s geometry, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The animation runs automatically, cycling the eyebrows between raised and neutral positions.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This SVG example explores shape, color, and interactivity using custom paths and CSS transitions. A stylized funnel shape is rendered with a multi-stop linear gradient defined in SVG `<defs>`, creating a banded color effect. The page also includes a heart path with a dashed stroke that animates its offset on hover via CSS `transition`. Additional CSS demonstrates hover effects on a hidden division. The example uses plain SVG elements and CSS styling, including the `stroke-dasharray` and `stroke-dashoffset` properties for path animation.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js to draw a simple, animated smiley face in an SVG canvas. The code constructs the face from basic shapes—a yellow circle for the head, two circles for the eyes, rectangles for the eyebrows, and a path for the mouth—using `select` and `append` for DOM manipulation. The animation runs continuously, moving the eyebrows up and down via chained `transition().duration()` calls that alter the group’s `transform` attribute over two-second intervals. The data is entirely hardcoded, with no external dataset.

Loading thumbnail…

Let's turn a face into a funnel

A smiling face composed of yellow and black circles is drawn inside a full-screen SVG using React components. The face includes two eyes and a head, with dimensions calculated from the window size. The code uses React and ReactDOM to render SVG elements, with circle positions and radii defined as constants for eyes, mouth, and stroke width. The rendering adapts to the viewport, centering the face dynamically based on the current window dimensions.

Loading thumbnail…

Funnel Attempt 2

This example shows a simple smiley face rendered as an SVG, with the face elements positioned based on the browser window dimensions. The code uses React to define the SVG structure, calculating the center point and various facial feature offsets from `window.innerWidth` and `window.innerHeight`. A commented-out static SVG version with a yellow circle, eyes, and a mouth is also included for reference. The live implementation renders a single path element that forms a curved, funnel-like shape, while the full smiley face details remain incomplete in the active code.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The code uses D3.js to select the SVG element, append groups for facial features, and apply geometric attributes like radius and positioning. An animated sequence moves the eyebrows up and down by chaining two d3 `transition` calls, each with a 2000-millisecond duration. The mouth is created with D3's `arc` function, defining inner and outer radii and angle parameters.

Loading thumbnail…

Funnel Points

This example displays the top 10 most populous countries as horizontal bars, with each bar’s length proportional to its student count. The chart uses React for component structure and d3.scaleBand and d3.scaleLinear for positioning, while d3.csv loads data from a GitHub gist. Axes are rendered as SVG elements with tick labels, and the bars include tooltips via SVG <title> tags.

Loading thumbnail…

Fork of Stylized bar chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars with a stylized, minimalist aesthetic. Built with React and D3 v6, it loads data from a CSV via `d3.csv` and renders SVG elements. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and a `format` function to abbreviate population values in billions. Hovering over a bar reveals a tooltip with the full population figure.

Loading thumbnail…

World Map

A world map visualizes global temperature data over time, displaying a smooth curve and individual data points across a time-series chart. The visualization uses D3 v5 with React, rendering as SVG. It employs `scaleTime` and `scaleLinear` for axes, `line` with `curveNatural` for the path, and `json` to load geographic data from the world-atlas package, though the map itself is not drawn.

Loading thumbnail…

Stylized Bar Chart with Label

This stylized bar chart visualizes the top 10 most populous countries using a horizontal bar layout with a custom label for the population axis. The chart renders in SVG via React, with bars colored in blue and axis ticks styled in muted gray. The code uses D3 v5 APIs such as `scaleBand`, `scaleLinear`, `max`, and `format`, along with React hooks (`useState`, `useEffect`) to load data. The population values come from the United Nations World Population Prospects 2019 dataset, fetched as CSV and formatted in billions with a custom tick formatter.

Loading thumbnail…

Fork of Bar chart with D3.js

This fork of a D3.js bar chart visualizes funnel volumes across seven stages of a student admissions process, from inquiries to matriculants, based on data from Stack Overflow, 2019. The chart uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the categorical x-axis, and `d3.axisLeft`/`d3.axisBottom` to render axes and gridlines. Hovering over a bar triggers an animated `transition` that highlights the bar, draws a dashed limit line, and displays the percentage divergence between each bar’s value and the hovered bar’s value.

Loading thumbnail…

Working with Time

A temperature time-series chart drawn in SVG shows how San Francisco temperatures fluctuate over one week, using a smooth natural curve to connect daily readings and small circles marking exact observations. Built with React and D3 v5, the visualization employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, while `line` with `curveNatural` renders the path. Data from the UCI Machine Learning Repository's week_temperature_sf.csv is loaded via `csv`, and hover tooltips display the day via `timeFormat("%a")`.

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing sepal length against sepal width with each flower encoded as a circular mark. Built with React and D3 v5, it renders to SVG, using `scaleLinear` for both axes and the `extent` function to set domains automatically. The code separates axis rendering into `AxisBottom` and `AxisLeft` components, while the `Marks` component draws circles with tooltips. Data loads from a CSV file via `useData`, which fetches and parses the remote dataset.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using horizontal bars colored in blue. The visualization shows population values from the United Nations World Population Prospects 2019 dataset, with country names on the left axis and formatted population numbers on the bottom axis. The React-based implementation uses d3.scaleBand and d3.scaleLinear for positioning, d3.csv for data loading, and renders bars as SVG rectangles with embedded tooltips showing formatted values. Custom axis components generate ticks and labels with a light sans-serif font styling.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using population data loaded from a CSV file hosted on GitHub. The code combines React for component rendering with D3 utilities `csv`, `scaleBand`, and `scaleLinear` to parse the data and set up the scales for the chart. Each country is drawn as an SVG `<rect>` element, with the bar width proportional to its population. The visualization demonstrates how D3’s data-loading and scaling functions can be integrated directly into a React component’s state and effect hooks.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst visualization of CSS named colors, with each color occupying a single pie slice arranged around a central point. The code loads a CSV dataset of named colors using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading. D3’s `pie` function computes the angular layout, while the `arc` generator draws each SVG `<path>` with the fill color taken from the dataset’s `'RGB hex value'` column. The visualization demonstrates a React component rendering D3-computed geometry directly into SVG elements.

Loading thumbnail…

Rendering data with React

This example renders the CSS named colors dataset as a vertical stack of colored horizontal stripes. It loads the data from a CSV file using D3's `csv` utility, stores it in React state with `useState`, and renders each row as a `<div>` element whose background color is set to the `'RGB hex value'`. The visualization demonstrates how React can manage asynchronous data loading and map data to SVG or HTML elements, using ReactDOM to mount the app.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example fetches a CSV file containing CSS named colors and displays a summary of its size, row count, and column count in large text. It uses the Fetch API to retrieve the data and d3.csv to parse it, then d3.csvFormat and d3.csv.columns to compute the metrics. The visualization is a minimal HTML page styled with CSS, demonstrating basic data-loading workflow with D3 v6 in a React context.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the loading and parsing of CSV data by fetching a remote file of CSS named colors and displaying summary statistics about it. The visualization shows the data size in kilobytes, the number of rows, and the number of columns as large, centered text on a plain HTML page. It uses the D3.js v6 library’s `d3.csv` method to parse the data and `d3.csvFormat` to calculate its size, alongside the native `fetch` API for retrieving the file. The data originates from a GitHub Gist.

Loading thumbnail…

Vega-Lite API Template - Bar Chart Largest Countries

This example displays a stacked bar chart of the largest countries by population, with bars segmented by religion and sorted by total population descending. The visualization uses the Vega-Lite API to define the chart’s marks and encodings, while D3.js fetches CSV data from a GitHub-hosted dataset. A custom configuration adjusts axis styling and typography, and Vega-Tooltip provides interactive hover details.

Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

A streamgraph visualization shows the total number of persons of concern—including refugees, asylum-seekers, and internally displaced persons—grouped by country of origin, filtered to countries with over one million people. The chart uses d3.stack with stackOffsetWiggle and stackOrderInsideOut to create the flowing layers, d3.area with curveBasis for smooth shapes, and d3-area-label for positioning labels. Data comes from UNHCR Population Statistics, with values interpolated across years and rendered as SVG. The visualization is a fork of the original Persons of Concern StreamGraph by Origin.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset from the @observablehq/flare library. Clicking on an arc zooms into that subtree, with animated transitions between views. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.interpolate` to compute the radial layout and smooth interpolation. It renders with SVG paths and text, using a rainbow color scale and `transition.attrTween` for the animation, all orchestrated via the Observablehq stdlib.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template - Temperatures

This example visualizes weekly San Francisco temperature data as a line chart built with the Vega-Lite API in a D3.js environment. It shows temperature fluctuations over time, with tooltips displaying specific values. The code imports and configures vega, vega-lite, vega-lite-api, and vega-tooltip, using d3.csv to load the data from a GitHub Gist. The chart is rendered as a full-window SVG, with axes and labels customized through hand-defined configuration objects to improve readability.

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between vehicle weight, horsepower, and miles per gallon using the auto-mpg dataset. Semicircle marks represent individual car models, with color encoding weight and size encoding fuel efficiency, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG visualization. The chart loads CSV data through d3.csv, applies custom axis and label styling from a configuration object, and automatically fits to the browser window dimensions.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load CSV data with D3 and manage it with React state, displaying a text summary of the dataset instead of a visualization. The app fetches a CSV containing CSS named colors from a GitHub gist using d3.csv, stores the parsed result in React state via useEffect, and renders a message showing the data size, row count, and column count. D3 v6 and React 16.9 work together, with the message calculated using d3.csvFormat on the loaded data.

Loading thumbnail…

Mouse Follower

A yellow circle tracks the cursor across a 960 by 500 SVG canvas, updating its center position in real time. The React component uses the `useState` and `useCallback` hooks to manage mouse coordinates from the SVG `onMouseMove` event. Each pointer movement triggers a state update, which re-renders the circle’s `cx` and `cy` attributes via ReactDOM’s declarative rendering.

Loading thumbnail…

Fork of Smiley face part 1

A grid of eighteen smiley faces, each rendered as an SVG circle with eyes, a nose, and an arc-shaped mouth. The code uses React components to compose the face parts and D3's `arc` generator to draw the mouth path. Random values for eye offset, eye radius, and mouth dimensions create slight variations between faces, while all share a fixed background circle, stroke width, and color scheme. The faces are generated via `range` and mapped in the App component.

Loading thumbnail…

Smiley Face Part 1

This example renders a yellow smiley face in an SVG canvas using React and D3. It draws three circles for the face and eyes, plus a D3 `arc` path for the mouth, all centered on a translated group. The code uses ReactDOM to inject the markup into the page, with D3’s `arc()` API generating the mouth geometry and static dimensions defining the layout. The result is a simple, hard-coded illustration without interactivity.