endlesstory

@endlesstory0428·5 public vizzes

Fork of Customizing Axes

This visualization displays the population of the top 10 most populous countries as horizontal bars, using data from the 2018 United Nations World Population Prospects estimate. It demonstrates custom axis styling with D3 v5, including tick formatting, tick line removal, and axis labels styled via CSS. The code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module, and the axis tick labels are formatted from billions to the short scale (e.g., “G” replaced by “B”). Data is loaded from a CSV file and rendered as SVG with steelblue rectangles.

Feb 14, 2024

Loading thumbnail…

Plot

This visualization shows the degree distribution of nodes in a large citation network, plotted as a histogram with a logarithmic y-axis. Users can adjust the number of bins via an input field, which rebuilds the histogram in real time using d3.histogram and d3.scaleLinear. The plot supports zooming and panning through d3.zoom. Data is loaded as a binary buffer, parsed with Uint32Array, and rendered as SVG rectangles. The code uses d3.axisBottom, d3.axisLeft, and d3.format to display clean, ticked axes over a light gray background.

Jan 31, 2021

Loading thumbnail…

Plot

This scatter plot visualizes the relationship between X and Y values across multiple datasets. The visualization uses color coding to distinguish different datasets, with circles rendered at low opacity to reveal overlapping points. Users can click a legend item to highlight a specific dataset's points at higher opacity, and double-click to reset the view. The plot also supports zooming via the d3.zoom API. Data is loaded from CSV files and rendered as SVG circles using D3 v5 within a React framework. The axes include gridlines and formatted tick labels.

Jan 31, 2021

Loading thumbnail…

Plot

This interactive scatter plot visualizes a downsampled subset of citation network data, with each point representing a patent edge across multiple temporal slices. Colors encode different data files, and opacity highlights the selected category while dimming others. Built with React and D3 v5, the visualization uses `Promise.all` with `d3.text` to load CSV data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping, and `d3.zoom` for panning and zooming. SVG rendering includes custom axes, gridlines, and interactive legend ticks.

Jan 31, 2021

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data in cities worldwide, sourced from Data Canvas – Sense Your City. Each colored line represents a city, with a legend using `d3.scaleOrdinal` and `schemeCategory10` to distinguish them. The chart uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. D3 v5 renders the SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and `d3.nest` groups data by city for plotting.

Jan 31, 2021