xiaoma1002

@xiaoma1002·15 public vizzes

Working Title

This interactive visualization presents the CDC's ILINet flu surveillance data through four coordinated panels. A line chart shows annual trends, a choropleth map displays geographic distribution, a bar chart ranks top states, and a second line chart highlights selected states’ yearly patterns. Built with React and D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for chart scales, `d3.geoAlbersUsa` and `d3.geoPath` for the map, and `d3.curveCardinal` for smoothed lines. User interactions include hovering and clicking to filter data across panels, with opacity changes to emphasize selections.

May 13, 2020

Loading thumbnail…

Color and size legends

A legend displays a color scale for four fruit categories—apple, lemon, lime, and orange—as colored circles with matching text labels. Built with D3 v5, the example uses `scaleOrdinal` to map domain values to specific colors and a custom `colorLegend` function that binds data to SVG groups via `selection.selectAll` and `enter()`. The legend is rendered with circle radius, spacing, and text offset as configurable props, demonstrating reusable legend components in SVG.

Mar 22, 2020

Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continents and subregions as a horizontal tree layout. It displays all country names as text labels linked by curved paths, with font sizes decreasing at deeper levels. The implementation uses D3 v5’s `tree` layout and `linkHorizontal` generator to position nodes and draw connections, with `d3.zoom` enabling pan and zoom. Data comes from a local JSON file, rendered as SVG with custom styling.

Mar 22, 2020

Loading thumbnail…

TodoList Project

This example displays the text “Hello HTML” centered on a blank page, with the body font size set to 13em. It serves as a minimal HTML page skeleton rather than a data visualization. The code uses no JavaScript libraries or external APIs, relying solely on static HTML and inline CSS styling. No data source or rendering approach is present beyond the browser’s default text layout.

Mar 22, 2020

Loading thumbnail…

I Raihan Jamil Corona Map!

This visualization displays COVID-19 case and death statistics on a world map, with countries colored according to economic classification using a sequential spectral color scale. The map is rendered using SVG through D3.js v5, with geographic projections applied via `geoNaturalEarth1` and `geoPath`. Country boundaries come from the World Atlas TopoJSON dataset, while the map supports zooming through D3's `zoom` behavior. Hovering over a country reveals its name and associated COVID-19 metrics via tooltips.

Mar 22, 2020

Loading thumbnail…

Let's make a map with D3.js!

This interactive map visualizes world countries using a D3.js SVG rendering, with an orange fill and red outline that highlights on hover. The map loads geographic data from the world-atlas JSON via `d3.json`, then processes it with the `topojson` library’s `feature` function before projecting it with `d3.geoNaturalEarth1` and `d3.geoPath`. A black sphere background and zoom functionality via `d3.zoom` allow panning and scaling the displayed regions.

Mar 22, 2020

Loading thumbnail…

Interactive Map

This interactive map displays survey responses about states visited or lived in, with each state colored according to the frequency of mentions using a choropleth. Built with React and D3 v5, it uses `d3.geoPath` with a `geoAlbersUsa` projection to render U.S. state boundaries from a TopoJSON file. Survey counts are aggregated from a CSV, matched to state names via a TSV, and mapped to a quantile color scale. SVG elements are selected and styled via `d3.select` and `join`.

Mar 20, 2020

Loading thumbnail…

INFO 3300 - HW5

Two D3.js line-area charts visualize weekly tweet volume from a JSON dataset through SVG paths. The first chart plots three tweet categories over time using shared axes and scales. The second chart displays total tweet volume as an orange area with yellow stroke. Both use `d3.json` for data loading, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom` for axes. The time axis uses custom parsing with `d3.timeParse` and tick formatting with `d3.timeFormat`. Data is rendered via area generation, showing trend patterns across weekly dates.

Mar 7, 2020

Loading thumbnail…

2017 Gender Wage Gap in the US

This visualization displays the gender wage gap in the US for 2017, comparing average hourly earnings between women and men across eight occupational categories, such as managers, professionals, and sales workers. It uses a horizontal dot plot with pink circles for female earnings and light blue for male earnings, positioned along a linear scale from $20 to $60, enabling direct visual comparison of income differences. The data is loaded from a CSV file using the D3 v5 library and rendered as SVG elements within a React framework. The chart includes labeled axes, gridlines, and a legend to support interpretation.

Mar 3, 2020

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses React and D3.js to visualize the Iris dataset, displaying petal length against sepal width. A color legend maps each species to a distinct color, and hovering over a legend entry highlights data points of that species while fading all others to 20% opacity. The visualization employs D3's `scaleLinear` for axes, `scaleOrdinal` for the color mapping, and SVG circles for data marks, with axes generated by custom React components from the provided files.

Mar 2, 2020

Loading thumbnail…

2017 Gender Wage Gap in the US

The visualization compares 2017 median hourly earnings across eight occupations for females, males, and all persons in the US. It uses a horizontal dot plot with a band scale for job categories and a linear scale for earnings, rendered as SVG via D3 v5. Each gender is color-coded using `d3.scaleOrdinal` with `d3.schemeCategory10`, and the data comes from `earning_averages_by_year.csv`. The chart includes gridlines and a custom legend to distinguish the three groups.

Mar 2, 2020

Loading thumbnail…

Visualization for the Gender Wage Gap in the US

This visualization compares the gender wage gap across eight occupations in the US for the year 2017, plotting income on the x-axis and job categories on the y-axis. Three colored lines represent females, males, and all persons, with a legend identifying each group. The chart uses D3 v5 to load the CSV data, filter by year, and render an SVG with linear scales for both axes, gridlines, and axis labels. The code employs `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the visualization.

Mar 1, 2020

Loading thumbnail…

Visualization for the Gender Wage Gap in the US

Using d3.v5 and SVG, this example visualizes the gender wage gap in the US by plotting average yearly earnings against eight occupation categories for 2017. It shows income differences across three groups: females, males, and persons overall. The visualization uses d3.csv to load the data, filters for a single year, and then employs d3.scaleOrdinal and d3.schemeCategory10 for color coding. Linear scales (d3.scaleLinear) and axes (d3.axisLeft, d3.axisBottom) render the chart, with gridlines from the left and bottom axes.

Mar 1, 2020

Loading thumbnail…

hw4

A scatterplot visualizes 845 US wines by price on a logarithmic x-axis and points score on a linear y-axis, with each circle colored by state using an ordinal color scale. The D3 v5 code uses `d3.json` to load wines.json, `d3.scaleLog` and `d3.scaleLinear` for axes with gridlines, and SVG circles with jitter. Mouseover interactions trigger transitions that highlight the circle with a black stroke and display the wine title in a text label.

Feb 27, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face appears on a blank canvas, with its two rectangular eyebrows animating upward and then back down in a repeating loop. The facial features—head, eyes, and mouth—are constructed by appending basic shapes to a central group, with the mouth drawn as a semi-circular arc using D3’s `arc` generator. The animation is driven by chaining `transition().duration(2000)` calls on the eyebrow group, demonstrating fundamental DOM manipulation and a simple timeline with D3 v5.

Feb 26, 2020