yuzhang21

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization of ILINet flu surveillance data combines a choropleth map, line charts, and a bar chart to show yearly, weekly, and state-level patterns. Users can select metrics and filter by year and the number of top states. Built with React and D3 v5, it uses `d3.geoPath` with `geoAlbersUsa` for the map, `d3.line` with `curveCardinal` for the curves, and SVG for rendering. The CDC data is loaded via `d3.csv`.

May 17, 2020

Stacked Algorithm Results Evaluation

This stacked bar chart evaluates franchise revenue performance, breaking down each franchise's total earnings into color-coded revenue categories. Interactive highlighting via the color legend filters and emphasizes specific segments, while a semi-transparent overlay dims non-selected bars. The visualization uses D3.js with d3.layout.stack for layering, d3-legend for the interactive legend, and d3-tip for hover tooltips showing revenue values in billions. Data comes from Tidy Tuesday's 2019 franchise revenue dataset, rendered as an SVG animation.

May 16, 2020

Algorithm Results Evaluation

This visualization evaluates algorithm results by displaying a bar chart of high values across different versions and levels, filtered from a CSV dataset of lead concentrations. The chart uses Vega-Lite with a dark-themed config to improve readability, encoding version on the x-axis, level on the y-axis, and color for categorical distinction. Data is loaded via D3’s `csv` function, filtered for indices greater than one and non-V1.0 versions, then sorted to focus on top countries, with tooltips enabled through the Vega Tooltip handler.

May 16, 2020

ILINet Flu Surveillance Data Interactive Visualization

Oct 30, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive dashboard visualizes ILINet flu surveillance data across multiple coordinated views: a line chart of weekly ILI percentages by year, a choropleth map of state-level averages, a bar chart of top states, and a dot plot. Users select metrics and attributes via dropdowns, with hover and click interactions linking highlights across views. Built with React and D3 v5, it uses `scaleOrdinal`, `scaleSequential` with `interpolateYlOrRd`, `geoAlbersUsa` with `geoPath`, and `scaleBand` for the bar chart. Data comes from CDC FluView, processed with `csv` from D3.

Oct 30, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization uses the ILINet Flu Surveillance dataset to explore US flu activity through four coordinated views: a line chart of weekly ILI percentages by year, a scatter plot mapping ILI percentage against week, a bar chart of state-level trends, and a US map colored by average ILI values. Built with D3 v5 and React, it employs SVG rendering with interactive selection, hover highlighting, and opacity fading. The tool uses `geoAlbersUsa` and `geoPath` for the map, `scaleLinear`, `scaleBand`, and `scaleOrdinal` for scales, supporting user control via dropdowns to select attributes and the number of top states displayed.

Oct 28, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores the CDC’s ILINet flu surveillance dataset, tracking influenza-like illness percentages, patient counts, and provider volumes across states and years. The interface combines a scatterplot, choropleth map, bar chart, and multi-line chart, all rendered with SVG using React and D3 v5. Users filter attributes and select states or years via dropdown menus and clickable legends. Data aggregation uses custom JavaScript reducers, while the map relies on TopoJSON from the us-atlas package and d3.geoPath for rendering geographic boundaries.

Oct 26, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data, showing ILI percentage and total patient counts across U.S. states by year and week. It combines multiple mark types: a line chart displays trends by year, a dot plot maps ILI percentage against week with circle size encoding patient volume, a bar chart ranks states by average ILI, and a choropleth map colors states by aggregated values. Built with React and D3 v5, it uses `scaleOrdinal`, `scaleLinear`, and `scaleBand` for encoding, with interactive filtering through dropdowns and hover/click highlighting.

Oct 25, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data, showing metrics like ILI percentage and total patients across US states, weeks, and years. It combines multiple views: a US map displaying state-level averages, a bar chart of the top 10 states, scatter plots, and a line chart showing trends by year, all with dropdown controls to switch data fields. The React-based app uses D3 v5 modules including d3.csv for data loading, d3.scaleOrdinal for coloring, d3.geoAlbers and d3.geoPath for map projection, and d3.line with curveCardinal for the time-series curves. The data originates from CDC FluView Interactive.

Oct 25, 2019

Stacked Franchise Revenues by Revenue Category

This stacked bar chart displays franchise revenues by revenue category, with bars segmented by category and a color legend that highlights individual layers on hover. The visualization, rendered as SVG, uses D3.js to scale the x-axis in billions and the y-axis by franchise name, with tooltips providing exact revenue figures. It incorporates the d3.legend and d3.tip APIs for interactive legend highlighting and informative tooltips, while the data comes from Tidy Tuesday’s 2019 franchise revenue dataset. The chart is built upon a forked stacked bar example, layering semi-transparent overlays to emphasize selected categories during mouse interaction.

