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 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.

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/6b86b7a0c563a9156dbb2025d99bbbce'>simple line chart from dataset</a>

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

mit Licensed

Similar vizzes

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

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

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

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

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

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

93% match

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