Roman Polulekh

@romanpoluleh·7 public vizzes

Fork of Gantt2 (overlapping titles)

This example visualizes a Gantt chart with horizontal bars representing task durations, colored green or red by status, and includes overlapping time labels for tasks sharing the same start time. It uses D3 v7 to load CSV data, scaleTime for the x-axis, scaleBand for task categories, and SVG rendering with axisLeft and axisBottom. The code filters out labels that collide horizontally, and adds a tooltip on mouseover showing task details.

Dec 27, 2022

Loading thumbnail…

Gantt2

This visualization displays a Gantt chart tracking the timing and status of recurring software tasks, such as "Reload License Monitor" and "Reload Operations Monitor," over a single day. Each horizontal bar represents a task execution, colored green for successful completions and red for failures, with a tooltip on hover revealing task details. Using D3 v7, the code builds the chart with `scaleTime` for the time axis, `scaleBand` for task categories, and `axisLeft`/`axisBottom` for gridlines. Data comes from a static JavaScript array, rendered as SVG rectangles with text labels.

Dec 25, 2022

Loading thumbnail…

Gant Diagramm

This Gantt chart visualizes task start and end times over a 24-hour period, with each horizontal bar colored green or red based on task status (Status "1" or "0"). The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleTime` for the time axis, `d3.scaleBand` for task categories, and `d3.axisBottom`/`d3.axisLeft` for axes. Bar positions and widths derive from parsed time strings via `d3.timeParse`, while hover interactions display task details in an HTML tooltip. The data is hardcoded in the script, showing repeated reloads of License and Operations Monitors.

Dec 12, 2022

Loading thumbnail…

Making a basic bar chart with D3.js!

This example shows a horizontal bar chart ranking seven countries by count, with purple bars, light gray gridlines, and labeled axes. The data loads from a CSV file and multiplies each count by 1,000 before sorting countries in descending order. Rendering uses SVG elements created with D3 v7, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for ticks. A custom axis label and title are added via appended text elements.

Dec 12, 2022

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values in thousands. The chart customizes D3 axes by removing default domain lines, applying tick formatting that converts values like "1.42G" to "1.42B", and adding custom labels and title. It uses `d3.axisBottom` and `d3.axisLeft` with `scaleBand` for countries and `scaleLinear` for population, while SVG rects are styled with steelblue fill and custom font sizes via CSS.

Dec 11, 2022

Loading thumbnail…

Fork of bar-chart

This visualization displays a scatter plot of automobile data, plotting weight against horsepower with each data point represented as a fixed-radius circle. The chart also includes a title and axis labels, with grid lines extending across the plot area. The example uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the scales and axes, while data is loaded via `csv` from a remote URL. The code sorts the data, but the visible rendering focuses on the relationship between the two quantitative variables, with all circles sharing the same size.

Dec 7, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for a D3 version 6 project, showing a single text element that updates with the string "boom" in an empty HTML page. It imports a small array of letters from a separate `data.js` module and uses the `select` API from D3, though the actual DOM update is performed with the native `document.getElementById` method. The code serves as a template for integrating D3 into a modern JavaScript build setup, with the visualization rendering as static text rather than any graphical output.

Nov 18, 2022