Oct 24, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data, showing aggregated ILI percentages and patient counts across U.S. states and years through multiple coordinated views: a scatterplot of weekly values, a choropleth map, a bar chart of top states, and a multi-line chart. Users can select attributes and filter states, with hover and click interactions highlighting selections across views. Built with React and D3 v5, it uses scales like `scaleLinear` and `scaleOrdinal`, coupled with `geoPath` and `geoAlbersUsa` for map rendering, and loads data via `d3.csv` from a remote GitHub source.

Oct 23, 2019

Interactive Scatter Plot for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, with dropdown menus to select X and Y axes. Points encode Charles River proximity via color and pupil-teacher ratio via size. Hovering over legend items filters and highlights matching points by adjusting opacity (20%, 50%, 80%). Built with React and D3 v5, it uses `scaleLinear` for positioning and size, `scaleOrdinal` for color, and SVG rendering. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

Oct 21, 2019

Outbreaks in United States

This interactive visualization displays the distribution of disease outbreaks across US states, with color intensity representing the number of illnesses reported. The map uses a pink color scale mapped to the sum of illnesses per state, with white indicating no reported cases and darker pink indicating higher counts. The code employs d3.geoPath with a geoAlbers projection to render US state boundaries from the us-atlas TopoJSON, while React hooks load and process outbreak data from the CDC NORS system. Graticules and state interiors are drawn as additional SVG paths to enhance geographic context.

Oct 19, 2019

Multiple Views with Brushing

This example combines a world map of migration incidents with a time-series histogram below it. Brushing on the histogram filters the map’s circles, which scale by the total dead and missing. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas land and graticules, while the histogram bins `d3.timeMonths` and sums values. Data comes from the Missing Migrants Project CSV, rendered as SVG via React with D3 scales.

Oct 19, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization displays ILINet flu surveillance data, showing aggregated weekly influenza-like illness percentages across US states from 2015 onward. The interface combines four coordinated views: a line chart colored by year, a scatter plot encoding patient counts through circle size, a horizontal bar chart of state averages, and a choropleth map. Users select which data attribute to visualize through a dropdown menu. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for year-based coloring, d3.scaleLinear for axes, d3.line with curveNatural for smoothed trajectories, and d3.geoAlbers with topojson for the US map rendering.

Oct 17, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization displays ILINet flu surveillance data from CDC FluView, showing a scatter plot of weekly state-level metrics where circle size encodes total ILI patients, color distinguishes years, and position encodes the selected field (e.g., ILI percentage) over week of the year. It also includes a choropleth map of the U.S. rendered with `d3.geoPath` and `topojson`, plus a horizontal bar chart ranking states by average ILI percentage using `d3.scaleBand` and `d3.scaleLinear`. Users switch data fields via a React dropdown. The D3.v5 and React code loads CSV data from a remote gist.

Oct 16, 2019

Centered US Map

This visualization renders a centered choropleth map of the United States, coloring each state by a numeric rate loaded from a TSV file. The map displays state boundaries, graticules, and a sphere outline. Built with React and d3.v5, it uses `d3.geoAlbers` and `d3.geoPath` to project TopoJSON data from the US Atlas, while a `d3.scaleLinear` maps rate values to colors for the SVG paths.

Oct 16, 2019

World Happiness Scores by Population

This visualization displays world happiness scores for 156 countries, with circle area encoding population size on a natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath. Pan and zoom interactions are enabled via d3.zoom, while hovering reveals country names and happiness scores, and clicking provides additional detail. Circles are scaled with d3.scaleSqrt, and the size legend uses d3.format for population labels. Data comes from the World Happiness Report, joined to TopoJSON country geometries, with rendering in SVG.

Oct 16, 2019

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data, presenting multiple linked views: a scatter plot, bar chart, and US map. The main scatter plot encodes weekly ILI percentages by year using color, while point size represents total patient counts. A dropdown menu allows switching between different data fields. The visualization uses React for state management and D3.js (v5) for scales, axes, and geographic projection via d3.geoPath, with data loaded from a CSV source via d3.csv.

Oct 14, 2019

Line Chart for ILINet Flu Surveillance Data

This interactive dashboard visualizes ILINet flu surveillance data across U.S. states, combining a scatter plot, choropleth map, bar chart, and line chart. Users select a numeric attribute (e.g., ILI percentage) via a React dropdown, which updates the y-axis and point colors across years. The map uses d3.geoAlbers and topojson to render state boundaries, while the line chart employs d3.line with curveNatural to show seasonal trends. All marks render as SVG elements, with d3.scaleOrdinal for colors and d3.scaleLinear for sizes. Data originates from CDC FluView Interactive, loaded as CSV via d3.csv.

Oct 14, 2019

Multiple Views Cleanup

