Skip to main content
SimilarExport ZIP
100%

Graph with four lines

✓ Published0🌍 Public
Pprincit
Last edited Apr 30, 2020
Created on Apr 30, 2020

This stacked bar chart displays the allocation and unallocation of telescope time across three instruments, with red and blue segments representing the two categories. Built with D3 v5, the visualization uses `d3.stack()` to aggregate the data, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and `d3.axisBottom()`/`d3.axisLeft()` for axes. A legend is manually drawn, and the chart renders as SVG within a 300×300 viewport. Data comes from a CSV file containing telescope names and their allocated/unallocated day counts.

AI-generated description

The latest graph with information from all my names(telescope names)

MIT Licensed

Similar vizzes

Loading thumbnail…

Graph with four lines

This chart displays the allocated and unallocated telescope time for three instruments (IRSF, 1.9-m, and 1.0-m) using stacked bars. Each subgroup is represented by color, with a legend showing red for allocated and blue for unallocated time. The D3 v5 code uses `d3.stack` to build the layered series, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file via `d3.csv`.

LLonwabo11
92% match
Loading thumbnail…

Graph with four lines

This visualization shows how hourly measurements for a telescope named Lesedi vary over several days in March 2015, using a colored line chart with four distinct lines. It loads data from a CSV file and renders it as an SVG using D3 v5, with a time-scaled x-axis and a linear y-axis. The chart employs `d3.nest` to group data by telescope, `d3.line` with `curveBasis` to smooth each series, and `d3.scaleOrdinal` with `schemeCategory10` to assign stroke colors to each line.

LLonwabo11
81% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of telescope data, comparing average values across three named telescopes using colored bars. The chart is built with D3.js v5, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisBottom` and `axisLeft` for the axes. The SVG renders the bars with padding and custom colors, while the data is hardcoded in the script. The visualization demonstrates fundamental D3 DOM manipulation and scale-based layout for categorical and numerical data.

Jjuanandressr97
78% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of telescope data, comparing average values across three named telescopes using colored bars. The chart is built with D3.js v5, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisBottom` and `axisLeft` for the axes. The SVG renders the bars with padding and custom colors, while the data is hardcoded in the script. The visualization demonstrates fundamental D3 DOM manipulation and scale-based layout for categorical and numerical data.

Jjuanandressr97
78% match
Loading thumbnail…

Untitled

This stacked bar chart displays the composition of groups across three subgroups, with each group’s total broken into color-coded segments. The visualization uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.stack to compute the stacked values from CSV data. Groups are plotted as rectangles filled with a d3.scaleOrdinal palette, rendered as SVG elements within a fixed-width canvas. The chart is built using d3.v4, reading data from a remote raw GitHub URL.

Nnkrpyate
75% match
Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3 v4, displaying categorical data grouped on the x-axis with subgroups stacked by color. It loads data from a remote CSV file using `d3.csv`, then uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. The chart applies `d3.stack` to compute cumulative bar segments, assigns colors via `d3.scaleOrdinal`, and renders the result as SVG rectangles with bar widths from `x.bandwidth()`.

BBaptisteJarry
74% match
Loading thumbnail…

Untitled

This stacked bar chart displays species abundance across multiple groups, with each bar segment representing a different soil condition. The chart uses D3 v4's `d3.stack()` to generate stacked series from CSV data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeSet2` for categorical colors. Hovering over any section highlights all bars from that subgroup by adjusting opacity using `d3.selectAll` and class-based selectors, while the graph renders as SVG with an ordinal color scale.

AAlice Anselmi
74% match
Loading thumbnail…

Customizing Axes

This bar chart displays the average values per telescope name from a small CSV dataset. The visualization demonstrates custom axis styling using D3 v5, where both the bottom and left axes are generated with `scaleBand` and `scaleLinear` respectively, and configured via `axisBottom` and `axisLeft`. Tick labels are enlarged to 2.7em, tick lines use a light gray stroke, and a custom axis label appears with a larger font size. The chart renders as an SVG with a fixed width and height, and the data is loaded asynchronously via `csv()`.

LLonwabo11
74% match