Skip to main content
SimilarExport ZIP
100%

pr

✓ Published0🌍 Public
IIncoCode
Last edited Jan 10, 2018
Created on Jan 9, 2018

This visualization displays a small time series of daily trend and forecast values (yhat) with a shaded confidence interval, drawn as an area between the upper and lower bounds. The chart uses D3 v3’s time scale for the x-axis, linear scale for the y-axis, and SVG paths to render the area and a red line for the upper prediction values. The data, containing six date-stamped records, is parsed with Moment.js and plotted against axes generated by d3.svg.axis, while the area and line paths are constructed via d3.svg.area and d3.svg.line.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

new

This visualization displays a line chart of energy sector intensity forecasts over time, using a dataset from an external JSON API. The x-axis represents forecast years, while the y-axis maps intensity values, with a colored legend distinguishing intensity levels from "Very Low" to "V.High." Built with D3 v6 in a React framework, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes, and `line` with `curveCatmullRom` to draw the smoothed path. Data points are rendered as circles, colored conditionally based on intensity thresholds, with grid lines and labels styled via CSS.

AAkshay
70% match
Loading thumbnail…

d3 yoga

The visualization displays a small dataset of six numeric values using three overlaid chart types: circles sized by radius, vertical bars, and a line path. It shows how the same values can be represented through different encodings. The code uses d3.v4 with SVG for the circles and line, and HTML div elements positioned absolutely for the bars. Linear scales map the data domain to pixel ranges for radius, bar height, and line y-coordinates. The data is hardcoded as an array in the script, with no external source. The SVG and divs are both rendered on the same page, creating a combined view.

FFlameFuel
70% match
Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden
69% match
Loading thumbnail…

Fork of Fork of Fork of Chart redesign

This example visualizes a time series of daily humidity data as a line chart with overlaid seasonal summaries. The chart uses a colored timeline gradient and highlights distinct season spans (Spring, Summer, Fall, Winter) as shaded rectangles, alongside dotted data points and dashed season mean lines. The visualization is built with React and D3 v5, using `d3.json` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `d3.curveBasis` to generate the smoothed line path. The chart is rendered as an SVG, with downsampling applied to the data for smoother curve rendering.

Ssrividyap03
69% match
Loading thumbnail…

four

This area chart displays daily values over a 50-day period, with a semi-transparent blue fill beneath a solid blue trend line. The visualization uses D3.js v7 to load data from a CSV file and render an SVG. It employs `d3.scaleLinear` for both axes, `d3.area` and `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for the labeled day and value axes.

Mmsahithipatel@gmail.com
69% match
Loading thumbnail…

Line Area

This visualization displays daily mean temperature changes over time, using a smooth green area chart to emphasize the temperature trend across days. The chart includes labeled axes for days and mean temperature, with a title and formatted tick values. Built with D3 v6, the code imports specific modules like `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom` to generate an SVG rendering. Data is loaded from a CSV file and parsed with a time format. The chart applies margins, grid lines, and axis labels to present the temperature data clearly.

Ssyedhaliz
69% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
68% match
Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar
68% match