This example combines a bubble map and a date histogram to visualize the locations and timing of migrant deaths and disappearances. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world landmasses with graticules, while circles scaled by d3.scaleSqrt represent the total dead and missing per incident. The histogram below uses d3.bin with timeMonths thresholds and a scaleTime x-axis to aggregate the same data over time, with rect marks colored by the d3.linear y-scale. Data comes from the Missing Migrants Project CSV, and the React components use d3.v5 for all scales and shapes.

Oct 13, 2019

World Happiness Scores by Population

This visualization displays world happiness scores for 156 countries, with circle size representing population and hover tooltips revealing happiness scores. Users can pan and zoom using d3.zoom. The map uses d3.geoPath with a Natural Earth projection, while population circles are sized with d3.scaleSqrt. Country boundaries come from TopoJSON data, and happiness scores originate from CSV data in the World Happiness Report. A custom sizeLegend displays population values, and color-coded countries distinguish those with missing population data.

Oct 11, 2019

NACRO Membership: Corporate Engagement

This choropleth-style map displays the geographic distribution of NACRO member institutions, colored by tier, with circles representing their locations. The visualization layers a geometric map of U.S. states from a TopoJSON source with a circle-mark layer for each institution, using `vl.markGeoshape` for the state outlines and `vl.markCircle` for the data points. It encodes longitude and latitude from the College Scorecard dataset, colors by the `Level` field, and includes tooltips showing the organization name. The map uses an Albers USA projection, with data fetched asynchronously via `d3.csv`.

Oct 10, 2019

US Choropleths Map And Captital/Major Cities

This example displays a choropleth map of the contiguous United States with state boundaries rendered as colored polygons, overlaid with two city datasets. State colors transition from white to blue via a `scaleLinear` color scale, while graticules and interior borders are drawn using `d3.geoPath` and `d3.geoGraticule`. Population data from a world cities CSV appears as semi-transparent purple circles sized with `scaleSqrt`, and state capitals from a Vega JSON file are fixed black dots. The map uses TopoJSON from the us-atlas library, projected with `geoAlbers` in an SVG rendered through React.

Oct 10, 2019

Centered US Map

This example displays a centered map of the United States with state boundaries, rendered as an SVG using React. It loads geographic data from the US Atlas TopoJSON and projects it with `d3.geoAlbers` and `d3.geoPath`, while `d3.geoGraticule` draws latitude and longitude grid lines. The map includes a blue sphere background, green landmasses, and state interiors highlighted with a contrasting stroke, all styled via CSS classes. The code initializes the visualization with a `useUsAtlas` hook that fetches and processes TopoJSON features and meshes.

Line Chart for ILINet Flu Surveillance Data

Rendering Data with React

This example renders a dataset of CSS named colors as a pie chart, with each slice filled by the corresponding color's RGB hex value. The visualization uses D3's `csv` utility to fetch the data from a remote URL and React to structure the SVG output. The pie chart is generated via D3's `pie` and `arc` functions, which compute the slice geometries, while React's `useState` and `useEffect` hooks manage asynchronous data loading and state. The chart is drawn on an SVG canvas, with a loading message displayed until the data is available.

Centered US Choropleths Map

A centered US choropleth map displays state boundaries with a uniform purple fill, using state-level rate data from a TSV file. The visualization loads US Atlas TopoJSON data and renders it with React and D3 v5, using `d3.geoAlbers` for projection and `d3.geoPath` to draw state and interior mesh paths. The code includes commented-out attempts at threshold-based color mapping with `d3.scaleThreshold` and `d3.schemeGreens`, though the final version applies a single color to all states.

Centered US Map

This example displays a centered map of the United States with state boundaries highlighted in blue over a green landmass, set against a graticule grid and a light blue spherical backdrop. Using React and D3 v5, the visualization loads US Atlas TopoJSON data and converts it to GeoJSON features via topojson’s `feature` and `mesh` functions. The map is rendered through SVG paths generated by `d3.geoPath` with a `geoAlbers` projection, while `geoGraticule` creates the background grid lines.

Line Chart for ILINet Flu Surveillance Data

This visualization combines a scatter plot and a horizontal bar chart to explore ILINet flu surveillance data. The scatter plot displays weekly ILI percentages by state, using color to differentiate years and point size to encode the total number of recorded patients. A dropdown menu allows users to change the y-axis attribute. The bar chart aggregates ILI totals for the top ten states. Built with React and D3.js (v5), it uses `scaleLinear` for axes and sizes, `scaleOrdinal` for colors, and renders all graphics as SVG.

Line Chart for ILINet Flu Surveillance Data

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It ranks countries by population with horizontal bars, using React to render SVG elements and d3.scaleBand and d3.scaleLinear for positioning. The chart includes styled axes with formatted tick labels that convert values to billions, and native SVG `<title>` elements provide tooltips on hover.

