simple line chart without dataset

100%

simple line chart without dataset

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

This example shows a simple line chart that uses vertical bars to represent a static dataset of ten numeric values, with the values labeled above each bar. The visualization is rendered as an SVG inside an HTML page, using D3.js v4 to bind the data array to rectangle elements and scale the bar heights proportionally to the maximum value in the dataset. The code defines linear scales for the x- and y-axes, then appends the bars and text labels to a translated group element, with a fixed width for each bar derived from the data length.

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/c607174fc6fd5c7bfaa804d46ca70eab'>simple bar chat with interaction</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/4a9ecaa288216641e021da8ba5d7199a'>simple bar chat with interaction</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/6292d4f3363dce5da4feee2b159031ba'>simple line chart without dataset</a>

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

mit Licensed

Similar vizzes

Loading thumbnail…

simple line chart without dataset

This example displays a simple line chart built without an external dataset, using a hardcoded array of ten numeric values. The visualization renders both the data points as text labels and corresponding bars via SVG rectangles, all generated by D3 v4. The code uses `d3.scaleLinear` for both x and y axes, with the y-scale mapping the maximum data value to a height of 100 pixels. A group element translates the entire chart 100 pixels to the right, and the bars are positioned based on index and value.

EEnzoTheBrown

96% match

Loading thumbnail…

simple line chart without dataset

A simple bar chart displays ten hardcoded numeric values from an array, rendered as black-stroked white rectangles with monospace labels above them. Built with D3 v4, the example uses `d3.scaleLinear` to map positions on the x- and y-axes, appends SVG `rect` and `text` elements, and sets widths based on the data length. No external data source is loaded; the visualization serves as a minimal demonstration of binding an array to SVG shapes.

HHakkahi

92% match

Loading thumbnail…

simple line chart without dataset

A simple bar chart displays an array of sixteen numeric values, rendered as vertical hotpink rectangles with grey outlines. The chart is built with D3 v4, using `d3.select` to create an SVG canvas and `d3.scaleLinear` to map data values to bar heights. Bars are positioned on the x-axis by index, with no dataset file—the numbers are hardcoded in the script. The visualization demonstrates basic D3 bar-chart construction without external data loading.

EElisaDnr

90% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of monthly values, displaying the trend over time with labeled points and a final value annotation. Built with D3 v4, it uses SVG for rendering and includes interactive hover effects that highlight individual data points with circles, reveal their values, and show dashed guide lines. The data comes from a local JSON file, and scales like `d3.scaleTime()` and `d3.scaleLinear()` handle positioning, while `d3.line()` draws the path.

EEnzoTheBrown

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

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

82% match

Loading thumbnail…

simple line chart from dataset

A simple line chart displays seven monthly data points from January to July 2016, with values ranging from 10 to 50. The visualization shows a single black line with labeled x-axis dates and a large final value label. Using D3 v4, the code parses ISO date strings, applies time and linear scales, and generates the path via d3.line. Data loads from an external dataset.json, with SVG rendering and monospace font labels highlighting the last point's value.

EEssohanamKouyou

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

81% match