simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 17, 2016

Created on Nov 17, 2016

A simple line chart plots monthly named data points from a local `dataset.json` file, showing a fluctuating value trend from January to December. The visualization uses D3 v3 with an ordinal x-scale for the named categories and a linear y-scale for values, rendering the line as an SVG path via `d3.svg.line`. Date labels are parsed with `d3.time.format("%Y-%m")` and displayed in abbreviated month form, while the final value appears as a text annotation.

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

A simple line chart maps twelve monthly data points from a local JSON dataset, labeling the x-axis with abbreviated month-year dates and the y-axis with numeric values. Built with D3 v3, the visualization uses an ordinal x-scale for category names and a linear y-scale for values, drawing the line path via `d3.svg.line()` and rendering both axes labels and the line as SVG elements. The final data point’s value is highlighted in large text near the right edge, while the chart’s minimal styling uses a black stroke on the line path.

SSamyMe

94% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a small JSON dataset, with circles at each data point. Hovering a circle reveals its numeric value and draws a dashed vertical guide line. The chart uses D3 v3 with an ordinal scale for the x-axis, a linear scale for the y-axis, `d3.svg.line` for the path, and `d3.time.format` to parse and format dates. The data is loaded via `d3.json`, and the SVG is appended directly to the body with hardcoded width and height.

SSamyMe

90% match

Loading thumbnail…

simple line chart from dataset

A line chart displays monthly values from a small JSON dataset, with points connected by a black stroke and labeled with formatted dates. The chart uses a time-scaled x-axis and linear y-axis, with the final value annotated on the right. On mouseover, D3 v4 appends a dashed vertical reference line and a temporary text label showing the hovered point’s value. The SVG is rendered manually with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse`/`d3.timeFormat` for date processing.

SSebDelSab

87% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016. The chart shows a fluctuating trend, with values rising from 10 to 50 before dropping back to 10. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to construct the path, while `d3.json` loads the data from `dataset.json`. Axis labels display formatted dates, and the final value is annotated with a text element.

LLRobergeon

87% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of monthly values, displaying the trend over time with labeled points and a final value annotation. Built with D3 v4, it uses SVG for rendering and includes interactive hover effects that highlight individual data points with circles, reveal their values, and show dashed guide lines. The data comes from a local JSON file, and scales like `d3.scaleTime()` and `d3.scaleLinear()` handle positioning, while `d3.line()` draws the path.

EEnzoTheBrown

87% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016, showing a trend with peaks in May and dips in March and June. The chart uses an SVG canvas, with time parsed via `d3.timeParse` and formatted with `d3.timeFormat`, while an ordinal time scale on the x-axis and a linear scale on the y-axis map the data. The line path is generated by `d3.line`, and circles represent each data point. Hovering a circle highlights it in red, draws a dashed vertical guide line, and displays the value in bold text, all implemented with D3 v4 event handlers. The data comes from the included `dataset.json` file.

CChaf1A

87% match

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

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

86% match