Skip to main content
SimilarExport ZIP
100%

D3 Playground

✓ Published0🌍 Public
JJoseph Burns
Last edited Sep 4, 2019
Created on Sep 4, 2019
Forked from Scatter Plot

This visualization shows the duration of a software build over time, with each point representing a one-hour timestamp from March 2015. The y-axis displays duration in minutes, while the x-axis shows the date. The visualization uses D3 v5, loading data from a CSV file and rendering as an SVG with circles for each data point. It uses D3 scales (`scaleTime`, `scaleLinear`), axes (`axisBottom`, `axisLeft`), and the `extent` function to compute domains. Grid lines, axis labels, and a title are drawn within the SVG, with styling provided by an external CSS file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

d3 playground

This example demonstrates a time-series line chart of daily amounts loaded from a CSV file, using axes with tick labels. It uses d3.csv to parse data, d3.scaleTime and d3.scaleLinear for scales, and d3.axisBottom and d3.axisLeft for the axes. Guide lines are drawn as SVG line elements, followed by circles for each data point, all rendered within an SVG container sized via width and height attributes.

Kkosakase
75% match
Loading thumbnail…

exercise1

D3 v4 renders a time-series line chart tracking VizHub user growth from 2018 to 2022, annotated with key milestones like a Medium post and the 2.0 Kickstarter. The SVG visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line for the path. Circles mark each data point, while d3-svg-annotation adds contextual callouts, all styled with custom CSS for gridlines and axis labels.

Ttgrex6
73% match
Loading thumbnail…

D3: Time axis, prettier

This example shows a time-based scatterplot of daily amounts, with vertical grid lines and circular markers positioned along a date axis. The visualization uses D3 v5 and loads data from a CSV file via `d3.csv`, parsing date strings with `d3.timeParse` and formatting axis labels with `d3.timeFormat`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` handle the positioning. The SVG rendering draws lines and circles for each data point, making the temporal trend of the amount values immediately apparent.

Nnikomc
71% match
Loading thumbnail…

new

This bar chart displays the number of hours required to beat each game from a dataset loaded via a CSV file. The visualization uses D3.js v7 to render SVG rectangles, with bars colored steel blue that turn orange on hover. It employs d3.csv to fetch data, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the numeric y-axis. Rotated axis labels and custom fonts style the chart, with axes formatted using d3.axisBottom and d3.axisLeft. The chart’s title and axis labels are added as SVG text elements.

Rranjithkmr598@gmail.com
71% match
Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden
71% match
Loading thumbnail…

Main visualization

This visualization displays traces over time as a vertical timeline, with each trace’s duration represented by a black horizontal bar positioned by start time. Background rectangles color-code traces by sequence length, while clicking a bar opens a popup showing trace details. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles, with axes and popup interactivity driven by `axisBottom`, `axisLeft`, and DOM event handlers. Data comes from a CSV file containing trace numbers, start/end times, and activity sequences.

NNikki-gea
71% match
Loading thumbnail…

Performance Visualization Dashboard

This dashboard visualizes runtime performance across frames using three coordinated D3 v6 SVG charts. A bar chart shows functions with the longest total runtime, while a scatter plot details the breakdown of the longest frame by function. An interactive line chart connects performance points over tick time, enabling selection of specific frames. The visualization uses d3.csv for data loading, scaleBand, scalePoint, scaleLinear, axisLeft, axisBottom, and d3.timeParse to structure the CSV data containing Tick, Identifier, and Runtime fields.

IINDIGOBLIN
70% match
Loading thumbnail…

Worktime

This stacked bar chart visualizes worktime patterns by day, using a CSV file of start and end timestamps. Each bar represents a day, and segments within the bar show the duration of activities (e.g., “slq,” “edm”) between 7:30 AM and 7:30 PM. The chart uses D3 v4 with SVG, employing d3-dsv to parse data, d3-scale for positioning and color encoding, d3-axis for the time-based y-axis, and d3-shape for stacking. Hovering over a segment highlights it and displays a tooltip.

BBrunoDumas
70% match