100%

Untitled

✓ Published0🌍 Public

Last edited Jun 24, 2023

Created on Jun 23, 2023

This visualization shows a climbing career timeline as a grid of colored tiles, with each tile representing a single redpoint, flash, or onsite ascent. Grades are listed along the left axis, and the tiles are arranged chronologically within each grade band. A dropdown menu filters the display by climbing angle, such as overhang or slab. The code uses d3.csv to load ascent data, d3.group to organize routes by difficulty, and D3’s selection and data-join methods to append SVG rectangles and text labels.

AI-generated description

8A visualization

Inspired by Jesse Firestone's instagram post: https://www.instagram.com/p/CgR8PrmLoyn/

To update this with your own 8a data you'll have to:

Make sure that you are using the angle tags on 8a for all your ascents
Copy your ascent json (replace user-name with your username): https://www.8a.nu/api/users/user-name/ascents?category=sportclimbing&pageIndex=0&pageSize=500&sortField=grade_desc&timeFilter=0&gradeFilter=0&typeFilter=&isAscented=true&searchQuery=&showRepeats=false%27
Convert the json into a csv using a service like this: https://www.convertcsv.com/json-to-csv.htm
Copy the csv data into ascents.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This animated bar chart displays the total career trophies of various individuals, with a Y-axis ranging from 30 to 45. Using D3 v4, the visualization renders as SVG bars that grow from a baseline via `transition` with staggered delays. Data is loaded from a remote CSV file, and axes are constructed with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The plot scale is derived from a responsive constant, and bars are colored teal.

SSimon Hackbert

74% match

Loading thumbnail…

Untitled

The visualization displays the "Life Ladder Trend" from 2005 to 2020, plotting mean happiness scores over time for multiple countries and regional groupings. It uses an SVG line chart with a time-scaled x-axis and a linear y-axis, rendered with D3.js v6 in a React framework. The code filters and aggregates data from a CSV source, assigns distinct colors to each country, and includes gridlines, a title, and a legend. The visualization supports animation, though the provided code focuses on static line rendering with interactive color mapping.

Yyinghao11

73% match

Loading thumbnail…

Untitled

A grid of 3D bars rises from a flat plane, each bar labeled with its height value on top. The visualization uses d3-3d to project cube geometries into SVG paths, with interactive drag rotation that updates the perspective in real time. D3 v4 handles the data binding, transitions, and text tweening, while color comes from the categorical scheme. A button triggers a full data refresh with animated transitions.

Aavnreddy95

73% match

Loading thumbnail…

Untitled

This interactive stacked area chart displays the changing values of multiple categories over time, using the D3.js library (version 2) with SVG rendering and animations. The chart employs a silhouette offset layout to visualize data from a CSV file, with color-coded layers representing different groups. Hovering over a layer highlights it and shows a tooltip with the category name and its specific value, while mouse movement on the chart also triggers a vertical guideline.

LLAOKE1997

72% match

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar

72% match

Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115

72% match

Loading thumbnail…

Untitled

This time series displays data points over a date range, using a blue-to-red vertical gradient to encode value magnitude along the line. The visualization reads a comma-separated dataset from an external URL and parses dates with `d3.timeParse`. It constructs an SVG line chart, computing scales with `d3.scaleTime` and `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A `linearGradient` element is defined and applied as the stroke, with the path generated by `d3.line`.

Ggabrielribeirob

72% match

Loading thumbnail…

Untitled

This interactive heatmap displays hourly activity counts for each date, using a color gradient to show intensity variations. The visualization renders a grid of tiles positioned by date and hour bucket, with color encoding count values via a sequential scale. It cycles through multiple color interpolators automatically, including Viridis, Inferno, and sequential schemes from d3-scale-chromatic, while allowing manual selection. The code uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleSequential to map values, with SVG rectangles and d3.axisBottom/d3.axisLeft for the chart’s axes.

Mmkt-ds

72% match