Run a race in every town in Connecticut: "elusive" races

100%

Run a race in every town in Connecticut: "elusive" races

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 14, 2018

This visualization shows the number of Run169-qualifying races in Connecticut for each month of 2017, highlighting "elusive" races from towns with two or fewer races. It uses d3.v4 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.csv` to load and map data. Bars are colored by past, current, or future months, with hover tooltips revealing race dates and towns. The data comes from debticonn.org, and the layout is styled with Roboto font and a clean, grid-free design.

AI-generated description

Run 169: Finding "elusive" races to run

Run 169 (a.k.a. Debticonn) is a society of people who want to run a road race in every one of Connecticut's 169 towns. There is no time limit and this can take many years. I recently joined, so I'm starting the journey. Some who are very advanced in this journey warned me that it's good to be strategic about choosing which towns to run first, because some only have one or two races a year. With this in mind, I created this visualization to help in planning which races to run. I wanted to include information at different levels: from an overall sense of how many races there are every month, to how many races of "elusive" towns there are, to the detailed schedule.

Source: Debticonn.org (original data)

Built with blockbuilder.org

The code was inspired by an example from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/5cb71249dcbfd635c794520aff45b89d'>Extremist Murders in the US</a>

forked from <a href='http://bl.ocks.org/jpasini/'>jpasini</a>'s block: <a href='http://bl.ocks.org/jpasini/b3aaf21d300f2ac2d8ed8e9587a173d7'>Run a race in every town in Connecticut: "elusive" races</a>

mit Licensed

Similar vizzes

Loading thumbnail…

A year of weekly running mileage

This radial heatmap visualizes a year of weekly running mileage, with runs plotted as bars radiating from the center. The distance (yellow) and elevation gain (blue) of individual runs are encoded along a circular time axis, with hover interactions revealing detailed tooltips. Using D3 v4 and SVG animations, the visualization applies a moving 7-day sum to calculate weekly mileage. Two interactive sliders adjust color thresholds (low/middle/high) that segment the data into three colored zones, and the underlying masked paths are redrawn dynamically as thresholds change, selectively coloring the bars. The example builds on Adam Pearce’s mask-based coloring technique to show how multiple color zones can be rendered in a single path.

663anp3ca

63% match

Loading thumbnail…

Untitled

This example shows the cumulative running total of a dataset from 1884 to 2010, with values increasing from 1 to over 160,000. The visualization renders as a solid red rectangular SVG area, though the code does not yet plot the data points. It uses D3 v6.5.0 to select the SVG element and apply a background color via inline styling. The data is loaded from a CSV file containing two columns: year and running_total. The page includes a tutorial video and basic setup for a homework assignment.

Jjeffgallini

62% match

Loading thumbnail…

Connecticut SAT Scores

This visualization, built with D3 v4, uses an SVG-based scatterplot to compare Connecticut school district SAT performance between 2012 and 2013. Each district is positioned by its participation rate on the x-axis and the percentage of students meeting the College and Career Readiness benchmark on the y-axis, with points sized by the number of test-takers. Color encodes the change in benchmark performance from 2012 to 2013, and a legend explains the scale. The chart is interactive, allowing users to explore the relationship between participation and performance across districts.

CCJKraenzle

61% match

Loading thumbnail…

ICE-5 Data visualization

This visualization displays a static SVG image of race cars alongside a summary of race data loaded from a remote CSV file. The page uses D3 v7’s `d3.csv` to fetch the dataset, then calculates and reports the file size in kilobytes, the number of rows, and the number of columns, displaying these metrics in a styled `<pre>` element. The SVG is embedded directly via an `<img>` tag, while the data source is linked externally. The interface is minimal, with large colored headings and a red message container.

RRahulChaitu999

60% match

Loading thumbnail…

Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of extinct animal races, ranking the top 20 countries by a numeric count. The bars are rendered as SVG rectangles using React, with the chart constructed through D3's `scaleBand` and `scaleLinear` functions to map data to positions. The code loads CSV data from a GitHub gist, then uses D3's `csv` parser and React's `useState`/`useEffect` hooks to manage the data loading and rendering lifecycle. Axis ticks and labels are manually created as SVG elements within a translated group.

Ttejaswikalluri05

60% match

Loading thumbnail…

Horsey Race

This animated SVG race simulation uses a Monte Carlo random walk to model 20 horses over a race, drawing their changing rankings as colored, labeled paths across a time axis. Each horse moves forward or backward based on assigned probabilities, and its position is computed from cumulative steps, then converted to ordinal ranks. The visualization, built with D3.v3, uses `d3.scale.ordinal` with `rangeRoundBands` for vertical placement, `d3.svg.line` for path generation, and SVG clipping to reveal the race as it progresses, recreating the FiveThirtyEight Lucky Derby analysis.

BBBischof

60% match

Loading thumbnail…

Racing Bar Chart Animation Test

This interactive racing bar chart animates six labeled bars whose values increment randomly over time, displaying the data as a dynamic ranking. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, joins data with keyed selections, and transitions bar and label positions with `rect` and `text` elements. A custom `useInterval` hook drives the animation, triggered by a Start/Stop button, while a ResizeObserver adapts the SVG canvas to its container.

Rre-q

60% match

Loading thumbnail…

Fork of Fork of Boston Housing Dataset Part I

This dashboard visualizes NASCAR statistics through five linked views: a U.S. map of track locations, a bar chart of starts before first wins, a stacked bar chart of top winners split by track, and car maker finish distributions. The visualizations use the vega-lite-api to construct marks like `markCircle`, `markBar`, and `markGeoshape` with `vl.longitude()`, `vl.latitude()`, and `vl.topojson`. Data is loaded asynchronously via `d3.csv` from remote gist URLs. A legend is explicitly hidden using `.legend(null)`.

RRobert Johnson

59% match