d3.js v5 line chart with dates

100%

d3.js v5 line chart with dates

✓ Published0🌍 Public

Last edited Feb 14, 2019

Created on Feb 14, 2019

This example shows a line chart of weekly Net Promoter Scores over several months, with each data point highlighted by a circle and labeled with its numeric value. The chart uses a time-scaled x-axis for dates and a linear y-axis for scores, with the line smoothed using `d3.curveMonotoneX`. The code builds the visualization with D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`, while rendering the marks as SVG circles and text labels. The data are hardcoded as an array of date-and-score pairs, and the y-axis range is fixed to start slightly below the minimum score.

AI-generated description

forked from <a href='http://bl.ocks.org/LyssenkoAlex/'>LyssenkoAlex</a>'s block: <a href='http://bl.ocks.org/LyssenkoAlex/1317e8dcf3d40f33b341552cf82a10b2'>d3.js v5 line chart with dates</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart plots monthly values from an 11-point JSON dataset, with a black polyline, labeled x-axis dates, and a large final-value annotation. The visualization adds interactivity through gray circular markers at each data point; hovering a circle turns it red, reveals its value, and displays a vertical dashed guide line. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with mouseover and mouseout events controlling opacity and stroke transitions. Animation effects appear via `transition().duration(300)` when changing marker color and opacity.

GGaret005

78% match

Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr

76% match

Loading thumbnail…

line chart time data

This line chart visualizes daily values over a two-week period, with a red path connecting data points plotted by date and value. The y-axis starts at 8000 to emphasize variation, while each data point is marked with a circle. Using D3 v5, the code loads a CSV file, parses dates with `new Date()`, and applies `scaleTime` and `scaleLinear` for axes. The `line` generator with `curveBasis` creates the smoothed path, and SVG circles are appended for points, with axes rendered via `axisLeft` and `axisBottom`.

VVvgupta

76% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a local JSON dataset, with labeled date tick marks and a grey line connecting data points. Each data point is a semi-transparent grey circle that highlights in red with a black value label and connecting dashed line on mouseover, then reverts on mouseout. The chart uses D3 version 3 APIs including `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.line` to create the line path. SVG elements are rendered directly via `d3.select("body").append("svg")`, and the data is loaded with `d3.json`.

MMelanieSalignat

76% match

Loading thumbnail…

linechart d3 and React

This example shows a line chart of daily temperature readings over a week, plotting temperature on the y-axis against time on the x-axis. The visualization is built with React components that render SVG elements, using d3.scaleTime and d3.scaleLinear for axes and data mapping. The code loads CSV data via d3.csv, applies time parsing and numeric conversion, and creates circles as marks with tooltips showing the day. Axes are custom components using d3.ticks and timeFormat for labels.

SShane Carey

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

76% match

Loading thumbnail…

line chart

This example displays a simple line chart of closing values over five dates in May 2012, using D3 v7. The code creates an SVG container with time and linear scales, then uses `d3.line` to generate a path with steelblue stroke. Date strings are parsed with `d3.timeParse`, and axes are added via `d3.axisBottom` and `d3.axisLeft`. The chart renders from hardcoded sample data, showing a trend from May 1 back to April 25.

Jjaredaitken6

76% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a small dataset, with interactive tooltips that reveal each point’s value and draw a dashed vertical guide down to the x-axis. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line to generate the path, and d3.json to load the data. Circles are added per data point, and mouseover and mouseout events toggle the tooltip and dash-line visibility. The labels and values are rendered as SVG text elements.

HHakkahi

76% match