Untitled

100%

✓ Published1🌍 Public

Last edited Oct 22, 2019

Created on Oct 22, 2019

This example shows monthly counts of a categorical status variable from September 2017 through September 2019, rendered as a smooth area chart. A main focus panel displays the full time series, while a smaller context panel beneath it provides a brush for selecting date ranges. Users can also pan and zoom directly on the focus chart. The visualization uses D3 v4 with `d3.brushX`, `d3.zoom`, and `d3.area` with monotone curve interpolation, reading data from a CSV file where dates are parsed with `d3.timeParse`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive time series visualization displays daily count data from September 2018 to September 2019. Using D3.js version 3, it renders an SVG line chart with buttons to aggregate the data into weekly or monthly sums, with missing dates linearly interpolated. Hovering over the chart reveals tooltips and focus elements, while the axes are drawn using `d3.svg.axis`.

Ffaversin17

81% match

Loading thumbnail…

Untitled

This example demonstrates a linked dataset of monthly S&P 500 index prices from a CSV file, presented as a brushable area chart. Users can adjust the visible time range by dragging a brush in the lower context panel, which updates the main focus chart’s x-axis domain. The code uses `d3.brushX` for selection, `d3.zoom` for panning, and `d3.area` with `d3.curveMonotoneX` to render the paths. Both charts are drawn in SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Ffaversin17

79% match

Loading thumbnail…

Untitled

This interactive time-series chart displays a daily value over three months and lets the user switch between daily, weekly, and monthly aggregated views. It renders an SVG line chart using D3 v3, with axis labels, an orange line, and a tooltip that appears on hover over the chart area. The code aggregates data by summing values for each time unit and linearly interpolates gaps, using APIs like `d3.time.scale`, `d3.svg.axis`, and `d3.bisector`. Buttons enable the time-unit selection, and the chart updates dynamically on click.

Ffaversin17

78% match

Loading thumbnail…

Untitled

This bar chart displays monthly values over time, with each bar’s height representing a numeric amount in dollars. The chart uses D3.js (version 3.5.17) to parse date strings from a CSV file, map dates to ordinal positions on the x-axis, and scale values linearly on the y-axis. Axes are rendered using `d3.svg.axis` with rotated tick labels, and the bars are drawn as SVG rectangles filled in steel blue.

AAnju60

76% match

Loading thumbnail…

Untitled

This example shows a bar chart of monthly values over time, with each bar representing a data point from a CSV file. The chart displays dates on the x-axis and dollar values on the y-axis, using rotated tick labels for readability. It employs D3.js version 3.5.17, specifically `d3.scale.ordinal`, `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` to load and render the data as SVG rectangles. The bars are styled in steelblue and the axes include custom margins and formatting.

NNeepaB

75% match

Loading thumbnail…

Document

This interactive bar chart shows monthly values for a selected year, with a slider controlling the year from 2009 to 2014 and a smooth 2-second transition animating the bars to their new heights and colors. The visualization uses D3 v4 with a band scale for months, a linear scale for values, and a quantile color scale to encode magnitude. Data is loaded from six CSV files using d3.queue, and the chart updates by merging entering and existing SVG rect elements via `selection.merge` and applying axis transitions.

Hhamzavg

75% 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

75% match

Loading thumbnail…

Untitled

This example visualizes a time series of a single numeric value over approximately 90 daily data points, displaying both a filled area chart and an overlaid line with red circular markers. The chart uses a time-scaled x-axis and a linear y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. It loads comma-separated data from a remote URL, parses dates with `d3.timeParse`, and builds the area and line paths using `d3.area` and `d3.line`. The visualization is rendered as SVG within a React-compatible setup using D3 v4.

Wwannurmawaddah

74% match