georgeeeee

@georgeeeee·13 public vizzes

Pollution in US with counties by React and d3

This interactive choropleth visualizes PM2.5 pollution levels across US counties from 2000 to 2018. Users can drag a vertical slider or press a play button to animate through years, with county colors transitioning smoothly via the sequential `d3.interpolateYlGnBu` scale. Built with React and D3 v5, it uses `d3.geoPath` and `geoIdentity` projection to render county boundaries from the US Atlas TopoJSON, while county pollution data is loaded from a CSV and mapped to each feature. The legend displays the concentration range, and hovering over a county reveals its name and value.

Nov 5, 2020

Loading thumbnail…

Pollution in US with counties with color legend

This visualization displays PM2.5 concentration levels for US counties in the year 2000, with each county colored according to its pollution level. Counties without data appear in grey, while the color legend uses d3.interpolateYlGnBu to map concentration values. The map uses d3.geoPath with a geoIdentity projection fitted to US county boundary data from the US Atlas TopoJSON. The React-based implementation loads CSV data containing PM2.5 measurements and creates a Map for lookups, encoding values through a d3.scaleSequential color scale.

Oct 15, 2020

Loading thumbnail…

Mountains on a Map

This visualization depicts a world map where each city with a population over 50,000 is represented as a small triangular "mountain" whose height encodes population size and whose color encodes the country. The map is rendered using React and D3’s `geoNaturalEarth1` projection with `geoPath`, including graticules and land boundaries from World Atlas TopoJSON. City data comes from Simplemaps, with tooltips displaying city name, country, and formatted population via `format`. Hovering increases stroke width on the mountain paths.

Oct 15, 2020

Loading thumbnail…

Two Decades of Pollution in US with menus

This interactive choropleth map displays PM2.5 concentration across US counties for each year from 2000 to 2004, with a React-driven dropdown menu to switch between annual datasets. The visualization uses Vega-Lite’s `markGeoshape` with an Albers USA projection, joining county-level pollution data from a CSV via `vl.lookup`, and encodes concentration values with a clamped color scale. React’s `useState` and a custom `Dropdown` component control the selected year, triggering a re-render of the Vega view. The underlying data comes from the PM2.5 by County dataset, with styling drawn from d3’s `hcl` color utilities.

Oct 8, 2020

Loading thumbnail…

Two Decades of Pollution in US

This visualization shows PM2.5 pollution across US counties for the year 2000, using a choropleth map colored by concentration levels. It builds the map with vega-lite-api, joining county GeoJSON topojson data with a PM2.5 CSV dataset via a lookup transform. The visualization uses an Albers USA projection, encodes the pollution values on a clamped color scale, and renders tooltips showing exact concentrations. It integrates D3 version 5 and React for the interface setup.

Oct 8, 2020

Loading thumbnail…

Treemap Demo

This treemap demo shows a hierarchical dataset of a CEO’s employees, grouped into three boss-level parents, with each leaf rectangle sized by its numeric value. The interface includes buttons to mutate the data: changing leaf values, adding or removing child nodes, and adding or removing entire parent groups. The visualization updates with animated transitions on rectangles and text labels, rendered in SVG via React. It uses d3.hierarchy and d3.treemap for layout, d3.scaleOrdinal for color coding by parent, and d3.scaleLinear for opacity based on value.

Oct 3, 2020

Loading thumbnail…

Most Popular Video Game Publisher

This horizontal bar chart shows the top 10 video game publishers by total historical global sales in millions. The chart uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is aggregated from the Video Game Sales CSV using `d3.nest` and `d3.sum` on the `Global_Sales` field, then sorted and sliced. Axes and rectangular marks are custom React components, with a tooltip provided by SVG `<title>` elements.

Sep 26, 2020

Loading thumbnail…

Video Game Sales

This visualization displays global video game sales from 1980 to the present, with each colored circle representing an individual game. The x-axis maps the release year while the y-axis shows global sales figures, and the color encodes the game's genre. The code uses the Vega-Lite API with a custom configuration to adjust axis labels and styling. The dataset is loaded from a CSV file hosted on GitHub using D3's `csv` method, and the visualization renders as an SVG using the `view.renderer` setting.

Sep 23, 2020

Loading thumbnail…

All Space Missions from 1957

This visualization displays all space missions since 1957 as a scatterplot, with each point representing a single rocket launch. The x-axis encodes the mission date (Datum) while the y-axis lists the company name. The plot is rendered using the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries. The code loads CSV data from a GitHub gist via `d3.csv`, and the chart is configured with a custom dark color scheme, no axis domain lines, and a responsive auto-fit size. Tooltips are enabled through the Vega-Tooltip handler.

Sep 23, 2020

Loading thumbnail…

All Space Missions from 1957

This visualization displays metadata about a dataset of space missions from 1957: its size in kilobytes, row count, and column count. Using D3 v5, the code loads a remote CSV file via `d3.csv` and calculates the file size with `d3.csvFormat`, then renders the three numbers in a large `<pre>` element. The data originates from a Kaggle dataset covering rocket launching records up to the present day. The example also demonstrates alternative loading approaches using `fetch` and `d3.csvParse` in commented-out code.

Sep 16, 2020

Loading thumbnail…

Video Game Sales

This example reads a CSV file of video game sales data from a public GitHub gist, originally sourced from Kaggle, and displays a plain-text summary of its size and structure. It shows the file’s approximate size in kilobytes, the row count, and the number of columns. The code uses D3.js v5’s `d3.csv` to parse the remote data and `d3.csvFormat` to measure its length, then writes the summary into a large `<pre>` element. Alternate commented approaches demonstrate `fetch` with `async/await` and `d3.csvParse`.

Sep 10, 2020

Loading thumbnail…

PM2.5 by County

A minimal data-loading demonstration reports basic facts about a county-level PM2.5 dataset from 2000 to 2018. Using `d3.csv` to fetch a gist-hosted CSV file, it prints the file size in kilobytes, the total row count, and the number of columns into a large `<pre>` element via `d3.csvFormat` and `textContent`. The page also shows commented-out alternatives with `fetch`, `async`/`await`, and `d3.csvParse`, highlighting different ways to handle asynchronous data in D3 v5.

Sep 10, 2020

Loading thumbnail…

React Starter

This example demonstrates how React can be used to build an interactive SVG visualization. It renders a large multicolored circle with a rainbow gradient fill, two rotated ellipses as eyes, and a curved path for a mouth, all positioned at the center of the browser window. The code uses React’s `ReactDOM.render` to mount the component and constructs the SVG elements directly through JSX. The gradient is defined with a `linearGradient` element and applied via a URL reference. No external data library is involved; the visualization is purely geometric and static.

Sep 2, 2020