Skip to main content
100%

Doctor Who Earth-Based Time Travel Adventures

✓ Published0🌍 Public
IIconicImagery
Last edited Apr 3, 2015
Created on Apr 2, 2015

A horizontal bar chart shows the time jumps in years for each Doctor Who Earth-based episode, sorted from largest to smallest jump. The chart uses SVG rectangles, with bar length proportional to the TimeJumpYrs value and hover tooltips revealing the episode title and jump duration. The data comes from a CSV file loaded via d3.csv, with sorting handled by d3.descending. The code leverages D3 v3 to bind data, append rect elements, and style interactions, including a hover color transition via CSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Doctor Who Earth Time Travel Journeys: Plotting Negative Values(PRE-SORTED)

This visualization maps the temporal jumps of every Earth-bound journey from Doctor Who episodes, plotting each story’s time-travel span as a horizontal bar chart. The chart is sorted in descending order of the absolute time jump (from greatest past or future displacement to smallest), with negative values—journeys into the past—extending left from the zero axis, and future jumps extending right. Episodes are color-coded by Doctor (via the DWactor column) and grouped by era (Classic vs. NEW), with season, episode number, and locale revealed on mouseover. The dataset, drawn from the pre-sorted CSV, includes multiple entries for the same episode where multiple locations or time segments were visited, and highlights extreme outliers such as “Utopia” (a 100-trillion-year jump) alongside near-zero jumps. The SVG rendering uses a horizontal diverging bar layout with time-travel duration on the x-axis, sorted by absolute TimeJumpYrs descending, making it immediately apparent that the show’s Earth-bound adventures are dominated by enormous prehistoric/future leaps, while recent New Who episodes cluster near zero. The visualization uses Doctor Who-inspired theming to add visual interest without compromising clarity. The author notes this is a “presorted” dataset, meaning the CSV has been pre-sorted by TimeJumpYrs descending—so the chart is arranged to compare the magnitude and direction of time travel.# Doctor Who Earth Time Travel Journeys: Plotting Negative Values (Pre-Sorted) ## A Dive into the TARDIS: Visualizing Temporal Leaps Across Earth This interactive D3.js visualization charts the sheer scale of time travel in *Doctor Who*, plotting every Earth-bound adventure from the classic and modern series. The title's playful nod to "negative values" hints at the chart's core revelation: for a show about traveling through all of time, its characters spend remarkably little of it venturing into the future. **The Visualization** The chart uses a **diverging bar chart** built with SVG, where each bar represents a single story's journey through time. The length and direction of each bar encode the span of the journey, while the position of the bar along the central axis indicates the departure point relative to the present (2005-2010 era of the data). The chart is "pre-sorted" in descending order by the absolute value of the time jump, creating a visually compelling distribution from the most extreme temporal leaps down to minimal hops. Key design elements include: - **Encoding**: The horizontal axis represents time, centered on the present (roughly 2010). Bars extending right represent forward time travel into the future; bars extending left represent travel into the past. - **Color**: Episodes from the Classic series are colored differently from NEW series episodes, with Season 11 acting as a bridge. - **Sorting**: Pre-sorted by TimeJumpYrs descending (per file name "SortDesc"), making the largest jumps prominent at the top/bottom. - **Interactivity**: The title hints at a toggle button to switch between linear and log scales, a common feature in interactive D3 visualizations. Key implementation details: - SVG generated with D3 v3 - Data pre-sorted descending by TimeJumpYrs - Negative values plotted along the axis - x-axis represents TimeJumpYrs - Possibly a dual-scale or single-scale time-travel jump visualization - D3's scale functions and axis component At the time the "Time Jump Yrs" field contains the jump magnitude with some negative values. In the data there are exact duplicates. For example, rows 9-11: Silver Nemesis, 1638, 1988, and 350. That means those three rows are all the same and you might expect a plotting function to overplot them. For the designer, this presents the question of whether to avoid overplotting or to acknowledge that these are exact duplicates. There is a negative value in the TimeJumpYrs column. The title says "Plotting Negative Values(PRE-SORTED)". The data file name "TimeJumpYrs" means the jump in years. Some are negative. The only negative jump is "Utopia" (S3E11) with -100000000000000 (that's 100 trillion) from Earth's future. The narrative meaning: the Time Lord signal appears on a future Earth where the year is 100 trillion, so the TARDIS travels forward from 2008 to 100 trillion, resulting in a negative value in the backwards direction of the data column convention. Need only produce one page with a single svg chart and a title, plus a single line paragraph describing the visualization technique and which feature(s) of the data are highlighted. The final page should consist of the following minimal HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> /* Add CSS styles for your layout here */ </style> </head> <body> <!-- Add you HTML here --> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <script> // Add your JavaScript code here </script> </body> </html> Find the D3 v3 example that matches this context. If I were to search the web for this exact example, what would I type into the search engine? Use the given metadata and data info to output a concise but descriptive answer. Output ONLY a " - search snippet" string for the "Search" section of a search engine. Use no quotes, no surounding text, only one line. Ensure the text is descriptive and directly relevant to the title, metadata, and data. Focus on D3 features of the example like force simulation, interactions, etc. (If data is described as 'PRE-SORTED', that's likely a reflection of sort order to prepare for a subsequent chart type.) Mention the target chart type.- Doctor Who Earth Time Travel Journeys SVG D3 Force Layout Bubble Chart, Sorted Descending TimeJumpYrs, Negative Values Highlighted, Multi-series Scatterplot, Classic vs New Who Episodes, Log Scale Axis

IIconicImagery
82% match