007ebey

Fork of Lab 1: Line Chart

This line chart shows how carbon dioxide emissions have changed from 1990 to 2014 for three selected countries: the United States, Canada, and Spain. Each country is represented by a colored line, with an ordinal color scale distinguishing them, and the data is sourced from the UN Data service. The visualization is built using D3.js with an SVG rendering, incorporating interactive elements like a dropdown menu for selecting countries and a hover tooltip that displays detailed values. The chart dynamically updates its axes and scales based on the selected data, and the lines are animated when the selection changes.

Jun 26, 2021

India Map

This example displays a map of India with its states, rendered as an SVG using D3.js v5 and React. The map uses a Mercator projection and colors each state with a purple scale, with state names labeled at their centroids. The visualization relies on d3-geoPath and a TopoJSON file for state boundaries, with a zoom feature available but not activated in the code.

Mar 10, 2021

Moon PLOT

The Moon PLOT visualization arranges text labels for drink categories and consumption contexts in a circular layout, resembling a moon with orbiting text. Drink names vary in font size according to their proportional values, while context labels are placed at fixed radial positions. Built with D3 v6, the SVG renders text elements positioned using trigonometric calculations and rotated along the circle, with a linear scale mapping data values to font sizes and displacement.

Feb 25, 2021

Problems faced

This example shows a breakdown of problems faced during two application stages: confirmation and applying. It categorizes counts for specific issue types (registration, filing, upload, submission) and problem-solving methods (online, tracking, SMS, download) from a local JSON data file. The visualization processes this data using D3 version 6's `map` and `json` functions, aggregating counts for each stage, though no graphical output is rendered in the provided code.

Jan 11, 2021

Religions of Largest 20 Countries

This example shows the estimated 2010 religion breakdown of the 20 most populous countries, using a stacked bar chart where each bar represents a country’s population segmented by religious affiliation. Hovering over a bar displays a tooltip with the specific religion, country, and population count, while hovering over the color legend highlights that religion across all countries by dimming the other bars. The visualization is built with D3.js version 3.5.5, using `d3.layout.stack` for the stacked layout, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend. Data originates from the Pew Research Center’s Global Religious Landscape report.

Dec 23, 2020

Stylized Line Chart

This example visualizes weekly temperature readings from San Francisco using a smooth, stylized line chart. The chart plots temperature against time, with a teal curved line rendered through D3’s `line` and `curveNatural` generators, presented as React components in SVG. D3 scales (`scaleTime`, `scaleLinear`) map the data, while `timeFormat` labels the x-axis ticks. The visualization uses the CSV dataset from Data Canvas Sense Your City and includes labeled axes with custom tick styling from the `AxisBottom` and `AxisLeft` components.

Dec 23, 2020

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries based on 2019 United Nations World Population Prospects data. The visualization uses React with SVG rendering, employing d3.scaleBand and d3.scaleLinear to position bars and axes. Population values are formatted using d3.format with a custom tick formatter that converts values to billions. The chart features a clean design with Poppins typography, teal-colored bars, and tooltips that appear on hover showing each country's population.

Dec 23, 2020

Color and Size Legends

This example demonstrates two distinct legend designs for SVG visualizations: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to represent numeric values through circle radii. The color legend renders four labeled circles with custom spacing, while the size legend generates five ticks with varying circle sizes and text offsets. Both legends are built using D3 v5 data joins, scaleOrdinal, scaleSqrt, and explicit enter/merge/exit patterns, with styling applied through CSS classes on tick groups.

Dec 21, 2020

Pie Chart