Top 10 States in 2018

This bar chart shows the top 10 countries in 2018 by total exports, with bars colored by export type and tooltips displaying values. The visualization uses vega-lite-api to define a bar mark with x encoding for country name sorted by descending y values, and includes a vega-tooltip handler for interactivity. Data comes from a CSV file of World Bank World Development Indicators, filtered in getData.js using d3.csv and sorting country totals with d3.descending.

Top 10 States in 2018

This bar chart shows the top 10 countries by total exports in 2018, with each bar colored by export type (manufactures vs. total merchandise) and tooltips revealing exact values. Built with Vega-Lite and the `vega-lite-api`, it filters World Bank data fetched via `d3.csv`, aggregates totals per country, and sorts bars descending by value. The rendering uses SVG, with a custom configuration for axis styling and font sizing.

Oct 7, 2019

Line Chart for ILINet Flu Surveillance Data

The ILINet Flu Surveillance dashboard visualizes weekly flu activity across U.S. states from 2015 onward, encoding ILI percentage on the y-axis and week of year on the x-axis, with year shown by color and ILI total patient counts by circle size. A dropdown menu lets viewers switch the y-axis variable among ILI percentage, ILI total, provider count, or total patients. The visualization is built using React with D3 v5 scales and SVG rendering, loading data via `d3.csv` from a GitHub-hosted ILINet dataset, and displaying tooltips through native SVG `<title>` elements.

Oct 7, 2019

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, letting users compare how different flower measurements correlate by selecting any two attributes from dropdown menus for the x and y axes. Built with React, D3 v5 scales, and SVG, it renders circles with tooltips and formatted axis ticks. The menus use the react-dropdown library, while data is loaded as CSV and parsed with d3.csv.

Oct 6, 2019

Scatter Plot with Menu for ILINet Flu Surveillance Data

This interactive scatter plot visualizes ILINet flu surveillance data, showing each state as a point positioned by week of the year and a user-selected field (ILI percentage, total patients, or providers), with color encoding year and circle size representing ILI total. A dropdown menu lets viewers switch between data fields for the y-axis. Built with React and D3 v5, the visualization uses `scaleLinear` for axes and sizing, `scaleOrdinal` for colors, and SVG rendering with custom axis components, reading data from a CSV file of CDC FluView records since 2015.

Oct 2, 2019

Scatter Plot with Menus for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, which includes 14 attributes such as crime rate, room count, and median home value. Users select any two variables from dropdown menus to map to the X and Y axes, while point color encodes proximity to the Charles River, size reflects pupil-teacher ratio, and 35% opacity reveals overlapping points. The visualization uses React with d3.scaleLinear and d3.scaleOrdinal for scaling, SVG for rendering, and fetches CSV data via d3.csv, with tooltips showing median home value.

Oct 2, 2019

ILINet Flu Surveillance Data

This interactive visualization displays ILINet flu surveillance data from the CDC, plotting weekly observations for each state since 2015. Users can choose a data field—such as ILI percentage, total patient count, or number of providers—via a React dropdown menu. The scatter plot maps week to the x-axis, the selected field to the y-axis, year to color, and ILITOTAL to circle size. Built with vega-lite-api and d3.csv, it renders through vega and vega-tooltip, with appearance customized via a config object.

Oct 1, 2019

ILINet Flu Surveillance Data

This visualization displays national ILI total cases per week for each year from 2015 to 2019, using multi-series line marks to compare seasonal flu patterns year-over-year. The chart aggregates ILITOTAL values by year, region, and week, with color and size encoding the year. It is built with vega-lite-api, vega-lite, and d3, pulling data from a CSV fetched via d3.csv. The data originates from CDC FluView Interactive, and the visualization is configured with custom axis and label styling.

Oct 1, 2019

ILINet Flu Surveillance Data

This visualization displays ILINet flu surveillance data from the CDC, plotting weekly observations since 2015. Each circle represents a state’s weekly report, with color encoding year, position encoding the selected field (such as ILI percentage or patient totals), and circle size encoding ILITOTAL patient counts, revealing seasonal flu spikes. A React dropdown menu lets users switch between data fields, which dynamically updates the Vega-Lite specification via vega-lite-api. The chart is rendered with Vega 5, Vega-Lite 4, and d3.csv for data loading, with tooltips provided by vega-tooltip.

Oct 1, 2019

Polished Scatter Plot with Menus

Sep 30, 2019

Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of six options and displaying the chosen value in the browser console. It shows how React manages component state through the `useState` hook, with the selected value stored in the `App` component and passed down to a reusable `Dropdown` component. The dropdown uses a native HTML `<select>` element, and each option renders based on the provided data array. The code uses React 16.9 and ReactDOM to render the interface, with the selection change handled via the `onChange` event and `onSelectedValueChange` callback.

