colbygogan

@colbygogan·7 public vizzes

Untitled

This example visualizes the population of countries by religion, with bars sized by population and colored by religion. The data comes from a CSV file of religion by country, fetched using D3’s `csv` method. Built with the `vega-lite-api`, it uses a bar mark, encodes country on the x-axis, population on the y-axis, and religion for color, sorting by population in descending order. The visualization is rendered as an SVG and includes custom axis styling for readability.

May 2, 2023

Loading thumbnail…

datandata

An SVG line drawing of a human body uses colored strokes to outline organs: a red brain and heart, blue lungs, a green stomach, and purple intestines. The static vector shapes are rendered directly in the HTML, with CSS animation rules (`stroke-dasharray`, `stroke-dashoffset`, and `@keyframes`) defined but not applied to any elements in the markup. The example demonstrates basic SVG path and shape composition without JavaScript or external libraries.

Apr 29, 2023

Loading thumbnail…

Sliding Navigation Panel Example

This example demonstrates a sliding navigation panel that appears from the right side of the screen when a button is clicked. The panel, styled with the Bulma CSS framework, slides in and out using CSS `transition` properties on the `right` offset. Clicking outside the panel closes it. The page layout includes a fixed header, footer, and main content area, all styled with custom CSS classes, and uses JavaScript event listeners to toggle the panel's active state.

Apr 29, 2023

Loading thumbnail…

CSS Grid + Flexbox

This example demonstrates how CSS Grid and Flexbox layout techniques can be applied within a web page, using an SVG border image as a decorative element. The code defines an `app-container` div with a red border, which is customized via the `border-image` property that references an external SVG file (`border.svg`). The SVG itself contains a geometric network of interconnected lines and nodes, rendered in purple tones against a dark background, showcasing how vector graphics can be integrated as CSS styling components. The implementation relies on standard HTML structure and CSS styling, with the SVG rendering being the primary visual focus.

Jan 5, 2023

Loading thumbnail…

Fork of Fork of Fork of NASCAR Statistics Dashboard

This dashboard displays NASCAR statistics in a grid of six panels, each containing placeholder content derived from a CSV dataset of race winners by starting position. The interface uses React functional components with hooks to manage state and render the layout, while D3 v6 handles data loading through the `csv` method. A flexbox container positions the panels over a fixed viewport, with the React Dropdown library also included for potential interactive controls. The visualization relies on the `getData` async function to fetch and parse the external CSV source, though the displayed data values remain as static numbered placeholders.

Dec 9, 2022

Loading thumbnail…

Fork of Fork of Fork of NASCAR Statistics Dashboard

This dashboard presents a grid of six panels showing NASCAR race statistics, with distinct colored sections for a scatter plot, stacked bar chart, map, and simple bar chart. The visualization uses React to compose the layout and relies on reusable D3.js components for SVG axes, legends, and data marks. The ColorLegend module displays a static list of racing tracks with color swatches and labels, while other panels are initialized as empty containers. The dashboard imports a CSV dataset of race winners, which is prepared with type conversions for numerical fields like Payout and Caution Flags.

Dec 9, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of automobile data from the UCI Auto MPG dataset, showing horsepower over time. The chart colors the lines by weight and uses the `fieldT` and `fieldQ` encoding methods to map temporal and quantitative data. The D3-based `vega-lite-api` library, along with the `vega` and `vega-lite` rendering engines, produces an interactive SVG visualization with a tooltip displaying car names. The configuration sets custom axis and label styling for improved readability.

Dec 9, 2022