This interactive pie chart displays fruit counts across five regions—East, West, North, South, and Central—loaded from a TSV file. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.nest` to aggregate data, with SVG paths and labels animated via `transition.attrTween`. A radio-button option component, rendered with D3 selections, lets viewers switch between fruit categories, redrawing the chart with a Tableau10 color scale.

Dec 9, 2020

React refactoring

This dashboard visualizes COVID-19 summary data from the covid19api.com API. Users load global totals or per-country figures, which are rendered as animated bar charts using D3 v5 scales, axes, and transitions within React components. The interface includes a navigation menu built with D3 selections, a country selector for filtering individual records, and SVG canvases for chart display. Data updates trigger React re-renders alongside D3 append and merge operations.

Dec 9, 2020

Lesson 3

This visualization displays a scatter plot of automobile data, plotting acceleration against weight for individual car models. The chart features labeled axes, gridlines, and a title, with data points rendered as semi-transparent steel-blue circles. Built with React and D3 v5, the code uses `scaleLinear`, `axisLeft`, and `axisBottom` from the D3 API to construct the plot, while data is loaded asynchronously from a CSV file hosted on VizHub. The visualization also demonstrates declarative SVG rendering and custom styling for a polished, client-ready appearance.

Nov 17, 2020

Word Cloud-3

This example displays a word cloud visualization using the d3.layout.cloud plugin, which arranges words from a TSV data file based on their frequency values. The code filters the dataset, maps each entry to a text-size pair, and uses the cloud layout with custom rotation, padding, and the Impact font. Words are rendered as SVG text elements with colors from a category20c scale, appearing animated as the layout algorithm places them across a 500×500 canvas area.

Oct 20, 2020

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates the general update pattern's special cases: adding, removing, and modifying items in a dataset. Apples and lemons are drawn as circles with corresponding colors and radii, positioned in a row within a rounded rectangle. Using d3.select, the code appends or removes groups via transitions, updating circle radii and fill colors with scaleOrdinal, and handles keyed filtering for deletion of a specific item.

Oct 5, 2020

React Starter

A React component hierarchy wraps D3-generated SVG axes and rectangles to render a horizontal bar chart from a hardcoded object of key-value pairs. The chart maps object keys to an ordinal y-axis via `d3.scaleBand` and values to a linear x-axis via `d3.scaleLinear`, with `d3.axisLeft` and `d3.axisBottom` for ticks. Bars are drawn as SVG `rect` elements that change fill color on click. The code imports `d3` v5 and uses React refs to attach D3 selections within `componentDidMount` and `componentDidUpdate` lifecycle methods.

Sep 7, 2020

React refactoring

This example presents a COVID-19 dashboard built with React and D3 that fetches summary data from the covid19api.com API. Users load global or per-country statistics, which render as animated bar charts comparing new and total confirmed cases, deaths, and recoveries. The interface includes a navigation bar and country selector, both populated dynamically using D3 selections. Charts are drawn with D3 scales and axes, while React components manage state and lifecycle, with the d3.axisBottom, d3.axisLeft, and transition methods handling axis rendering and bar animations.

Sep 3, 2020

Zoomable packing celeb

This zoomable circle-packing visualization displays celebrity samples grouped by industry (Hollywood or Bollywood) and gender, with circle size reflecting sample count. The React-based app loads `celeb.csv`, nests data using `d3.nest`, and renders an SVG hierarchy with `d3.pack` and `d3.hierarchy`. Clicking any circle smoothly zooms via `d3.interpolateZoom` and `transition.attrTween`, scaling radii and repositioning nodes. Leaf nodes display celebrity photos as clipped images with offsets, while parent labels shift dynamically. Colors use `scaleSequential` with `interpolateMagma`, and the layout updates through `componentDidUpdate` in the React class component.

Sep 2, 2020

Zoomable test 2

This interactive visualization displays a zoomable circular treemap of celebrities, organized by industry category (Hollywood, Bollywood) and gender. The hierarchy is constructed from a CSV file using `d3.csv` and `d3.nest`, with circles sized according to the `sample` metric. Rendered as SVG with React, the pack layout uses `d3.pack` and `d3.hierarchy` to position the circles. Users click circles to zoom, which triggers a smooth animated transition using `transition.tween` with `d3.interpolateZoom`. Leaf nodes include celebrity profile images clipped within their circles, with offsets applied to center faces.

Aug 27, 2020

Zoomable test 1

This interactive visualization displays a hierarchically organized bubble chart of celebrities grouped by category and gender. Clicking any circle zooms into that node's subtree with a smooth animated transition. Built with React and D3 v5, it uses the `d3.pack` layout to position circles and `hierarchy().sum()` to encode the `sample` data value as bubble area. Celebrity portraits are clipped into circular frames using SVG `clipPath` elements, with zoom animations driven by `d3.interpolateZoom` and `transition.attrTween`.

Aug 27, 2020

React Starter PAck backup 3

This interactive treemap visualizes celebrity data using bubble packing, where each circle represents a celebrity with size proportional to their sample value. The visualization, built with React and D3 v5, uses a hierarchical layout that groups celebrities by category and gender, with color encoding based on hierarchy depth. Users can click circles to zoom into sub-hierarchies through animated transitions, and hover effects highlight individual circles. The SVG-based rendering includes circular clip paths displaying celebrity images from external URLs, and the implementation uses D3's pack, hierarchy, nest, scaleOrdinal, and interpolateMagma APIs.

Aug 27, 2020

React Starter PAck backup 2

This example shows a static "Hello React!" message, rendering text in a large, centered font. The application is built with React and uses the D3.js library, loading celebrity data from a CSV file. The code fetches the CSV and processes the data using D3's `csv` and `nest` functions, aiming to create a hierarchical tree structure. However, the processed data is not displayed or used in the current rendering, as the render method solely outputs the text message. The interface relies on the React DOM and imports `csv` and `nest` from D3.

React Starter PAck backup

This example displays a static “Hello React!” message in large centered text, with the celebrity CSV data processed but not yet visualized. The application loads celebrity records using D3’s `csv` function and attempts to nest them hierarchically by category and gender via `d3.nest`. The nested structure is recursively renamed to produce a tree-like object, though the result is only logged to the console. React renders the message as the sole visible output, with D3 v5 and React 16 handled through CDN scripts and a bundled `bundle.js`.

React Starter

This example renders a simple “Hello React!” message, demonstrating a React application that integrates D3.js for data processing. The code defines a React class that uses D3’s `csv` function to load a local `celeb.csv` file and then applies D3’s `nest` function to hierarchically group the celebrity data by `category` and `gender`. The nested structure is recursively renamed into a tree format, but the visualization itself is not displayed; instead, the processed data is logged to the console. The app uses React 16.13.1, ReactDOM, and D3 v5.15.0.

React Starter

This example demonstrates a React-based data visualization that loads a CSV file of celebrities and organizes the entries into a hierarchical structure by category and gender. The code uses `d3.csv` to parse the data and `d3.nest` to group records hierarchically, transforming the result into a tree-like JSON object. React components render the visualization, with an SVG container displaying a placeholder text message. The visualization currently shows a static "Hello Pack" text rather than a chart, highlighting the integration setup between React and D3 utilities.

Circles pack

A circle packing diagram displays a hierarchical dataset of celebrities, grouped first by category (Bollywood or TV) and then by gender, with each celebrity represented as a circle sized by their sample value. The visualization uses a `d3.pack` layout on a React component, computing a hierarchy via `d3.hierarchy` and `d3.nest` from a CSV file. Leaf nodes render celebrity photos clipped by their circle boundaries, while branch circles scale with the aggregate values and respond to mouseover events with a stroke highlight. The color scale uses `d3.scaleSequential` with the `interpolateMagma` scheme.

HTML Starter

This example demonstrates a deliberately minimal HTML page that renders the text “Hello HTML” in large, centered type. It serves as a basic starting point for web projects, showing how to structure a document with inline CSS styling and a script tag. The page uses the browser’s default rendering engine, with a `console.log` statement that outputs “Hello JavaScript!” to the developer tools. It includes a link to a React-based starter for comparison, and a separate `flare.json` data file is present but not utilized by the page’s code.

Aug 20, 2020

React Starter

A React-based dashboard renders COVID-19 summary data from the covid19api.com REST endpoint. It displays global and per-country metrics as animated SVG bar charts, with the D3 v5 library handling chart construction—using `scaleBand` for categorical axes, `scaleLinear` for quantitative values, and `transition` for bar width animations. The interface uses Materialize CSS components, featuring a navigation bar for switching between views and country select dropdowns. Data updates occur through button clicks that refetch and re-render the visualizations.

Aug 19, 2020

Lesson 3

This visualization presents a horizontal bar chart comparing population data across several countries, sourced from the World Bank. The chart displays both X and Y axes with clear labels, a chart title, and bars colored in steelblue. The code uses `d3.csv` to load the data, along with `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` to render the axes. SVG rendering is handled within a React framework.

Lesson 2

A horizontal bar chart displays population estimates for a small set of countries, using data from the World Bank. The visualization renders as an SVG, with a linear scale mapping population values to bar widths and a band scale positioning each country along the vertical axis. Built with React and D3 v5, the code imports `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load and draw the chart. Axis labels and axis tick formatting are generated through D3’s axis components.