Sep 30, 2019

Rotating Disks

This example shows a cluster of rotating color wheels built from CSS named colors loaded via d3.csv from a GitHub gist. Each wheel is composed of four concentric rings, rendered as SVG pie arcs using d3.arc and d3.pie, with React components creating the ring structure. The rotation is driven by d3.timer, updating a rotation state that applies different rotation speeds and directions to each ring via transform attributes. Twelve ring components are arranged in a triangular grid around a central point, creating a dynamic, layered visual pattern.

Sep 30, 2019

Hello React!

This example visualizes a choropleth map of the United States, displaying state-level unemployment rates with a green color scale derived from a TSV data file. Built with React and D3 v5, it renders state boundaries and graticules using `d3.geoPath` with an Albers projection, pulling TopoJSON data from the US Atlas. The React component hierarchy separates data loading in `useData` from map rendering in `Marks`, though the visualization currently displays a static map without completing the data-to-color binding.

Movie Counts by IMDB Rating

This example shows a bar chart of movie counts binned by IMDB rating, using data from the Vega documentation’s movies.json file. The chart, built with the vega-lite-api, uses a markBar encoding with an IMDB_Rating field binned on the x-axis and a count on the y-axis. The visualization is rendered as SVG via vega and vega-lite, with tooltips provided by vega-tooltip and data loaded asynchronously through d3.json.

Massachusetts City Population by Burglary

This visualization compares burglary counts across Massachusetts communities using a bar chart with a logarithmic scale, making large value differences readable. The chart groups bars by community, with crime type on the x-axis and total crime count on the y-axis, colored by crime type. Built with the vega-lite-api library, it uses d3.v5 to load and unpivot a CSV dataset fetched from a Gist, then aggregates counts per community and crime type via `vl.aggregate` and `vl.sum`. Custom axis styling in `config.js` improves label readability.

Vega-Lite API Template

This visualization displays the average median home value by room count, arranged in descending order within each district. The bar chart uses color to encode the room count variable, creating a grouped comparison across districts. Built with the Vega-Lite API, it registers both Vega and Vega-Lite libraries, loads Boston housing data from a CSV via d3.csv, and renders interactive tooltips through the Vega Tooltip Handler. The chart’s appearance is customized using a dark color scheme, with axis ticks and guide labels styled for readability.

Vega-Lite US Map Unemployment

A choropleth map of US state unemployment rates colors each state according to its quantitative rate, with a blue hover effect on state borders. The visualization loads US TopoJSON data from Vega’s repository and joins it with a TSV file mapping state IDs to unemployment percentages. It uses Vega-Lite’s `geoshape` mark, `albersUsa` projection, and a lookup transform to merge the datasets. The code leverages the vega-embed library, d3.csv for data loading, and vega-tooltip for interactive inspection, with the map rendered inside an HTML page using Vega-Lite’s API.

ILINet Flu Surveillance Data

This visualization displays ILINet flu surveillance data as small multiples of bar charts, with each panel representing a year and showing the average total patients per week across regions. The bars are colored by year, and hovering reveals ILI totals. The chart is built using vega-lite-api with vega-lite and vega, with data loaded via d3.csv from a Gist. The code aggregates patient counts by year, region, and week, and applies custom configuration for axis styling and tooltips. Data originates from the CDC FluView Interactive.

Vega-Lite API Choropleths Maps Table Row

This example displays multiple choropleth maps arranged in a table row, each representing income percentage distribution across U.S. states for a different income bracket. Using Vega-Lite’s geoshape mark with an AlbersUSA projection, it merges income data with TopoJSON state geometries via a lookup transform. The visualization is rendered through the Vega-Lite API and embedded with vega-embed, pulling income data from a CSV and US state boundaries from the vega-docs repository.

Vega-Lite US Maps With Captital Cities

This example visualizes U.S. state capitals as orange circles with city name labels, layered over a light gray map of U.S. states. It uses two Vega-Lite layers: a geoshape for the TopoJSON state boundaries and a composite layer combining circle and text marks for the capitals, positioned by longitude and latitude from the us-state-capitals.json dataset. The code relies on Vega-Lite’s projection type `albersUsa`, and embeds the visualization via `vegaEmbed` in an HTML page.

Vega-Lite US Map for Unemployment Rate

This choropleth map visualizes U.S. state-level unemployment rates using a sequential color scale. Built with Vega-Lite, it loads TopoJSON state boundaries and joins them to a TSV file of rates by state ID. The map applies an Albers USA projection. The code uses `vega-embed` to render the specification, with `getData.js` importing CSV data via D3. A hover effect is implemented with CSS, and the original configuration was adapted from a Vega-Lite example that used county-level data.

Vega-Lite Choropleths Maps Table Column

