Skip to main content
SimilarExport ZIP
100%

Gist ab36cde16c7c27a24e9ab1027d573d67

✓ Published0🌍 Public
MMbrownshoes
Last edited Jun 15, 2018
Created on Jun 15, 2018

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 473f153bb8e97062f0f4696aebe7a22c

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.

MMbrownshoes
82% match
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
77% match
Loading thumbnail…

simple line chart from dataset

This line chart visualizes a small dataset of monthly values, mapping dates on the x-axis and numeric values on the y-axis, with a steelblue stroke for the line. It also includes an interactive tooltip: moving the mouse over the chart reveals a focus circle and a label showing the price formatted as currency. The visualization uses D3 v3 with `d3.time.scale`, `d3.svg.line`, `d3.svg.axis`, and `d3.bisector` for mouse-based lookup. Data is loaded via `d3.tsv` from a local JSON file, and the rendering is SVG-based.

LLRobergeon
76% match
Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Llamiyaa
76% match
Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Llamiyaa
76% match
Loading thumbnail…

Simple Line Graph v5

A simple line graph displays daily closing prices over roughly six weeks, extracted from a CSV file with date and value columns. The visualization uses an SVG path rendered through D3 v5's `d3.line()` generator, with a time scale for the x-axis and a linear scale for the y-axis. Margins are set explicitly, and both axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`. The date strings are parsed with `d3.timeParse()`, and the line is styled with a steelblue stroke.

Dd3noob
74% match
Loading thumbnail…

Untitled

A line chart shows the annual value of CO2 emissions from 1995 to 2014, with each year represented by a white circle with a teal outline. The circles change their stroke to black on hover, and a tooltip displays the exact value for each point. The visualization uses D3 v4 to read the CSV data, build a time-scale X axis and a linear Y axis, and draw a smoothed curve using `d3.line()` with `curveBasis`. The SVG output includes axes, circles, and the path, while the tooltip is appended as an HTML div in the page.

Llamiyaa
74% match
Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas
74% match