Skip to main content
Log in
G

g_beck@coloradocollege.edu

@georgeb3ck·10 public vizzes

Loading thumbnail…

Map and Interactive Bar Chart

This interactive visualization explores the dominance of different nations in the Tour de France across time. A choropleth map and bar chart update synchronously as users drag a slider from 1903 to 2023, revealing cumulative wins per country. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection, while bars employ `d3.scaleBand` and `d3.scaleOrdinal`. Hovering highlights matching countries and bars, with a tooltip showing year, country, and win count. Data comes from CSV and GeoJSON sources. Non-held years display a notation.

May 13, 2024
Loading thumbnail…

Map TDF wins

This example juxtaposes a world map with a scatter plot to explore Tour de France victories by country. Hovering over a country on the map highlights all its associated win-dots, while hovering over a dot highlights its country and enlarges the dot. The visualization uses `d3.geoEqualEarth` and `d3.geoPath` for the map, with a log color scale for country win counts. The scatter plot uses `d3.scaleLinear` and `d3.scaleOrdinal` axes, with interactive `mouseover` and `mouseleave` events linking the two views. Data includes world GeoJSON and cleaned TDF rider statistics.

May 12, 2024
Loading thumbnail…

Interactive Line, TDF time gaps

This interactive scatterplot visualizes time gaps between first place and other positions in the Tour de France from 1903 to 2023, with data sourced from a GitHub-hosted CSV. Users select which gap to display via a dropdown menu, and each dot represents a race year with tooltips revealing winner details and converted time formats. The visualization uses d3.v7 with SVG rendering, d3.line for trend paths, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for tick marks. Manual Y-axis range inputs allow dynamic rescaling, though the underlying data spans large temporal and numerical domains.

May 12, 2024
Loading thumbnail…

Fork of Chloropleth - TDF

This visualization pairs a choropleth map with a scatterplot to explore Tour de France rider data. The map shades countries by the number of riders, while the scatterplot plots winning margin against year. Hovering over either a country or a rider dot highlights corresponding elements across both views using shared IDs and D3 selections. The code uses `d3.geoEqualEarth` and `d3.geoPath` for the map, with SVG rendering driven by `d3.csv` and `d3.json` data loading.

May 9, 2024
Loading thumbnail…

interactive Bar Chart

This interactive bar chart illustrates the cumulative number of Tour de France wins per country from 1903 to 2023. A slider allows viewers to select a specific year, dynamically updating the horizontal bars to reflect the total wins for each nation up to that point, with years when the race was not held clearly annotated. The visualization uses the D3.js v6 library, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for chart construction. Bar transitions are animated via the `.transition()` method, and the data originates from a CSV file containing country-wise win totals per year.

May 9, 2024
Loading thumbnail…

Fork of Blank Slate

This example demonstrates the basic "Hello World" template for the VizHub V3 runtime environment, displaying the text "Hello World!" in a large, centered font within a DIV container. The code exports a `main` function that receives the `container` element and sets its inner HTML with inline styling for the font size. It highlights the simplified entry point and the interactive Alt-drag feature that allows live adjustment of numeric values like font size.

May 9, 2024
Loading thumbnail…

Fork of Making a Bar Chart

A slider-driven bar chart displays the number of Tour de France wins by country for a selected year, with data from a GitHub-hosted CSV. The visualization updates in response to slider input, re-rendering the chart with a new year’s dataset via D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. SVG rectangles represent each country’s win count, styled with steelblue fill, while the slider’s `change` event triggers a redraw using the stored global data.

May 8, 2024
Loading thumbnail…

Fork of Interactive Scatter Plot

This interactive scatter plot explores relationships between variables like GDP, CPI, and birth rate across countries, with each point representing a country and colored by continent. Users can switch the x- and y-axis variables via dropdown menus and click legend entries to highlight specific continents. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and the `axes` helper from `@curran/responsive-axes`, with hover tooltips showing country names. Data comes from the World Data 2023 CSV, and the visualization updates dynamically through D3's data joins and transition methods.

Apr 30, 2024
Loading thumbnail…

World Data Interactive Scatter Plot

This interactive scatter plot explores top football league scorers data from Kaggle, plotting player statistics across selectable metrics like goals, shots, expected goals, and minutes played. Users can switch between different statistical axes and filter by year from 2016 to 2020. The visualization uses D3 scales, axes, and an ordinal color scale to distinguish leagues, with interactive color legend filtering and hover tooltips. The animation-driven rendering updates the scatter plot dynamically based on user selections, highlighting points by league when hovering over the legend.

Apr 30, 2024
Loading thumbnail…

Fork of Interactive Scatter Plot

This animated scatter plot explores top football league scorers, showing relationships between metrics like goals, shots, and expected goals across seasons. Users can select different x- and y-axis variables and filter by year via dropdown menus. D3 scales and axes map the data, while colored points represent leagues, with a color legend that responds to clicks and double-clicks to filter points by hovering. The visualization uses D3’s `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and SVG `circle` elements, with data sourced from a Kaggle dataset on football scorers.

Apr 30, 2024