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

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart from dataset

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.

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

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

91% match

Loading thumbnail…

simple line chart from dataset

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.

NNaram22

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

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

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

90% match

Loading thumbnail…

Simple line chart

This simple line chart visualizes twelve months of value data from `dataset.json`, plotting points for each month and connecting them with a single black line. The chart uses an ordinal x-axis for the month names and a linear y-axis for values, with a dashed line and green tooltip text appearing when hovered over a data point. Built with d3.v3, the visualization uses `d3.scale.ordinal`, `d3.scale.linear`, `d3.svg.line`, and SVG circles rendered via `d3.select`. The code also includes a final value label and uses the MIT-licensed blockbuilder.org framework.

AAlexZ33

89% match