simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 17, 2016

Created on Nov 17, 2016

This example displays a single time series as a black line chart, plotting twelve monthly data points (January through December 2016) from a local `dataset.json` file. The chart also renders gray circular markers for each value and white numeric labels; the labels turn black on hover, and the circles turn red. The visualization is built using D3.js v3, employing an ordinal scale for the x-axis, a linear scale for the y-axis, and the `d3.svg.line` API for the path. It renders to SVG with animations on mouseout for the labels and circles.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/855207ac5fb5c170de59b9c69ea56012'>simple line chart from dataset</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

A simple line chart maps twelve monthly values from a JSON dataset, with categorical x-axis labels (A–L) and a linear y-axis. The SVG rendering uses D3 v3 scales and the `d3.svg.line` generator to draw the black polyline. Semi-transparent grey circles at each data point act as interactive dots; hovering one turns it red and reveals the corresponding value label and a dashed vertical guide line by switching their fill and stroke from white to black. Month labels appear below the axis using `d3.time.format`.

RRomyRatolojanahary

92% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart depicting twelve months of data, with circles marking each point and the final value displayed prominently near the end of the line. The chart uses an ordinal x-scale and a linear y-scale, with the line path generated by `d3.svg.line`. Interactive mouseover on a circle turns it red, enlarges it, and increases the font size of the corresponding date label, while a mouseout transitions these elements back to their original size and color over 500 milliseconds. The code loads data from a local `dataset.json` file and renders everything as SVG.

NNaram22

90% match

Loading thumbnail…

simple line chart from dataset

This line chart displays a dataset of seven values, one per month from January to July 2016, on a time-based x-axis and a linear y-axis. A black polyline connects the points, with light grey circles marking each data value. Hovering over a circle highlights it in red, reveals the numeric value above it, and draws a dashed vertical guide line down to the baseline. The chart uses SVG rendering with D3 v4, including `d3.scaleTime`, `d3.line`, and transition effects for the hover interactions. Data is loaded asynchronously from a JSON file.

RRomainCandy

90% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart drawn from a small dataset of monthly values, with category labels placed below the x-axis and the final value highlighted in larger text beside the line. The chart uses an SVG rendering with d3.v4, employing d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path. Data is loaded asynchronously from a JSON file via d3.json, with dates parsed using d3.timeParse and formatted for display with d3.timeFormat.

RRomainCandy

90% match

Loading thumbnail…

simple line chart from dataset

A simple line chart renders twelve monthly data points from a local JSON dataset, plotting values over time. The SVG visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to draw the black line, with light gray circles for each point. Hovering over a circle triggers `handleMouseOver` and `handleMouseOut`, turning the circle red, displaying its value as text, and adding a dashed vertical guide line. The chart also labels each month along the bottom and shows the last value prominently on the right.

NNpfn

90% match

Loading thumbnail…

simple line chart from dataset

A simple line chart plots twelve monthly values from a small JSON dataset, with a gray circle for each point and a black polyline connecting them. Hovering a circle turns it red, enlarges it, and increases the font size of the corresponding month label and the final value annotation. Built with D3 v3, the chart uses an ordinal x-scale and linear y-scale, `d3.svg.line` for the path geometry, and `d3.select` with event handlers for interactive feedback.

NNaram22

90% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of twelve monthly data points, where each point is marked by a red circle. The chart highlights the final value with a large number label and allows interactive exploration: hovering over a point turns it blue and draws a temporary vertical dashed line to the x-axis with the corresponding value displayed. The visualization is built with D3.js v3, using an ordinal scale for the x-axis (categories A–L) and a linear scale for the y-axis. Data is loaded from an external JSON file via `d3.json`, and the line, circles, and text are rendered as SVG elements with CSS transitions for hover effects.

BBrunoDumas

89% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays a time series of twelve monthly data points, labeled A through L, with a circle marker for each value and hover interactions that enlarge the point, reveal its numeric value, and draw a dashed guide line. The chart uses D3 v3 with an ordinal scale for the x-axis and a linear scale for the y-axis, rendered as SVG paths, circles, and text labels. Data is loaded from a local JSON file, and mouseover and mouseout events trigger transitions on the markers and supplementary text elements.

NNaram22

89% match