World Map Edit

This interactive world map visualizes country-specific news availability by coloring select countries brown and others light green, with clickable links to external news articles for India, Brazil, and Canada. Using D3 v5 and TopoJSON, it loads world-atlas data and renders countries with `d3.geoPath` and a natural Earth projection. Hover effects change country colors, and tooltips display country names with a note when news links are unavailable. The code employs `Promise.all` to load TSV and JSON data simultaneously and `d3.select` to manage SVG elements.

World Map

This world map visualizes country data with interactive links, coloring select nations (India, Brazil, Canada) in a highlighted green while others appear brown. Hovering changes fill colors, and clicking a highlighted country opens a related news URL, while non-highlighted countries show a “news not available” tooltip. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render SVG paths from TopoJSON world-atlas data, with country names mapped via TSV data. Links and hover styling are applied through D3 selections and CSS classes.

Lesson 4: Design Pattern

This example demonstrates a data visualization design pattern using React and D3 v5, showing animated transitions of fruit shapes within a bowl. It displays how SVG elements update when data changes, with apples transforming into lemons and fruits being removed. The code uses `scaleOrdinal` and `scaleLinear` for sizing and positioning, while `selection.join()` and `transition` methods animate the changes. Population data from the World Bank is referenced, though the visualization focuses on the state management and rendering pattern for dynamic datasets.

