Skip to main content
Log in
X

xiaojingwu138

@xiaojingwu138·14 public vizzes

Loading thumbnail…

Climate Change and Energy Consumption Change in U.S.

This interactive bar chart visualizes energy consumption per person in the U.S. from 2012 to 2021, highlighting the trend alongside climate change context. Built with D3 v5, the visualization uses an axis and bar layout where hovering over a bar triggers a tooltip displaying the exact value. The chart employs a listening rectangle to capture mouse events, with bars colored steel blue that change to green when selected. The tooltip, styled with a light blue background and red span text, provides detailed data points. The visualization is part of a series linked from the main page, connecting energy usage patterns to broader climate discussions.

Aug 1, 2023
Loading thumbnail…

Untitled

An interactive bar chart displays the growth rate change in U.S. energy sources from 2012 to 2021, with buttons to toggle between Solar and Gas datasets. The visualization shows outlined, red-stroked bars in an SVG, where each bar’s height represents the annual emission growth value. Using D3 v4, the code implements `d3.scaleBand()` for the x-axis, `d3.scaleLinear()` for the y-axis, and transitions that animate axis updates over 2.5 seconds. A tooltip appears on mouseover, and the chart title and axis labels update dynamically based on the selected energy source.

Jul 31, 2023
Loading thumbnail…

Document

This interactive line chart shows the annual growth in U.S. electricity generation from Solar and Gas sources from 2012 to 2021. Users click buttons to toggle between the two datasets, triggering a transition that updates the axes and line path. Built with D3 v4, it uses `d3.line`, `d3.axisBottom`, and `d3.axisLeft` with linear scales, plus SVG transitions and a tooltip for mouseover values. Data comes from the provided `data.csv`, with hardcoded arrays in `vis.js` for each energy source.

Jul 31, 2023
Loading thumbnail…

Climate Change and Energy Consumption Change in U.S.

A stacked bar chart shows the annual change in U.S. primary energy source growth rates (Solar, Coal, Gas, Nuclear) from 2012 to 2021, with tooltips revealing exact values on hover. Built with D3 v5, it uses `d3.layout.stack()` and `d3.scale.ordinal()` to render SVG rectangles, with axes and a legend. The visualization highlights how energy consumption patterns shift over the decade, reflecting climate-related trends. Data is embedded directly in the code as arrays, and interactivity is implemented via mouseover and mousemove events.

Jul 31, 2023
Loading thumbnail…

Making a Bar Chart

This animated scatter plot compares COVID-19 vaccination rates (blue) against reported case counts (gray) in the US, using dual y-axes with proportional data drawn from CDC vaccination counts and NYT 7-day average case data. Built with D3 v5, the chart uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `transition` to animate points as they grow and reposition over time. Interactive dropdown menus, implemented via a reusable `menu` component, allow switching between partial and fully vaccinated metrics, while annotations highlight key dates and case reduction percentages.

Jul 30, 2023
Loading thumbnail…

Fuel Efficiency

This interactive visualization explores 2017 fuel efficiency data for major automobile brands, comparing average highway and city MPG through bar charts that animate when toggled. It demonstrates how engine cylinders and fuel type relate to mileage using scatterplots with hover tooltips. Built with D3 v5, the visualization uses SVG rendering and transitions to smoothly switch between highway and city mileage views, with data loaded from embedded arrays and external CSV sources.

Jul 30, 2023
Loading thumbnail…

Covid-19 Cases from 2020 to 2023

A line chart tracks daily Covid-19 cases in the United States from 2020 to 2023, using data from the New York Times GitHub repository. The visualization, built with D3 v7 and SVG, employs `d3.scaleTime` and `d3.scaleLinear` to map dates and case counts, with `d3.line` generating the trend curve. Axes are formatted with quarterly month ticks and abbreviated counts, while gridlines and labeled axes clarify the temporal and numerical scales.

Jul 29, 2023
Loading thumbnail…

Covid-19 Cases from 2020 to 2023

This interactive line chart visualizes COVID-19 case averages and death counts across U.S. states from 2020 to 2023, sourced from the New York Times rolling-averages dataset. A dropdown menu lets viewers toggle between the two metrics, triggering a smooth 1-second transition that redraws the line path. The visualization uses D3 v7 with an SVG renderer, employing `d3.line()` for path generation, `d3.scaleTime()` and `d3.scaleLinear()` for axes, and a color ordinal scale with `d3.schemeSet2`. Gridlines and labeled axes contextualize the trends.

Jul 29, 2023
Loading thumbnail…

Covid-19 Cases Analysis

This interactive narrative visualization analyzes U.S. COVID-19 cases across three scenes. It shows total case trends per day, state-level comparisons, and case distribution on a map. The line charts use d3.line and d3.scaleTime to plot confirmed and death cases, with interactive navigation between scenes via HTML links. Data is loaded from external CSV files using d3.csv, and rendered as SVG elements. The visualization employs a slideshow structure with drill-down capabilities, allowing exploration of trends over time from January to May 2020.

Jul 26, 2023
Loading thumbnail…

Covid-19 Cases Analysis

This interactive narrative visualization analyzes U.S. COVID-19 case trends across multiple scenes, beginning with a line chart of total confirmed cases from January to May 2020, followed by state-level comparisons and a geographic distribution map. The first scene uses D3 v7 with `d3.select`, `d3.csv`, `d3.timeParse`, and `d3.line` to render an SVG line chart, plotting dates against confirmed case counts from a public COVID-19 dataset. The visualization employs a slideshow navigation format with interactive elements for exploring different data aspects.

Jul 26, 2023
Loading thumbnail…

Covid-19 Cases

This visualization tracks COVID-19 cases and vaccination rates in the United States using a dual-axis scatter plot. Blue circles represent the proportion of the population vaccinated (partial or full), while gray circles show the seven-day average of new cases. The animation reveals trends over time, with annotations highlighting key milestones. Data comes from Our World in Data and the New York Times, rendered with D3 v7 (d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.axisRight) and d3-svg-annotation. A menu lets users toggle between partial and fully vaccinated metrics.

Jul 26, 2023
Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive dual-axis scatter plot visualizes the relationship between COVID-19 vaccination rates (blue circles) and reported cases (gray circles) in the United States over time, using D3 version 6 with SVG rendering and animated transitions. It draws on CDC vaccination data and NYT rolling averages, scaling vaccination proportions against raw case counts with separate y-axes. The visualization includes a dropdown menu to toggle between partially and fully vaccinated metrics, and uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and selection joins with transitions for the animation.

Jul 26, 2023
Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This scatter plot shows the relationship between COVID-19 vaccination rates in blue and reported case counts in gray for the US population, with a dual y-axis for the two metrics. An interactive menu lets viewers toggle between partially and fully vaccinated proportions. The visualization uses D3 v6 with the `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `axisRight` APIs, and animates circle positioning via `transition` and `selection.join`. Data comes from the CDC and NYT rolling averages, with vaccination values normalized by US population size.

Jul 24, 2023
Loading thumbnail…

Narrative Visualization

This interactive narrative visualization, built with D3.js v5, illustrates wage and salary employment rates as a percentage of total employment from 2000 to 2017. It presents a sequence of line charts for the world average, then the USA, China, and Russia, progressing through a multi-step story with clickable “next” buttons. The tool queries live data from the World Bank’s WDI API, loading total, male, and female series for each country. Each step highlights a different country’s trend, with a final interactive mode letting users select gender and country to query and render new lines.

Jul 22, 2023