rioto9858

@rioto9858·14 public vizzes

[Project] PM2.5 Around the World

This visualization combines a world choropleth map, a line chart of all countries, and an interactive tool panel to explore PM2.5 air pollution data from 2010 to 2017. Users can hover over countries to see values, click to select a country and highlight its trend in red, and use a slider to change the year displayed. The map uses `geoNaturalEarth1` projection and `geoPath`, while the line charts are drawn with `d3.line` and `curveNatural`. Data is loaded from a CSV via `d3.csv` and processed with `d3.nest` and `d3.range`.

Oct 30, 2020

Loading thumbnail…

PM2.5 For Selected Country

A line chart displays PM2.5 pollution trends for a selected country from 2010 to 2017, with country choices via a dropdown menu. The visualization loads CSV data from a Kaggle dataset and processes it with d3.csv, then renders an SVG using D3 v5’s scaleLinear, axisBottom, axisLeft, and line with curveBasis. A color legend, generated via a custom colorLegend function using scaleOrdinal and schemeCategory10, shows the selected country’s line color. React dropdown styling is referenced, though rendering relies directly on D3 selections.

Oct 25, 2020

Loading thumbnail…

PM2.5 Around the World

This interactive visualization displays PM2.5 air pollution levels for countries worldwide from 2010 to 2017. A choropleth map, rendered using d3.geoPath and d3.geoNaturalEarth1, color-codes each country by its annual mean PM2.5 concentration. Users can select a year via a slider, which updates both the map and a line chart showing pollution trends for all countries. Hovering or clicking a country highlights its data in red on the line chart. The data is sourced from Kaggle's PM2.5 Global Air Pollution dataset.

Oct 24, 2020

Loading thumbnail…

PM2.5 Around the World

This visualization combines a choropleth map and line chart to explore global PM2.5 air pollution levels from 2010 to 2017. A slider selects the year, updating the map's color shading and highlighting the corresponding point on the time-series chart. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection for the map and `d3.scaleLinear` for chart axes. The data comes from a Kaggle dataset of mean annual PM2.5 exposure for 240 countries, with missing values shown via a diagonal hatch pattern.

Oct 23, 2020

Loading thumbnail…

Mouse Follower with Colorful Circles

A mouse follower creates an expanding circle at the cursor position, with each circle fading out and disappearing after 2 seconds. The circles use the `d3.schemePaired` color scale to generate varied stroke colors. Built with React and D3 v5, the app tracks mouse movement via React’s `onMouseMove` event and appends SVG circles using `d3.select` with a `transition()` duration of 2000ms that animates the radius and stroke opacity.

Oct 20, 2020

Loading thumbnail…

PM2.5 Around the World

This choropleth map visualizes global PM2.5 air pollution concentrations for the year 2011, using a grayscale color scale to represent exposure levels across countries. Missing data is marked with a diagonal hash pattern. The visualization uses d3.geoPath with a natural Earth projection, d3.scaleQuantize for color mapping, and d3.zoom for interactive panning. Data comes from a Kaggle dataset processed via TopoJSON and CSV files, with a custom colorLegend component displaying the value ranges for each shade.

Oct 20, 2020

Loading thumbnail…

Realize a Sketch: PM2.5 in a specific country

This visualization displays the annual PM2.5 concentration trend for China from 2010 to 2017, shown as a line chart with year on the x-axis and PM2.5 value on the y-axis, using the vega-lite-api library. The data originates from a Kaggle dataset covering global air pollution, processed with d3.csv and range functions to filter and reshape the records. The chart applies a customized config for axis styling and includes tooltips showing country, year, and value.

Oct 7, 2020

Loading thumbnail…

Tweak a Face Assignment by Enze Liu

This example shows a panda face built entirely from geometric primitives, with each facial feature drawn using D3’s arc generator alongside SVG circles and ellipses. The face uses arcs for the eyes, nose, mouth, and ears, while ellipses form the eye sockets and circles add the blush. The code imports React and ReactDOM to render the SVG, relying on D3 v6’s `arc` function with explicit inner and outer radii plus start and end angles. Transformations such as rotations and translations position each part symmetrically around the canvas center.

Sep 27, 2020

Loading thumbnail…

Loading data "PM2.5 Global Air Pollution 2010-2017" by Enze Liu

This example reads a CSV file of PM2.5 air pollution data for 240 countries from 2010 to 2017, then displays a simple summary of the dataset. It shows the file size in kilobytes, the number of rows, and the number of columns as large text on the page. The visualization uses only the d3.csv method from D3 v5 to load and parse the data, and it also includes commented-out alternatives using fetch with async/await and a nested promise approach. The data originates from a Kaggle dataset hosted on GitHub Gist.

Sep 20, 2020

Loading thumbnail…

PM2.5 Air Pollution Trend

This visualization presents PM2.5 air pollution trends from 2010 to 2017 for 240 countries, with each country’s annual mean exposure drawn as a thin, semi-transparent line over time, revealing a sharp global dip in 2014 followed by a rebound in 2015. Built with the vega-lite-api and D3.js, it loads CSV data from a GitHub Gist via `d3.csv`, then melts the dataset into a tidy format before rendering line marks with tooltips. The code customizes axis styles, hides the domain, and uses a dark color scheme to improve readability, with the view auto-sizing to the browser window.

Sep 20, 2020

Loading thumbnail…

Loading data "Top 50 Spotify music from 2010 to 2019" by Enze Liu

This example demonstrates loading a CSV dataset of the top 50 Spotify songs from 2010 to 2019, reporting its size in kilobytes, row count, and column count. The visualization uses D3 v5’s `d3.csv` method to fetch and parse the data, then updates a large text element with the statistics. The dataset, sourced from Kaggle via a GitHub Gist, contains 603 rows and 14 columns. An alternative asynchronous approach using `fetch` and `d3.csvParse` is also shown in commented code.

Sep 20, 2020

Loading thumbnail…

What is the most popular songs' genre?

This bar chart shows the number of top Spotify songs per year from 2010 to 2019, colored by genre, revealing that dance pop is consistently the most popular genre while audience taste shifts annually. Built with the vega-lite-api and rendered via vega-lite, the visualization counts tracks by genre using an aggregate query. The data is loaded as CSV from a GitHub Gist using d3.csv, and the chart applies custom axis and label styling from a separate config module.

Sep 20, 2020

Loading thumbnail…

Loading data "All Space Missions From 1957" by Enze Liu

This example loads a CSV file of all space missions from 1957 and displays basic dataset statistics in large text: file size in kilobytes, row count, and column count. It uses d3.csv to fetch and parse the data from a GitHub Gist, then reports the formatted file length and the parsed array’s dimensions. The code also includes commented alternatives using fetch with async/await and a nested promise chain, illustrating different loading approaches with D3 v5’s CSV parsing.

Sep 20, 2020

Loading thumbnail…

Who launched the most rocket in each decade

A scatterplot, built with the Vega-Lite API and rendered by Vega, shows the launch counts of various space agencies and companies over time. Each point represents a single rocket launch, positioned by its date and the responsible organization, revealing which entities dominated each decade, such as RVSN USSR in the 1960s and SpaceX more recently. The visualization uses data from a Kaggle dataset on space missions, with tooltips displaying rocket names, and the code relies on Vega-Lite's markPoint encoding and the d3 CSV loader for data ingestion.

Sep 20, 2020