Skip to main content
SimilarExport ZIP
100%

UbiPlotter test

✓ Published0🌍 Public
Bblenderenderer
Last edited Feb 8, 2021
Created on Feb 1, 2021

This line chart visualizes tilt angle data from an IoT sensor, plotting the X-axis tilt angle over time. The data is embedded in the source as a JSON string, covering a 24-hour period from late January 2021. The chart uses D3 v6 to create a time-based x-axis and a linear y-axis, with a curve basis smoothing the line path. The visualization is rendered as an SVG, with axis labels and a title displayed via SVG text elements.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

Three smoothed lines trace accelerometer and gyroscope readings from a wearable sensor, mapping z-axis rotation against z-axis acceleration, x-axis rotation against x-axis acceleration, and y-axis rotation against y-axis acceleration. The chart uses `d3.scaleLinear`, `d3.line` with `curveBasis`, and D3 v6 axes to render the paths as blue, red, and green strokes against a grid. Data comes from two CSV files, `sensor.csv` and `sensor2.csv`, capturing movement over time. Axis labels and a title describe the comparison of movement interpretations.

Bbicyclecode
66% match
Loading thumbnail…

Untitled

Three line charts show temperature and accelerometer readings (a_x, a_y, a_z) collected from a smartphone sensor over a single week, with temperature plotted on the x-axis and each accelerometer axis on the y-axis. The visualization uses D3 v6 to scale and axis the data, then draws the series using `d3.line()` with blue, red, and green strokes. Sensor data comes from a CSV file, and the temperature values are normalized from raw integers via a formula in the code.

Bbicyclecode
64% match
Loading thumbnail…

UT1 - UTC

This visualization shows the deviation between UT1 and UTC over time, with a line chart plotting daily offsets from 1973 onward. A mousemove feature reveals a crosshair and circle at the nearest data point, and duplicated x-axis labels are stroked in white for readability. Built with D3 v3, it uses d3.time.scale, d3.svg.axis, and d3.svg.line to render the SVG, while the data comes from a JSON array of precision numeric offsets.

Mmbostock
63% match
Loading thumbnail…

Untitled

This visualization presents a sequence of line charts tracking a numeric value over time, with a small multiple layout that allows for comparative scanning across different series. Built with a custom JavaScript rendering pipeline that manually draws axes and data paths onto a Canvas element, the code uses D3.js’s `d3.scaleLinear` for proportional scaling and `d3.line` for path generation, while a mouse-driven crosshair dynamically highlights the nearest data point and its coordinates. The dataset appears to be synthetic, generated procedurally within the script rather than loaded from an external file.

GGunjan Paul
63% match
Loading thumbnail…

Temperature Line Plot

This visualization displays a line plot of temperature readings over time, with a dark, readable style and tooltip interactions. The chart uses the Vega-Lite API to declare the mark and encodings, while D3’s `csv` function loads the dataset from a GitHub gist. The `index.js` file registers the Vega-Lite API with Vega and enables tooltips, then renders the chart into the page’s body with automatic width and height fitting. The configuration adjusts axis label sizes and colors for clearer presentation.

LLei Lei
63% match
Loading thumbnail…

Untitled

A line chart displays a time series of a single numeric value, with dates on the x-axis and values on the y-axis. The chart uses steelblue strokes to draw the path of data over time. Built with D3 v4, the visualization reads CSV data from a remote GitHub repository, parses dates using `d3.timeParse`, and renders the plot in SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the line itself is created using `d3.line` with scales from `d3.scaleTime` and `d3.scaleLinear`.

Yyuqi62sss
62% match
Loading thumbnail…

Untitled

This scatterplot visualizes accelerometer data from a car’s movement, plotting x-axis acceleration against y-axis acceleration as green circles with blue outlines. The chart uses d3.csv to load the dataset, then d3.scaleLinear and d3.extent to map values, with axes generated via d3.axisLeft and d3.axisBottom. The title and axis labels appear in Roboto Mono, while the overall layout uses margins and an SVG container. Data originates from the UCI Machine Learning Repository.

Bbicyclecode
62% match
Loading thumbnail…

Untitled

This example visualizes the progression of a line chart tracking a signal over time using D3.js. It reads CSV data files containing time-series measurements and displays them as multiple filtered lines on an SVG canvas. The code uses D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the chart with a date-based x-axis and linear y-axis. Interactive mouse-over effects are partially implemented, though the mouse-line overlay is not fully functional.

HHariprashanth75
62% match