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 shows a simple line chart of monthly values from a JSON dataset, with interactive circles and date labels. The chart maps categorical month names to an ordinal x-scale and numeric values to a linear y-scale, rendering the line as an SVG path. Hovering over a circle or date label triggers animated transitions, enlarging the element, displaying a tooltip with the value, and drawing a temporary dashed vertical line via d3.svg.line and d3.select.append. The visualization uses D3 v3, SVG for rendering, and transitions for mouseover effects.

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 that plots monthly values from a JSON dataset, with circular markers at each data point along the path. The chart uses an ordinal x-scale and a linear y-scale to position the points, while a monospace font labels each month below the axis. Hovering over a circle triggers a mouseover event that turns the point red, draws a dashed vertical guide line, and reveals the numeric value as a green tooltip; moving the mouse away removes these temporary elements. The visualization is built with D3 v3, rendering SVG elements like paths, circles, and text, and loads its data from a local `dataset.json` file.

MMohamedZaki

93% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays monthly values from a small JSON dataset, plotting each data point as a grey circle. Hovering over a circle turns it red, enlarges it, reveals its numeric value above, and draws a dashed vertical line down to the x-axis. The visualization uses D3 v3 with SVG, employing an ordinal scale for x-positions, a linear scale for y-values, and mouseover/mouseout event handlers to animate the transitions.

AAlexdef74307

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

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

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

92% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays twelve monthly values from a small JSON dataset, with each month labeled on the x-axis and a bold numeric readout for the final data point. The chart uses d3.svg.line to draw the path, while d3.scale.ordinal positions the categorical months and d3.scale.linear maps values to the y-axis. Interactive circles respond to mouseover by turning red, enlarging, adding a dashed vertical guide, and showing the current value as text, with transitions on mouseout restoring the original appearance.

NNaram22

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

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

91% match