Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ffaversin17
Last edited Oct 10, 2019
Created on Oct 10, 2019
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub.

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
93% match
Loading thumbnail…

Untitled

An interactive time-series line chart displays daily, weekly, and monthly aggregations of value and quantity data from a CSV file. Buttons allow switching between these temporal resolutions, with the line path redrawing accordingly. Tooltips appear on mouseover, and the chart uses D3 v3 APIs including `d3.csv`, `d3.time.scale`, `d3.bisector`, and `d3.svg.axis`, with an SVG canvas and smooth animation during transitions.

Ggabrielribeirob
90% match
Loading thumbnail…

Untitled

This interactive line chart visualizes time-series data, comparing two different datasets loaded by default and via an update button. It displays the data as a single line, with the x-axis representing dates and the y-axis representing values. The chart uses D3.js to render an SVG, with axes and a line path updated smoothly using a transition. The code employs `d3.time.scale` and `d3.scale.linear` for scaling, and transitions to animate the line and axes when new data is loaded.

Ttracy3057
85% 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
84% match
Loading thumbnail…

Untitled

This time series displays data points over a date range, using a blue-to-red vertical gradient to encode value magnitude along the line. The visualization reads a comma-separated dataset from an external URL and parses dates with `d3.timeParse`. It constructs an SVG line chart, computing scales with `d3.scaleTime` and `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A `linearGradient` element is defined and applied as the stroke, with the path generated by `d3.line`.

Ggabrielribeirob
83% match
Loading thumbnail…

Untitled

This visualization presents a sequence of line charts tracking a numeric value over time, with a small multiple layout that allows for comparative scanning across different series. Built with a custom JavaScript rendering pipeline that manually draws axes and data paths onto a Canvas element, the code uses D3.js’s `d3.scaleLinear` for proportional scaling and `d3.line` for path generation, while a mouse-driven crosshair dynamically highlights the nearest data point and its coordinates. The dataset appears to be synthetic, generated procedurally within the script rather than loaded from an external file.

GGunjan Paul
82% 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
82% match
Loading thumbnail…

Untitled

A line chart displays a time series of a single numeric value, with dates on the x-axis and values on the y-axis. The chart uses steelblue strokes to draw the path of data over time. Built with D3 v4, the visualization reads CSV data from a remote GitHub repository, parses dates using `d3.timeParse`, and renders the plot in SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line itself is created using `d3.line` with scales from `d3.scaleTime` and `d3.scaleLinear`.

Yyuqi62sss
82% match