Skip to main content
SimilarExport ZIP
100%

simple line chart from dataset

✓ Published0🌍 Public
TTanguideCrevoisier
Last edited Nov 9, 2017
Created on Nov 9, 2017

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.

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 displays a simple line chart of seven monthly data points, with each point labeled by its date and value. It uses d3.v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map the dataset to SVG paths and circles. The chart animates circle color on mouseover via `transition().duration(500)`, and the final value is appended as a text label. Data comes from an external `dataset.json` file containing name, value, and date fields.

LLRobergeon
93% match
Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven monthly data points, with categorical labels (A–G) on the x-axis and numeric values on the y-axis. The chart also shows the date of each point below the x-axis and the final value as a large annotation. Built with D3 v3, it uses `d3.scale.ordinal` for the x-axis, `d3.svg.line` for the path, and `d3.time.format` to parse and display dates. The data loads from a local `dataset.json` file and renders as SVG elements.

RRastignac
93% match
Loading thumbnail…

simple line chart from dataset

This visualization displays a simple line chart plotting seven monthly data points from a JSON dataset, with each point labeled by its abbreviated month and numeric value. The SVG chart includes a black polyline, small circles at each data point that turn red and fill on mouseover, and a large text label showing the final value. Built with D3 v4, it uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, `d3.line` to generate the path, and `d3.timeParse` to convert date strings.

LLRobergeon
92% 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
92% match
Loading thumbnail…

simple line chart from dataset

This simple line chart displays seven monthly data points from a JSON dataset, plotting values over time. Built with D3 v4, it uses an SVG rendering with `d3.scaleTime` and `d3.scaleLinear` to map dates and values, and `d3.line` to draw the path. Circles mark each point, with mouseover interactions that highlight a point and show its value. The chart includes a date label below each point and displays the final value in large text near the line's end.

EElisaDnr
92% 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
91% match
Loading thumbnail…

simple line chart from dataset

This example displays a simple line chart of seven data points, each with a name, value, and date. The chart shows the trend of values over time from January to July 2016, with a line connecting the points and a label for the final value. It is rendered as an SVG using D3 v4, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the path. The data is loaded from a local JSON file. Interactive tooltips appear on mouseover, using D3 selections to highlight the point and display its value.

RRade-Mathis
91% match
Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart that plots monthly values across twelve dates, with circles marking each data point and a dashed vertical line appearing on hover. The chart uses D3 v4 with time-series data, parsing dates with `d3.timeParse` and scaling them with `d3.scaleTime` and `d3.scaleLinear`. It renders an SVG path for the line, adds tooltips via circle elements, and includes labels for each month plus the final value. Data comes from a local JSON file, and hover interactions change circle colors and trigger a dynamic guide line.

TTanguideCrevoisier
91% match