Skip to main content
SimilarExport ZIP
100%

Function for assigning a date to a bi-annual period: Useful when needing to group dates into a period for time-series visualisation

✓ Published0🌍 Public
JJustinCally
Last edited Aug 19, 2019
Created on Aug 19, 2019

This visualization example demonstrates a utility function for converting individual dates into bi-annual period groupings, a preprocessing step for time-series analysis. The function uses `lubridate`'s `dmy`, `year`, and `floor_date` functions to compare each input date against two fixed cutpoints (June 30th and December 31st), then returns the first day of the month for the appropriate six-month period. Dates falling after the second cutpoint are assigned to the following year’s first period, ensuring all data maps to a two-category annual cycle. The code explicitly handles year boundaries through conditional `ifelse` logic.

AI-generated description

Similar vizzes

Loading thumbnail…

bisect

This example demonstrates how to locate a specific date within a sorted array of objects using D3’s bisector utility. It defines a small dataset of four monthly date–value pairs, then creates a custom bisector that extracts the date property from each object. The code calls `bisector(...).right` on this data with a target date, logging the insertion index where that date would appear to maintain sorted order. The visualization itself produces no graphical output; instead, the focus is purely on the numerical result returned by D3’s bisection algorithm.

BBenHeubl
56% match
Loading thumbnail…

Counting Weekdays

This example demonstrates how to count the number of weekdays between any date and January 1, 1970, using the custom `weekday` function, which also provides an `invert` method to reverse the calculation. The code defines helper functions `weekdaysInYear` and `weekdayOfYear` to compute weekday totals per year and per date, accounting for skipped weekends. It relies on the D3.js library’s `d3.time` methods, such as `d3.time.dayOfYear` and `d3.time.year`, to extract day-of-year and year information from JavaScript `Date` objects, enabling accurate weekday arithmetic without external data.

Mmbostock
54% match
Loading thumbnail…

JS Bin

This example demonstrates a JavaScript utility for calculating the number of days in a given month, using native `Date` objects and arithmetic to compute the difference between the first day of the target month and the first day of the following month. The code defines two functions: `daysThisMonth()` and `daysInMonth(y, m)`, both logging results to the console via `console.log`. The current month’s day count and a manual check for April 2016 are printed, showing the raw month-length values without any visualization or external libraries.

JJaxonDvl
53% match
Loading thumbnail…

d3 | reusable heatmap calendar

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

CCBasis
52% match
Loading thumbnail…

Extending the d3 Axis function

This example shows how to extend D3’s built-in axis component to customize tick styling—specifically, highlighting January ticks as bold, black year labels while other months remain gray. The custom `timeAxis` function wraps `d3.svg.axis`, reuses its scale and tick configuration, then reapplies a class to tick elements based on whether the date falls in January. It uses D3 v3 with SVG rendering, and the code includes a custom multi-format date formatter for month and year labels. The axis is drawn on a time scale spanning from July 2010 to April 2012.

HHerbCaudill
52% match
Loading thumbnail…

tick-values

This example demonstrates how to customize tick placement on a D3 time scale axis to avoid unwanted adjacent date labels at year boundaries. The chart uses an SVG renderer with D3 v3’s `d3.svg.axis` and `d3.time.scale`, filtering daily ticks from `d3.time.days` to show every other day. A custom `tickValues` array selects even-indexed dates, while the `is_problematic` function colors tick labels red for the 31st and 1st of the month, highlighting the end-of-year gap issue. The data is hardcoded ISO date strings, and the rendering relies on D3’s native SVG text and line elements.

11wheel
52% match
Loading thumbnail…

Gist 42c5413995001df2d448d010b837dc33

This example visualizes daily user activity by counting how many user records reference each date. It shows a timeline of update frequencies derived from a hardcoded JavaScript object mapping user IDs to date-keyed booleans. The code builds a string of user IDs and their associated dates, then uses `String.split(date)` on that concatenated string to count occurrences of each date in the `updates` object. It relies on the Moment.js library to generate the last ten dates via `moment().subtract()` and formats them as `DD-MM-YYYY`. The rendering itself is absent—the example focuses solely on data aggregation logic, with no charting or DOM output.

AA6Brgeuka
52% match
Loading thumbnail…

try2

This visualization displays two data series over time, plotting yearly values from 1880 to 2015. A line chart pairs exact and rounded measurements for each year, allowing comparison between the precise raw data and its simplified approximation. The implementation uses D3 version 5, loading data from a CSV file containing year and number columns. The code imports functions like `scaleLinear` and `scaleBand` from D3, though the current version only logs a data point and recursively calls itself, suggesting it is a partial or experimental script that renders an SVG element.

AAllInclusive
51% match