This example shows three choropleth maps of U.S. states, each displaying a different quantitative column—population, engineers, and hurricanes—from the same CSV dataset. The maps are generated using Vega-Lite’s repeat operator to iterate over the three fields, with each map using an Albers USA projection and independent color scales. The code loads TopoJSON state boundaries and joins them to the data via a lookup transform, while D3 v5 fetches the CSV locally. Custom axis and label styling in `config.js` improves readability.

Housing Values At Boston Suburbs

This visualization displays summary statistics for the Boston Housing dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It loads a CSV file from a Gist URL using the `d3.csv` API, formats the data with `d3.csvFormat`, and presents the results in a large pre-formatted text element. The example demonstrates basic data loading and parsing with D3.js v5, sourced from the Boston Housing Data repository by selva86.

ILINet Flu Surveillance Data

This example loads ILINet influenza surveillance data from a CSV file hosted on GitHub Gist, then displays a textual summary of the dataset’s size and structure. It reports the file size in kilobytes, the number of data rows, and the number of columns. The code uses the D3.js v5 library, specifically the `d3.csv` parsing method and `d3.csvFormat`, to read and analyze the data asynchronously. The original data originates from the CDC FluView Interactive platform, providing a concise overview of the dataset’s scale without any chart or visualization.

Smiley Face Part III

This smiley face visualization shows a cartoon face with asymmetrical eyes, eyebrows, a nose, a mouth, and hair, all rendered as SVG elements within a React component. The face is constructed using D3’s `arc()` generator for the eyebrows and mouth, with rotation and translation transforms applied to position them. React manages the SVG markup, while D3 v5 provides the arc paths. The eyebrows are rotated by -70 and 70 degrees, and the mouth is flipped 180 degrees, demonstrating composable geometric transformations.

Smiley Face Part I

A yellow smiley face rendered with SVG displays a circular head, two eyes, and an arc-shaped mouth. The visualization uses React to structure the SVG elements and D3's `arc()` generator to create the mouth path. The code sets explicit dimensions, positions the face at the center, and applies a black stroke around the head. No data is loaded; the face is purely constructed from hard-coded geometry values like `centerX`, `eyeOffsetX`, and `mouthRadius`.

Smiley Face Part II

A smiley face drawn with React and D3's `arc` generator renders in SVG, combining geometric shapes for the head, eyes, pupils, and a purple nose. The face uses D3's `arc()` API for the mouth arc, while React handles the component structure and JSX. A hairline path strokes downward from the top, and the face is centered with a transform. D3 v5 and React 16.9 work together, with visible `fill-opacity` and `stroke-width` attributes on the SVG elements.

MRI and Alzheimers Data

This scatter plot explores the relationship between age, normalized brain volume (nWBV), and dementia severity (CDR) in the OASIS cross-sectional MRI dataset. Each point represents a patient, positioned by age and nWBV, with color encoding education level and point size indicating dementia rating. The visualization uses the vega-lite-api with d3.v5 for rendering, fetching data from a Gist-hosted CSV file. The chart is configured with custom styling for readability, including larger axis labels and a dark theme.

MRI and Alzheimers Data

A scatterplot displays the relationship between normalized brain volume (nWBV) and estimated total intracranial volume (eTIV) for individual patients from the OASIS cross-sectional MRI dataset. Circles encode education level by size and sex by color, with tooltips revealing the atlas scaling factor. The visualization uses the vega-lite-api to construct the chart, d3.csv for data loading, and vega-tooltip for interactivity, with a custom configuration adjusting axis and label styling.

MRI and Alzheimers Data

This gallery page presents four scatter plots exploring the relationship between brain measurements and dementia in the OASIS MRI dataset. The visualizations show that dementia corresponds to lower normalized brain volume, that eTIV and ASF share a fixed non-linear inverse relationship, and that dementia occurs more frequently in older populations without a clear link to education. Plots colored by gender reveal a separation in eTIV values. Built with the Vega-Lite API and D3.js, the code uses `vl.markCircle` encodings for position, color, and size, pulling data from a CSV file via `d3.csv`.

Centered US Map

This example shows a choropleth map of US states colored by a numeric rate value, using a green color scale from d3.scaleThreshold. The map is centered on the US using the geoAlbers projection and rendered with d3.geoPath in SVG. State boundaries come from US Atlas TopoJSON data, with interiors highlighted via topojson.mesh. The React app loads state rate data from a TSV file and maps each state’s rate to its fill color. Graticules and a smooth sphere background complete the polished cartographic style.

Centered US Map

This example displays a choropleth map of the United States, colored by state-level data from a TSV file, with state boundaries, a graticule, and a sphere outline for context. It loads GeoJSON topology from the US Atlas and uses the `d3.geoPath` projection to render the shapes as SVG paths. The color scheme is built with `d3.scaleThreshold` and `d3.schemeGreens`, while state fill values are assigned via a lookup table. The map is embedded in a React component using the `useData` hook to fetch and process the data.