Aug 7, 2020

Lesson 4: Design Pattern

This example demonstrates the design pattern of using a single SVG element to render and update a data-driven visualization with animated transitions. It shows a bowl of fruit, represented by colored circles, where an apple is converted to a lemon and a fruit is removed over time, illustrating how D3’s data join, along with `selection.enter()` and `selection.exit()`, manages dynamic updates. The code uses `d3.scaleOrdinal` and `d3.scaleLinear` to map fruit types to sizes and positions, and leverages `transition().delay()` for animated attribute changes. The visualization is built with D3 v5 within a React framework, rendering to SVG with a population dataset from the World Bank.

Aug 5, 2020

Angry Emoji

A smiley face drawn with D3.js shifts its expression to anger as its eyebrows animate downward, using a bouncing transition sequence. The SVG graphic features a red circle, two eyes, thick black eyebrow lines, and a curved mouth, all positioned with computed transforms. The code imports `select` and `arc` from D3 v5, though the mouth is actually a custom path, and animates the eyebrow group's vertical position with chained `transition().duration()` calls. The background is styled via inline SVG attributes and a separate CSS file.

Aug 5, 2020

Analyst Job Salaries from Glass Door

This visualization displays the salary ranges of data analyst job listings scraped from Glassdoor, with each bar representing a specific salary range and its corresponding number of job postings. The chart uses a horizontal bar layout to accommodate the many salary categories, with the y-axis listing salary ranges and the x-axis showing the count of jobs. Built with D3 v5, the code utilizes `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG-based bar chart, styling the bars with a steelblue fill and custom tick text sizing.

Aug 4, 2020

Lesson 4: Unidirectional Data Flow

This example demonstrates a unidirectional data flow pattern in React, where a fruit bowl visualization updates in response to state changes. A row of apples and lemons animates as fruits are added, removed, or transformed, with mouse hover actions triggering visual outlines. The code uses D3 v5 for SVG rendering, including transitions, scales, and selection joins, within a React framework. Data is generated programmatically, not from the provided CSV, and animations occur on timed intervals.

Aug 3, 2020

Corona Virus Status

This visualization uses a stacked area chart to display the daily confirmed, recovered, and death case counts from the COVID-19 pandemic in India over a specific time period. Built with D3 v5 and React, the chart’s SVG rendering maps dates to the x-axis and case counts to the y-axis. The code processes `covid.json` data and uses D3’s `stack`, `area`, `curveBasis`, and `areaLabel` APIs to construct and label the stacked areas, with a color scale from `d3.schemeDark2`.

Apr 28, 2020

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, breaking down contributions from gas, liquids, solids, cement production, and gas flaring. It uses an SVG rendering with d3.v4’s `d3.stack`, `d3.area`, and `d3.scaleTime` to construct the layers, with labels positioned by the `d3-area-label` library. The color scale employs `d3.scaleOrdinal` with `d3.schemeDark2`, and hovering a region turns it black. Data comes from a CSV of annual emission gigatons, with axes labeled accordingly.

Apr 28, 2020

Corona Virus Status

This visualization displays the progression of confirmed, recovered, and death cases from COVID-19 in India over time, using a stacked area chart built with React and D3 v5. The data is fetched live from the COVID19 API for each status category and processed into a stacked layout using `d3.stack()`. The chart uses `scaleTime` and `scaleLinear` for axes, with SVG rendering and zoom functionality, though the primary visualization focuses on the temporal trends of case counts.

Lesson 3

This example uses D3 v5 within a React framework to render a bar chart as an SVG, displaying population data from the World Bank for selected countries. The chart encodes population values with bar heights. The code loads data from a CSV file and uses D3’s selection and scaling APIs to map the data to the chart’s coordinates. The SVG is styled with CSS rules from an external stylesheet, defining colors for bars, text, and axis elements. The visualization demonstrates how to transition from a raw data source to a clean, client-ready presentation.

Latest Corona Virus Map

This map visualizes global data with a focus on India, using a natural Earth projection rendered as SVG paths. It loads world country boundaries from the World Atlas TopoJSON and India’s state boundaries from a separate TopoJSON source, while also fetching live COVID-19 confirmed case data from the covid19api.com dayone endpoint. The visualization supports zooming and panning via d3.zoom, with hover effects that highlight countries. However, the COVID-19 data is fetched but not yet integrated into the map’s visual encoding, leaving the choropleth coloring unimplemented.

Circles on a Map

This interactive map visualizes global population by country in 2018, using circles whose area scales with population size. Users can pan, zoom, and hover over countries to see population details or a missing-data note. The visualization uses D3 v5, with `d3.geoPath` and the Natural Earth projection to render country outlines, while `d3.scaleSqrt` maps population to circle radii. Interactive zoom is handled via the `d3.zoom` module, and a custom size legend provides scale reference. Data comes from a UN population CSV merged with TopoJSON world atlas geometry.

Maps Started

This interactive map of the world renders countries as green SVG paths with hover highlighting in red. It loads GeoJSON from the world-atlas TopoJSON dataset and country names from a TSV file, then joins them by ISO numeric code to display each country’s economy type as a tooltip on hover. The map uses the `geoNaturalEarth2` projection and `geoPath` from d3-geo-projection, and supports pan and zoom through d3’s `zoom` behavior applied to the SVG group.

Apr 10, 2020

Lesson 4: Design Pattern

This example demonstrates a reusable color legend design pattern using React and D3 v5. It displays a vertical color scale with circular swatches and labels, generated through a custom `legends` function that uses `scaleOrdinal` and `range` for positioning. The visualization also includes an animated fruit bowl component defined in `makeFruit.js`, though it is not fully integrated into the main view. The code references population data from the World Bank and renders SVG elements with smooth transitions.

Apr 10, 2020

Hotel Reservation Tree

This visualization shows the total lead time for each reserved room type across Resort hotels worldwide, organized hierarchically by hotel and country. The data comes from a World Bank CSV file and is processed using D3 v5’s `nest` and `tree` functions to build a stratified tree layout. Each leaf node is a colored circle, where color maps the aggregate lead-time value via `scaleLinear` from green to red, and horizontal links are drawn with `linkHorizontal`. Text labels display hotel, country, and room type names, with font sizes adjusted by depth. The SVG canvas supports interactive zooming through the `zoom` event.

Apr 8, 2020

World Countries Tree

This visualization displays a hierarchical tree of uranium mining operations, mapping corporate ownership through operation types, mines, and facilities as a branching structure. The tree layout presents each node as a labeled text element connected by horizontal link paths, with font sizes scaling by depth level. The interactive view supports pan and zoom controls using d3.zoom with event transforms. Data is loaded from a JSON file and processed through d3.hierarchy and d3.tree functions. The SVG rendering uses d3.linkHorizontal for curved path connections and includes a Playfair Display font styling for all labels.

Mar 13, 2020