simple line chart from dataset

100%

simple line chart from dataset

✓ Published0🌍 Public

Last edited Nov 13, 2017

Created on Nov 13, 2017

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.

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

This example visualizes a simple time series with a line chart, plotting monthly values from a small JSON dataset between January and July 2016. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map dates and numeric values, while d3.line constructs the black stroked path. Each data point is marked by a semi-transparent grey circle that turns red on mouseover, triggering a dashed vertical guideline and a text label showing the exact value via d3.select and appended SVG elements. The chart also displays a permanent value label for the final data point at the right edge.

SSebDelSab

95% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays seven monthly data points from a small JSON dataset, showing the trend of values from January to July 2016. The chart uses D3 v4 APIs including `d3.timeParse` for date parsing, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. Circles mark each point; hovering highlights a point in red and adds a dashed vertical guide line with a value label. The SVG renders text labels for each month below the chart and the last value at the right edge.

SSebDelSab

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

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

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

91% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart plotting seven monthly data points from a JSON dataset, with labeled x-axis dates and a final value annotation. The SVG rendering uses d3.v4 with a time scale for the x-axis (`d3.scaleTime`), a linear scale for the y-axis (`d3.scaleLinear`), and a `d3.line` generator to create the path. Data is parsed from `dataset.json` using `d3.timeParse` for date formatting, and the line is styled with a black stroke via CSS.

TTanguideCrevoisier

91% match

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart displays seven monthly data points from a local JSON dataset, plotting date against value. The D3 v4 code uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Circles mark each point, with hover effects changing their color to red and showing the same value label already displayed above each dot. The final value appears in larger text at the line’s end, while month labels sit below the chart.

EElisaDnr

91% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a small dataset, with points labeled by month and the most recent value highlighted numerically. The chart is built with D3 v3, using an ordinal x-scale for the named data points and a linear y-scale for values, rendered as an SVG path, circles, and text. Hovering a circle turns it red, enlarges it, shows the value directly, and draws a dashed guide line; moving the mouse away reverts these changes and removes the temporary elements. The data is loaded from a JSON file via `d3.json`.

NNaram22

91% match