Centered US Map

This visualization displays a US state map using the Albers equal-area projection, with state boundaries rendered as SVG paths. The map is centered and includes graticules, with states colored via random colors from a generated lookup table. The visualization is built with React and D3 v5, using `d3.geoPath` with the `geoAlbers` projection and `geoGraticule`. State boundaries come from the US Atlas TopoJSON data, while a TSV file provides rate values that could be mapped through a threshold color scale.

Centered US Map

This map of the United States uses a centered Albers projection, colored land and interior state boundaries against a graticule-filled sphere. The visualization is built with React, using D3's `geoAlbers`, `geoPath`, and `geoGraticule` functions to render the SVG paths. Topological data is loaded from the `us-atlas` package, and the `topojson` library's `feature` and `mesh` functions extract the nation and state-boundary geometries for display.

Centered US Map

This visualization presents a centered map of the United States, displaying state boundaries as colored polygons to represent a quantitative rate per state. The map is rendered using SVG within a React framework, with geographical data loaded from the US Atlas TopoJSON. The code employs D3 v4 APIs such as `geoPath` and `geoAlbers` to project the map, and `scaleThreshold` with `schemeGreens` to color states based on rates from a TSV file. Gratricules are included as a visual aid.

Centered US Map

US Choropleths Map

This visualization renders a choropleth map of the United States, coloring each state by an ILI percentage value to reveal geographic patterns in flu activity. The map uses a threshold color scale with a legend, and state hover effects highlight individual regions. Built with D3.js v4, the code employs `d3.geoPath` and TopoJSON to draw state boundaries from the `us-10m.v1` dataset, while color values come from a TSV file of state-level rates. A secondary bar chart generated with Vega-Lite displays aggregated ILI totals by week and year.

Centered US Map

This interactive map of the United States displays state boundaries using D3’s geoAlbers projection, with states colored by random sample data defined in the code. The visualization loads TopoJSON from the us-atlas package, rendering landmasses and graticules via d3.geoPath and d3.geoGraticule. React manages the SVG rendering, while CSS styling applies a teal land fill and blue graticule stroke.

Happiness Factors Comparison by Country

This interactive scatter plot explores the relationship between two selected happiness factors across countries, using data from the World Happiness Report. Users can choose any two factors from dropdown menus, and each dot represents a country. The visualization employs D3.js v4 and SVG with animated transitions, showing how factors like GDP per capita and school years correlate with happiness scores. A color-coded legend highlights specific factors, and hovering over a dot reveals the country’s name and its values.

Sep 24, 2019

Centered US Map

Sep 24, 2019

Making a Bar Chart Part e.g.1

This example demonstrates a minimal React and D3 integration that loads CSV data and displays it as a raw text dump. The application fetches a CSV file containing CSS named colors using D3’s `csv` utility, then passes the parsed array to React’s `useState` and `useEffect` hooks. While the code includes commented-out scaffolding for a bar chart with `scaleBand`, `scaleLinear`, and `max`, the active rendering simply prints the first data row to the console and shows a loading message. The final visualization is not yet implemented, only the data-loading pipeline is functional.

Refactored Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with the bar length proportional to each country’s 2020 population estimate. Axes are included: a bottom linear scale for population values and a left band scale for country names. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for scaling, `csv` for data loading from the UN World Population Prospects 2019, and renders the chart as SVG with custom axis and mark components.

Polished World Map

This example displays a world map using a natural Earth projection, with landmasses, country interiors, and graticules rendered as SVG paths. The visualization is built with React, using d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions to project geographic features. Data is sourced from the World Atlas TopoJSON via a `useData` hook, which employs d3’s `json` loader and topojson’s `feature` and `mesh` methods. The map’s visual polish comes from CSS styling that colors land, sphere, interiors, and graticules in distinct teal and gray tones.

World Map First Pass

This example renders a world map from country boundary data loaded from the World Atlas TopoJSON source. The visualization displays all country features as geographic paths, with each nation outlined in a teal stroke color with rounded line joins. The map uses `d3.geoEqualEarth` for the projection and `d3.geoPath` to convert GeoJSON features into SVG paths within a React component. Data is fetched asynchronously using `d3.json` and converted from TopoJSON to GeoJSON via the `feature` function from the `topojson` library.

Line Chart

This line chart displays temperature readings over time from the Data Canvas Sense Your City dataset, with a smooth natural curve connecting data points. The chart uses React components to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the x and y axes respectively. The d3.line generator applies the curveNatural interpolation to create the smooth path, while d3.timeFormat formats the day labels on the bottom axis.

Rendering Data with React

