HOURPRIMERA@GMAIL.COM

Chart of Industries Sharks Invest In

This stacked bar chart shows the number of deals each Shark Tank investor has closed across 16 industries, allowing entrepreneurs to identify which Sharks align with their product category. The chart uses `d3.flatRollup` and `d3.stack` to structure the data, with `d3.scaleOrdinal` and `schemePastel1` for color encoding. Hovering over the legend highlights a selected Shark’s segments while fading others, using interactive event handlers that update the chart’s opacity and stroke. The data was manually derived from a Kaggle Shark Tank US dataset.

Fork of Outbreaks in United States

This choropleth map of the United States visualizes the distribution of disease outbreaks, with state shading representing the count of reported illnesses. The map displays land, graticules, and interiors using `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` projections. Data is sourced from the CDC’s National Outbreak Reporting System (NORS), aggregated by state to drive the linear color scale. The visualization is rendered in SVG, built with React, and uses TopoJSON for geographic boundaries.

Fork of Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example displays a U.S. map with circular indicators, initially showing population-based circles over state boundaries. It converts TopoJSON to GeoJSON using `feature` and `mesh` from `topojson`, while `d3.geoPath` renders the SVG shapes. React hooks manage asynchronous data loading from a CDN via `d3.json`. The visualization uses `d3.scaleLinear` and `d3.scaleSqrt` to size and color the circles, though the render function currently outputs an empty SVG.

Fork of Outbreaks in United States2

This choropleth map visualizes the distribution of disease outbreaks across the United States, with each state shaded according to the number of reported illnesses. The map uses a linear color scale ranging from white to pink, where darker shades indicate higher outbreak counts. Built with D3 v5 and React, the visualization uses `geoAlbers`, `geoPath`, and `geoGraticule` for geographic projections and rendering, while `topojson`'s feature and mesh functions process the US atlas data. The outbreak data comes from the CDC's National Outbreak Reporting System.

Fork of AQI Data in America by State

A choropleth of U.S. states shows the number of businesses per state from a CSV dataset, colored with d3.scaleSequential and d3.interpolateBlues. It renders a TopoJSON map using d3.geoPath, with each state colored according to the count from a d3.rollup aggregation. Hovering highlights a state’s name and count in a tooltip. The visualization uses React 16.9, D3 v5, and TopoJSON, with SVG and animated transitions.

May 8, 2024

Fork of Fork of AQI Data in America by State

A choropleth map of the United States colors each state by its average Air Quality Index (AQI) using a quantile color scale. Below the map, a brushable time-series histogram displays monthly AQI means, enabling users to filter the map’s data by date range. Built with React and D3 v5, it uses `geoAlbersUsa` and `geoPath` for the map projection and `scaleQuantile` for color encoding, with data loaded from a CSV. The brush applies a `brushX` interaction to adjust the histogram’s visible domain.

May 7, 2024

Fork of Choropleth

This fork of the choropleth example combines a geographic map with a scatter plot. It uses D3.js v6 to render two SVG elements side-by-side, with the map using `d3.geoEqualEarth` projection and `d3.geoPath` to draw country borders. The map is colored by urban rate, while the scatter plot shows life expectancy against GDP per capita, with point size encoding population and color distinguishing continents. The visualization includes an interactive tooltip that appears on hover, and data is loaded from external sources.

May 3, 2024

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot visualizes the relationship between birth rate, calling code, and infant mortality across countries using the world-data-2023 dataset. Each circle’s x-position maps to birth rate, its y-position to calling code, and its radius encodes infant mortality, colored uniformly in teal. Built with d3.v6, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft`, appending SVG circles via `d3.select` and `.join`. The data is loaded from a remote CSV using `d3.csv`, with hover events logging data to the console.

Fork of TemperatureReport Scatterplot

This reusable scatter plot visualizes the relationship between birth rate and life expectancy. It displays each data point as a circle, with the x-axis representing birth rate and the y-axis representing life expectancy. Data is loaded from a GitHub gist using `d3.csv`, and the plot is constructed with the D3.js v7 library. The visualization uses SVG rendering, with axes generated by `d3.axisBottom` and `d3.axisLeft`, while circles are appended using the standard `selectAll` and `data` methods.

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatter plot of country-level data from the world-data-2023.csv file, plotting life expectancy on the x-axis and birth rate on the y-axis. The visualization uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to parse the data, map the scales, and render SVG circles with color-coded markers. Despite a title referencing penguin species, the code actually maps each circle’s color based on a species field, while axis labels incorrectly reference flipper length and body mass, reflecting a mismatch between the intended and actual data display.

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each colored distinctly. The visualization is built with D3 v6 using the `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, rendering as SVG circles mapped from CSV data. The code creates axis labels and a title while loading data asynchronously via `d3.csv`. Mouseover events log data to the console, though no visible tooltip is implemented despite a placeholder div.

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each colored distinctly. The visualization is built with D3 v6 using the `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, rendering as SVG circles mapped from CSV data. The code creates axis labels and a title while loading data asynchronously via `d3.csv`. Mouseover events log data to the console, though no visible tooltip is implemented despite a placeholder div.

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each colored distinctly. The visualization is built with D3 v6 using the `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, rendering as SVG circles mapped from CSV data. The code creates axis labels and a title while loading data asynchronously via `d3.csv`. Mouseover events log data to the console, though no visible tooltip is implemented despite a placeholder div.

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each colored distinctly. The visualization is built with D3 v6 using the `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, rendering as SVG circles mapped from CSV data. The code creates axis labels and a title while loading data asynchronously via `d3.csv`. Mouseover events log data to the console, though no visible tooltip is implemented despite a placeholder div.

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes created with D3.js and vanilla JavaScript, rendering two circles and three rectangles of varying heights on a blank canvas. The code uses D3’s `select` to append the shapes to an SVG element, with an array `myData` supplying rectangle heights. It also queries all `rect` elements via `document.querySelectorAll` and attaches a click handler that logs a message to the console. The page is styled with CSS, including a large centered greeting and red circles.

Apr 29, 2024