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

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

RRaphael-Diana

92% match

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

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

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

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.

SSamyMe

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

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

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

90% match