This example displays CSS named colors from a CSV file as horizontal color bars using React. The code loads data with D3’s `csv` utility and renders each row as a styled `div` element, with the background color set from the `RGB hex value` field. React’s `useState` and `useEffect` hooks manage asynchronous data fetching, showing a “Loading” message until the data arrives. The visualization demonstrates a simple React-D3 integration for data-driven styling.

Sep 22, 2019

Mouse Follower

This example demonstrates mouse tracking by rendering a single circle that follows the cursor across an SVG canvas. It uses React state and a `handleMouseMove` callback to capture the pointer’s `clientX` and `clientY` coordinates, updating the circle’s center position with each movement. The visualization renders with D3 v5 and React 16.9, drawing the circle using SVG elements with a white fill, black stroke, and fixed radius of 60 pixels.

Sep 22, 2019

Housing Values At Boston Suburbs

Sep 22, 2019

Vega-Lite US Maps With Capital Cities

This visualization displays a choropleth map of the United States, with each state colored according to a percentage value (pct01) representing ILI activity, alongside orange circles marking state capital cities with their names as labels. The map uses Vega-Lite’s geoshape mark with an AlbersUSA projection, loading state boundaries from TopoJSON. A layered specification combines the colored state shapes and the capital markers, while the data comes from a local TSV file. The code integrates Vega-Lite v4 beta, Vega, and Vega-Lite API for rendering and configuration.

Sep 19, 2019

ILINet Flu Surveillance Data

The visualization displays weekly influenza-like illness (ILI) totals across US regions from 2015 to 2019, with each year rendered as a colored line and point size encoding the same year. It uses the vega-lite-api to build a layered mark specification, with d3’s `csv` function fetching the raw CDC FluView data from a Gist. The chart is rendered via vega-lite and vega, with tooltips provided by vega-tooltip and visual styling customized through a shared config object.

ILINet Flu Surveillance Data

This visualization displays weekly influenza-like illness (ILI) totals across multiple years, with each year distinguished by color on a bar chart where the x-axis represents week number and the y-axis shows aggregated ILI counts. The view aggregates raw CDC ILINet data by year, region, and week before rendering. Built using the vega-lite-api library with D3.js for data loading, the chart applies a custom color scale ordered from 2019 back to 2015 and includes interactive tooltips via vega-tooltip. The underlying data originates from the CDC FluView Interactive surveillance system.

ILINet Flu Surveillance Data

This visualization shows ILINet flu surveillance data, plotting weekly ILI totals across multiple years with each year color-coded for comparison. It aggregates ILITOTAL values by year, region, and week, using bar marks to display the data. The code uses the vega-lite-api library to construct the chart, with d3.csv loading the data from a Gist-hosted CSV, and vega-tooltip providing interactive hover details. The visualization applies a custom config for improved label and title readability.

MRI and Alzheimers Data

This example loads two MRI datasets from the OASIS study using the Fetch API and `d3.csv`, then reports basic file statistics for each. It displays the filename, size in kilobytes, row count, and column count as plain text in a `<pre>` element. The visualization is minimal, focusing on data loading and validation rather than graphical rendering. Both cross-sectional and longitudinal CSV files are fetched asynchronously with `async/await`, and results are appended to the page via `textContent`.

Boston Housing Dataset Part II

This visualization explores the Boston Housing dataset by splitting it according to the `rad` variable (accessibility to highways), which clusters at values 1–8 or 24. Four scatterplots compare house price (`medv`) against `rad` and lower-status population percentage (`lstat`), with circle size encoding proximity to the Charles River (`chas`) and color indicating average room count (`rm`). Built with the `vega-lite-api` and rendered using Vega-Lite, the plots load CSV data from a Gist and are configured via a custom `config.js`. The author uses `vl.markPoint`, `vl.markSquare`, and `vl.markCircle` to distinguish the visualizations.

Boston Housing Dataset Part I

This visualization presents four scatter plots exploring relationships in the Boston Housing Dataset, focusing on median home value (medv) against variables like lower-status population percentage, pupil-teacher ratio, building age, and nitrous oxide concentration. The plots reveal correlations, such as the strong negative relationship between medv and lstat, while coloring points by additional attributes like indus or ptratio and sizing by the chas binary variable. Built with the vega-lite-api library and D3, the charts load CSV data from a GitHub Gist and render interactively with tooltips and a custom dark-themed configuration.

ILINet Flu Surveillance Data

This visualization plots ILINet flu surveillance data from the CDC, showing each state’s percentage of unweighted ILI visits by week of the year since 2015, with points colored by year and sized by total ILI patient count. The scatterplot reveals that larger patient counts cluster during flu season at year’s end, while smaller counts appear across all weeks. Built with the vega-lite-api on top of vega-lite and vega, it loads CSV data via d3.csv, encodes channels using vl.x, vl.y, vl.color, and vl.size, and applies tooltips showing the average total patients.