all-over-yet

@all-over-yet·10 public vizzes

Fork of London Air

This interactive scatter plot visualizes monthly air quality measurements from the London Datastore (January 2010–August 2018), showing pollutant levels over time. Users can select which pollutant to display on the y-axis via a dropdown menu, while the color legend encodes the month and a second legend distinguishes Roadside versus Background measurement types. Built with D3 v5, the visualization uses `scaleOrdinal`, `scaleTime`, and `scaleLinear` for encoding, with clickable legends, animated transitions, and interactive tooltips. The color legend supports filtering by clicking, and the stroke legend uses `transition.attrTween` for updates.

Jun 20, 2022

Loading thumbnail…

Fork of Psychische Belastung Geflüchteter in Österreich

This fork shows the prevalence of moderate-to-severe and absent depressive or anxiety symptoms among refugees in Austria, grouped by overarching categories. It compares these two metrics with horizontal stacked bars, using burgundy and pink to differentiate severity levels. Built with React and D3 v6, the visualization relies on `scaleBand` and `scaleLinear` for positioning and uses Tippy.js tooltips to display exact percentages. Data is loaded from a CSV and rendered as SVG, with a note that the omitted "light burden" category prevents values from summing to 100%.

Jul 15, 2021

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates a network visualization with nodes representing servers and proxies, linked by connections labeled with ports and protocols. Animated SVG paths show link directions, while each node displays a Font Awesome icon based on its role via `d3.select`. The code uses `d3.linkVertical()` to draw curved paths from hard-coded `x` and `y` coordinates, with tooltips and color-coded elements defined in the stylesheet. The network data is static, defined explicitly in the JavaScript, and rendered using D3 v6 in an SVG container.

Jul 15, 2021

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3 repositories over time, with each colored layer representing a repository and its thickness showing weekly commit counts smoothed via `array-blur`. Layers are ordered by first commit date, revealing the monolithic `d3` repo’s dominance until 2014, followed by the explosion of modular packages around the 4.0 release. The SVG rendering uses `d3.stack` with `stackOffsetWiggle` and `stackOrderAppearance`, while `d3-area-label` positions labels and `d3.hcl` colors layers. Hover effects highlight individual areas, and each layer links to its GitHub repository.

Jul 15, 2021

Loading thumbnail…

Fork of Grouped Scatter Plot

This example visualizes the Iris flower dataset, showing sepal width plotted against sepal length. The scatter plot is grouped by species, with each species rendered in its own horizontal band. The visualization uses React components to build the SVG chart, with D3 scales (scaleLinear for x and y axes, scaleBand for species grouping) and D3’s extent and format functions. Data is loaded asynchronously from a remote CSV file using D3’s csv method, and each point is drawn as a circle with a tooltip displaying the sepal length.

Apr 6, 2021

Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This interactive bar chart visualizes the relationship between alcohol consumption and life expectancy across continents, colored by year using an interactive color legend. Hovering a legend entry highlights the corresponding year’s data while dimming others; a tooltip summarizes the correlation for that year. Built with D3 v3, it uses `d3.nest`, `d3.layout.stack`, `d3.scale.ordinal`, `d3.legend.color`, and `d3-tip` for tooltips. Data comes from a CSV file, rendered as SVG with animated transitions.

Apr 6, 2021

Loading thumbnail…

Fork of Pollution in US with counties by React and d3

This interactive choropleth shows the concentration of PM2.5 particulate matter across US counties for each year from 2000 to 2018, with a slider and play button animating through time. County colors map to the sequential `d3.scaleSequential` with `d3.interpolateYlGnBu`, while state boundaries are drawn with `d3.geoPath` and `geoIdentity` from US Atlas TopoJSON data. React manages the year state and SVG rendering, with a D3 color legend showing the concentration scale.

Mar 31, 2021

Loading thumbnail…

Fork of VizHub User Count Over Time

This line chart shows the cumulative number of VizHub users over time, from August 2018 to January 2021, with annotated events like the VizHub 1.0 medium post, the 2.0 Kickstarter, and the Datavis 2020 launch. The visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with a monotone curve, and `d3.axisBottom`/`d3.axisLeft` for axes. Circles mark each data point, while `d3.svg.annotation` from the d3-svg-annotation package adds contextual labels. Data is loaded from a local CSV with date and user count columns, rendered as an SVG with grid lines.

Mar 8, 2021

Loading thumbnail…

Fork of Bar chart with D3.js

A forked bar chart displays the popularity percentages of ten programming languages from Stack Overflow's 2019 survey. Using D3.js v5 with SVG, the chart renders horizontal gridlines, axes, and value labels. On mouseenter, a dashed reference line appears and text labels show the percentage divergence between the hovered bar and every other bar. The code applies d3.scaleBand and d3.scaleLinear with d3.axisLeft and d3.axisBottom, plus transitions for opacity changes.

Jan 21, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, with population values multiplied by 1,000. The visualization demonstrates customized D3 axes in an SVG rendering, using `d3.scaleLinear` for population and `d3.scaleBand` for countries. The code employs `d3.axisBottom` with tick formatting that converts large numbers (e.g., G to B) and `d3.axisLeft` with grid lines, while styling axis labels, tick lines, and title text through CSS.

Dec 27, 2020