Gist 473f153bb8e97062f0f4696aebe7a22c

100%

Gist 473f153bb8e97062f0f4696aebe7a22c

✓ Published0🌍 Public

Last edited Jun 15, 2018

Created on Jun 15, 2018

This example shows a time-series line chart of oceanographic measurements from the Hakai Quadra station, pulling data via a JSON request to ERDDAP. It plots a single variable against time using a date-parsed x-axis and linear y-axis. The code uses d3.json to load rows from the ERDDAP table, d3.utcParse for ISO timestamps, and d3.line with d3.scaleTime and d3.scaleLinear to render the path. Axes are drawn with d3.axisBottom and d3.axisLeft, with the line styled in steelblue.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7e5f8625242bd7a92965c702ed9065d4

This interactive time-series visualization displays oceanographic and atmospheric measurements from the Hakai Institute’s Quadra Island station, fetched live via d3.json from an ERDDAP server. Users can explore multiple parameters—including pCO2, aragonite saturation, temperature, salinity, and pH—through a labeled custom variable list, with a brushable context chart for zooming. Built with d3.v4 and SVG, the visualization incorporates a bisector for date lookup, formatted time axes, and optional threshold lines, while Bootstrap and jQuery handle interface controls.

MMbrownshoes

86% match

Loading thumbnail…

Gist ab36cde16c7c27a24e9ab1027d573d67

This line chart displays time-series data of carbon dioxide and related oceanographic measurements, plotted by date against a y-axis labeled "Price ($)". Built using d3.line, d3.scaleTime, and d3.scaleLinear, the visualization renders a single steelblue path over an SVG canvas. Data is fetched as JSON from an ERDDAP server at org_hakai_quadra, with the x-axis formatted via d3.timeParse and axes generated by d3.axisBottom and d3.axisLeft. The chart plots values mapped to the "close" field, though the y-axis label suggests a financial context.

MMbrownshoes

82% match

Loading thumbnail…

Gist b126925b336690e07481fe09b384f125

This example demonstrates a time-series line chart showing closing values over a two-month period. The visualization uses a single blue line to connect data points, with a time-scaled x-axis and a linear y-axis that starts at zero. The code employs D3 v4’s `d3.line()` generator, `d3.scaleTime()`, and `d3.scaleLinear()` to map the data, which is loaded from an external tab-separated file. Axes are rendered via `d3.axisBottom()` and `d3.axisLeft()`, with the SVG canvas sized at 960 by 500 pixels plus margins.

335degrees

74% match

Loading thumbnail…

first line chart

This example demonstrates a basic time-series line chart using D3.js version 4, plotting data points over a date range against numeric values. The visualization renders an SVG path with a thick orange stroke to represent the trend, while axes are drawn using D3’s `d3.axisBottom` and `d3.axisLeft`. The code loads tab-separated data via `d3.tsv` from an external URL, parses dates with `d3.timeParse`, and maps values using `d3.scaleTime` and `d3.scaleLinear`. The line is generated with `d3.line`, and the chart is positioned within a configured margin. The data source is a static TSV file, and the rendering is fully SVG-based.

335degrees

73% match

Loading thumbnail…

Untitled

This example shows a line chart of FRED data over time, displaying a single series of values with a time-based x-axis and linear y-axis. The visualization is rendered as an SVG within a React framework, using D3 v7 to load CSV data, parse dates, and generate the axes and line path. The chart uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to map the data, while the CSV is fetched from a GitHub gist URL. The page also includes a navigational header with dataset and about links.

Hharoldle

72% match

Loading thumbnail…

[basic chart] line chart (d3 v4)

This example shows a multi-line chart with four time-series categories (a, b, c, d) plotted over dates in early 2016, using D3 v4’s `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. It renders SVG paths via `d3.line` and `d3.axisBottom`/`d3.axisLeft` for axes, with colors from `d3.scaleOrdinal(d3.schemeCategory10)`. The data is hardcoded as an array of objects, and the chart is drawn inside a 960×300 SVG with margins. No interactivity is included.

EEnzoTheBrown

72% match

Loading thumbnail…

D3 tryout

This example demonstrates a basic time-series line chart using D3 version 6. It plots a single series of date-value pairs from a remote CSV dataset, with a time-scaled x-axis and a linear y-axis. The code uses `d3.csv` to load and parse the data, `d3.timeParse` for date formatting, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate the SVG path. The visualization renders as a simple steelblue line with axes, using an SVG container created with `d3.select`.

BBinod Sapkota

72% match

Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes

72% match