Andres de la Garza

Mexico Region Map w/ Menu ( D3 & React & TopoJSON )

This example shows a choropleth-style map of Mexico’s twelve regions rendered with D3 and React, using a dropdown menu to select a region. TopoJSON data from ArcGIS is loaded via d3.json, converted to GeoJSON with topojson.feature, and drawn as SVG paths using d3.geoPath with a Mercator projection. The map includes graticules and white state boundaries, with the selection state tracked in React and passed to the Dropdown component.

Jul 9, 2021

Scatter Plot With Menus v1

This interactive scatter plot displays the Iris flower dataset, plotting petal length against sepal width by default. Users can change the X and Y axes from dropdown menus to explore relationships among four numeric attributes, with species shown as categorical labels. The React application uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and renders SVG circles with axis components built from reusable React functions. Tooltips appear on hover using SVG title elements. Data comes from a remote CSV file containing measurements of Iris flowers.

Jul 9, 2021

Mexico States with Menu pass1

This example presents a map of Mexican states. A dropdown menu allows users to select a state, although the map itself does not reflect the selection. The visualization uses d3.geoPath with a Mercator projection to render state boundaries, interior borders, and graticules from a TopoJSON file. A separate CSV dataset provides waste data, but it is not currently linked to the map's visual styling. The SVG output is generated with React components.

Jul 8, 2021

Fork of Mexico Region Map ( D3 & React & TopoJSON )

This interactive map visualizes the twelve administrative regions of Mexico. Using a Mercator projection centered on the country, the map displays regional boundaries with white outlines over a green fill on a light-gray graticule background. Built with React and D3 v6, the visualization relies on `d3.geoPath` and `d3.geoMercator` for geographic projections. Regional data is sourced from ArcGIS, converted to TopoJSON via Mapshaper, and fetched from a GitHub Gist using `d3.json` and TopoJSON's `feature` function, with SVG rendering for the output.

Jul 8, 2021

Mexico Region Map ( D3 & React & TopoJSON )

This example displays a map of Mexico rendered as a single-color choropleth, with state boundaries outlined and a graticule overlay. The visualization uses a Mercator projection via `d3.geoMercator` with the map centered on the country. The geographic data is loaded from a TopoJSON file fetched with `d3.json` and converted to GeoJSON using `topojson.feature`, with the shapes drawn by `d3.geoPath`. The implementation is built with React, managing the asynchronous data fetching through a custom hook and rendering the SVG marks as React components.

Jul 7, 2021

DONT EDIT mexico Waste 2018 Choropleth (Starter) Map

This choropleth map displays waste generation in kilograms across Mexican states for 2018, with each state shaded according to its waste data value. The visualization uses a Mercator projection via `d3.geoMercator` and renders state boundaries and interiors with `d3.geoPath` and topojson mesh data. Geographic data comes from ArcGIS and is processed through mapshaper, while waste statistics are loaded from a CSV file. React manages the component lifecycle, with d3 v6 handling geographic projections and path generation for the SVG-based map.

Jul 3, 2021

Mexcio Regions Pass 2

This example displays a choropleth map of Mexico using a Mercator projection, coloring states by waste data from a CSV file. The visualization relies on `d3.geoMercator` and `d3.geoPath` to render state boundaries and graticules from TopoJSON data sourced from ArcGIS. React manages the component state, while `d3.csv` loads the waste kilograms per state, with missing data handled via a gray fill. The SVG output includes interactive tooltip hooks for potential mouseover events.

Jul 3, 2021

Fork of Mexico (Starter) Map

This map of Mexico displays state boundaries using a gray fill for each state and lighter gray graticules, with a fixed Mercator projection. The visualization uses React to render an SVG, with D3’s `geoMercator`, `geoPath`, and `geoGraticule` for geographic projections and outlines. TopoJSON data from ArcGIS is processed via `feature` and `mesh` to generate state polygons and interior borders. The map is a starter template, with a color scale and waste data prepared but not yet applied to the marks.

Jul 3, 2021

Cororona Virus Line Chart

This chart displays the global death toll from COVID-19 over time, using a line chart that currently renders as an empty red SVG canvas. The visualization pulls time-series data from the CSSE at Johns Hopkins University via a CSV file, processed with d3’s `csv` loader. The React component structure uses `useData` to fetch the dataset, while the SVG is sized to the full browser window. The code is built with React 16.9, D3 v6, and renders through the `svg` element, though no lines are actually plotted yet.

Apr 7, 2021

Loading and Parsing Coronavirus Data

This example displays the total number of COVID-19 deaths worldwide as a large text message, using a comma-formatted number and the most recent date from the dataset. It loads a time-series CSV file from the CSSE at Johns Hopkins, parsing it with `d3.csv` and summarizing the latest column with a `reduce` function. The code uses D3 v6’s `format` for number localization and React to update the message container via `getElementById`. The visualization renders as plain SVG-free text, highlighting the data-loading and parsing workflow rather than a chart.

Apr 7, 2021

Fork of Fork of Mexico Waste 2018 Choropleth Map

A choropleth map of Mexico displays waste generation in kilograms per state for 2018, with a sequential yellow-orange-red color scale. The map is rendered using an SVG projection via the `d3.geoMercator` and `d3.geoPath` APIs, using state boundaries from a TopoJSON file. Graticules are drawn with `d3.geoGraticule`. State waste data is loaded from a remote CSV and mapped to colors using `d3.scaleSequential`. The visualization is built with a React framework and uses the `topojson` library for geographic feature extraction.

Apr 7, 2021

Fork of AIDS distribution Choropleth

This choropleth displays the distribution of HIV/AIDS prevalence among adults aged 15–49 for the year 2017, using a sequential yellow-orange-red color scale to encode infection rates across countries. The map renders with the Natural Earth projection through `d3.geoNaturalEarth1` and `d3.geoPath`, including graticules and interior boundaries. Data comes from an IHME CSV file, joined to country shapes via ISO codes. Missing values appear in gray, while React manages the component state and SVG rendering.

AIDS distribution Choropleth

This choropleth maps the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, using a yellow-to-red sequential color scale to show infection rates across countries. It renders a Natural Earth projection of world countries and graticules via d3.geoPath, with missing data colored gray. The visualization is built in React, uses D3 v6 for data loading and scaleSequential with interpolateYlOrRd, and sources HIV prevalence data from an IHME CSV alongside country codes from an ISO-3166 dataset.

Bubble Migrant Death Data (Log Scale)

This chart plots migrant deaths and disappearances over time, with the y-axis on a logarithmic scale to handle a wide range of values. The visualization uses D3 v6’s `scaleTime` and `scaleLog` to map the date and casualty counts, rendering each incident as a small circle in an SVG. Data comes from a CSV subset of the Missing Migrants Project, loaded via D3’s `csv` function. React manages the component state, while custom `AxisBottom`, `AxisLeft`, and `Marks` components handle the axes and circle glyphs.

Fork of Migrants Multi View w/ Brushing (Performance Optimized)

This visualization combines a world map of migrant deaths with a linked time-series histogram. A brush on the histogram filters the map’s circles by date range. The map uses a D3 natural Earth projection with clipped graticules, while the histogram bins monthly totals. React manages state, and D3’s `brushX` and `scaleSqrt` drive the interaction and circle sizing. Data comes from a CSV of global missing migrant incidents.

Mexico Waste 2018 Choropleth Pass4

This choropleth displays municipal solid waste generation across Mexican states for 2018, using a viridis sequential color scale to encode kilograms of waste with a blue fill for missing data. The visualization renders geographic boundaries via d3.geoPath with a geoMercator projection, driven by TopoJSON state geometries from ArcGIS data. React manages the component lifecycle, while d3.csv loads the waste dataset and d3.scaleSequential handles color mapping, with an accompanying linear gradient legend documenting the scale in kilograms.

Mar 27, 2021

Fork of Pollution in US with counties by React and d3

This interactive choropleth map visualizes PM2.5 concentration levels across US counties from 2000 to 2018. A vertical slider and play button animate through time, updating the color-coded counties using React’s state management. The SVG map uses `d3.geoPath` with `geoIdentity` projection for county and state boundaries from the us-atlas TopoJSON. Data from a CSV file is filtered by year, and the sequential YlGnBu color scale is applied via `d3.scaleSequential` and `d3.interpolateYlGnBu`. Hovering reveals county and state names with pollution values via tooltips.

Mar 26, 2021

Fork of Choroplath Map with Interactive Filtering

This interactive choropleth map colors countries by economic classification using a categorical color scale and topojson data from the World Atlas. Users click the color legend to filter the map, which dims non-matching countries and highlights the selected category via the `onClick` handler. Pan and zoom are enabled with `d3.zoom` and `d3.geoNaturalEarth1` projection for the SVG paths. The legend and map communicate through a shared `selectedColorValue` state, with opacity transitions driven by the color scale.

Mar 26, 2021

Mexico Waste 2018 Choropleth Pass3

This choropleth maps municipal solid waste generation across Mexican states for 2018, with each state filled according to its total waste in kilograms using a viridis sequential color scale. Missing data appears in blue, while graticules and state interiors are drawn as SVG paths. The visualization uses d3.geoMercator and d3.geoPath for geographic projection, with TopoJSON data from arcgis.com converted via mapshaper. React manages state and lifecycle, loading CSV waste data and zone metadata through d3.csv.

Mar 25, 2021

Mexico Waste Data 2018 - Choropleth

This interactive SVG bar chart displays the total weight of waste in kilograms for each month of 2018, using data from a remote CSV file. Built with React and D3 v6, it processes the time-series data by binning monthly values and scaling the y-axis. The visualization uses SVG rendering with axis components and interactive tooltips, providing a clear view of monthly waste trends throughout the year.

Mar 25, 2021

Fork of Mexico Waste 2018 Choropleth Pass2

This choropleth maps municipal solid waste generation across Mexican states using a Mercator projection, with a sequential viridis color scale encoding waste kilograms from a 2018 dataset. The visualization renders geographic boundaries and graticules via `d3.geoPath` and `d3.geoGraticule`, while React manages state and data loading through custom hooks. State geometries come from TopoJSON processed with `topojson.feature` and `topojson.mesh`, and the color encoding uses `d3.scaleSequential` with `d3.interpolateViridis`. Missing regions appear blue, and CSV data is fetched and parsed with `d3.csv`.

Mar 25, 2021

Mexico Waste 2018 Choropleth Pass1

This choropleth displays waste generation across Mexican states for 2018, with each state colored according to its WasteKgs value using a sequential YlOrRd scale, though missing data is currently rendered as uniform gray. The visualization loads state boundaries from a TopoJSON file via d3.json and converts them to GeoJSON using topojson.feature, while a mesh outlines internal borders. React manages the data-fetching hooks and SVG rendering, with d3.geoMercator projection and d3.geoPath drawing the geographic shapes and graticule grid.

Fork of Mexico Map ( D3 & React )

This example renders a choropleth-style map of Mexico’s states using a Mercator projection implemented with `d3.geoMercator` and `d3.geoPath`. The SVG marks are drawn from TopoJSON data loaded via `d3.json` and converted with `topojson.feature`, with graticules displayed as background paths. Built as a React component, the visualization fetches state boundaries from a public gist of arcgis.com data, processed with mapshaper. The current center coordinates are set, but the README notes the map still needs alignment on the rendered image.

Fork of Mexico Waste 2018 Choropleth Map

This choropleth map visualizes waste generation across Mexican states for 2018, using color intensity to represent WasteKgs values from a CSV dataset. The map renders state boundaries and graticules using `d3.geoPath` with a Mercator projection, while the topojson geometry is loaded from a gist. React manages state for both the geographic and waste datasets, with a sequential color scale displaying the data, though color values are not currently applied to map paths in the visible code.

Mexico Waste 2018 Choropleth Map

This choropleth map visualizes waste generation (in kilograms) across Mexican states for 2018, using a sequential color scale to encode values. The geographic data comes from ArcGIS via a TopoJSON file processed with TopoJSON’s `feature` and `mesh` APIs, while waste data is loaded from a CSV using `d3.csv`. The map uses a Mercator projection with `d3.geoMercator` and renders paths via `d3.geoPath`. Built in React with D3 v6, it includes an SVG render and a graticule layer for spatial reference.

Mexico Waste Data 2018 (Log Scale/binned)

This example shows monthly household waste totals in Mexico for 2018, binned by month and displayed as a bar chart with a log-scaled y-axis. The visualization aggregates raw date-stamped waste records into a histogram using D3’s `bin` and `sum` functions, then renders the resulting bins as SVG rectangles via React. The x-axis uses a time scale (`scaleTime`) with formatted month-day-year ticks, while the y-axis uses a linear scale (`scaleLinear`) displaying kilo values. The code builds custom `AxisBottom` and `AxisLeft` components and includes a native SVG `<title>` tooltip on each bar. Data is loaded as CSV through D3’s `csv` method.

Mexico Waste Data (Log Scale)

A scatter plot displays monthly waste measurements in kilograms across a year, with a logarithmic y-axis to accommodate the wide range of values. The x-axis uses a time scale with ISO 8601 date formatting. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLog`, with SVG circles representing data points. The data is loaded via `d3.csv` from a GitHub gist, and both axes are rendered using custom React components.

Bubble Migrant Death Data

This visualization plots the number of migrant deaths and disappearances over time, using a logarithmic y-scale to accommodate the wide range of reported totals. Each circle represents an individual report, with its position determined by the reported date on the x-axis and the total dead and missing on the y-axis. The chart is built with React and D3 v6, using `scaleTime`, `scaleLog`, and `extent` for scales and domains, and renders as SVG with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Data comes from a CSV of Missing Migrants Global records, loaded via `d3.csv`.

Mar 23, 2021

Migrants Multi View w/ Brushing (Performance Optimized)

This interactive visualization combines a bubble map of migrant deaths with a time-series histogram, linked through brushing. Dragging across the histogram filters the map to show incidents within the selected date range. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render world landmasses, while circle size encodes the total dead and missing via `d3.scaleSqrt`. The histogram bins data monthly using `d3.histogram` and `d3.timeMonths`, with a `d3.brushX` for interactive filtering. All rendering uses SVG within a React framework, with performance optimized through `useMemo` and `d3.v5`.

Mar 23, 2021

Migrants Multi View w/ Brushing

This visualization shows a map of missing migrants alongside a time-series histogram, with interactive brushing to filter data across both views. Geographic coordinates are plotted as bubbles on a natural Earth projection using `d3.geoNaturalEarth1` and `d3.geoPath`, sized by the square-root scale of the total dead and missing count. A lower date histogram, built with `d3.bin` and `d3.timeMonths`, uses `d3.brushX` to select a temporal range, which dynamically filters the rendered circles on the map. The React-sourced data comes from a CSV of Missing Migrants Global records rendered as SVG.

Mar 23, 2021

Missing Migrants Multi View

This visualization combines a bubble map and a time-series bar chart to display the global distribution and monthly totals of missing migrants. The map uses a natural Earth projection with `d3.geoPath` and circle sizes scaled by the square root of deaths, while the histogram bins reported dates by month using `d3.bin` and `d3.timeMonths`. Both views are rendered with SVG in React, sharing the same dataset loaded via `d3.csv`.

Time - Migrant Death Data

This example shows the number of missing migrants over time as a histogram, with monthly bins of reported dates on the x-axis and the total dead and missing on the y-axis. It uses d3’s `scaleTime`, `timeMonths`, and `histogram` to bin the data, and React components render SVG axes and marks. The dataset is loaded via d3.csv from a GitHub gist, and tooltips display exact counts on hover.

Mexico Map ( D3 & React )

This example displays a map of Mexico with its state boundaries, rendered as SVG paths using a Mercator projection. The visualization loads GeoJSON data from a gist, which was originally sourced from ArcGIS and processed with Mapshaper to extract state polygons. Using D3 v6 within a React component, the code applies `geoMercator` for projection and `geoPath` to generate the path data for each state feature. The map is centered on Mexico using coordinates [-102, 24], and the styling fills the states with a teal color while using light gray strokes for borders, with fonts sourced from Google's Poppins family.

Missing Mexico Migrants

This visualization maps the locations of missing migrants in Mexico, with circle size proportional to the total number of dead and missing individuals. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country borders. Data points are plotted as semi-transparent circles using a square-root scale (`scaleSqrt`) to encode magnitude. The React component fetches CSV data through `useData` and world atlas TopoJSON through `useWorldAtlas`, rendering everything as SVG elements.

Points On a Map

This visualization displays a world map with cities rendered as circles, where the radius of each circle is proportional to the city's population using a square-root scale. The map uses an equal-area natural Earth projection with graticules and land masses drawn via `d3.geoPath`, while city coordinates are projected through the same projection. City population data comes from a CSV file, and the visualization is built with React and D3 v6, rendering all elements as SVG.

Mar 21, 2021

Interactive Color & Legend - Iris Flower Scatter Plot -

This interactive scatter plot visualizes the Iris flower dataset, encoding sepal length and width on the x and y axes while color-coding points by species. Hovering over a legend item highlights the corresponding species by fading other points to 20% opacity. Built with React and D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scales, with custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` components rendering SVG circles.

Mar 21, 2021

Fork of Scatter Plot - Iris Flower - Color & Legend

This scatter plot visualizes the Iris flower dataset, showing sepal length against sepal width with each species distinguished by color. A legend on the right maps the three species to their respective hues, while axes display the quantitative measurements. Built with React and D3 v6, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` for the color mapping, and renders SVG circles. The data is loaded asynchronously via `csv()` from a remote URL, with custom axis and legend components generated through D3 tick functions.

Mar 20, 2021

Scatter Plot - Iris Flower - Color

This scatter plot displays the Iris Flower dataset, showing the relationship between sepal length and sepal width for three iris species. Each species is distinguished by a distinct color, making the clustering patterns and separation between species immediately visible. The visualization is built with React and D3 v6, using `scaleLinear` for both axes, `scaleOrdinal` for the categorical color encoding, and SVG circles rendered via the `Marks` component. The data is loaded asynchronously from a CSV file using D3's `csv` function, with axes and labels generated by custom React components.

Mar 20, 2021

Fork of Scatter Plot With Menus v1 (Mexico Data)

This interactive scatter plot visualizes Mexican waste data, allowing users to explore relationships between Month, Zona, and WasteKgs. Built with React and D3 v6, it renders circles as SVG marks within a Cartesian coordinate system. The chart features two dropdown menus that dynamically update the x and y axes, with tick marks and labels generated by the custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file using D3's `csv` function, and scales are computed with `scaleLinear` and `extent`.

Mar 12, 2021

Scatter Plot With Menus v2

This interactive scatter plot displays the Iris dataset, allowing users to select which attribute to map to the x- and y-axes via two dropdown menus. The visualization is built with React and renders SVG circles using D3 scales and axes, with a tooltip on each point showing its value. Data is loaded via D3’s `csv` function, and the selections update the state to re-render the plot with the chosen attributes.

Menu Work

This example demonstrates a dropdown menu for selecting a pet. The interface displays a "Choose a pet" label and a select element populated with six pet options, defaulting to 'hamster'. The selected value is logged to the console and updates the dropdown's state. It uses React with the `useState` hook and a custom `Dropdown` component that accepts options, a selected value, and a change handler, rendering the native HTML select element. The app is mounted to the DOM using `ReactDOM.render`.

React Starter

This example displays a simple “Hello React!” message centered on the page using a large, bold font. It demonstrates a minimal React setup by importing React and ReactDOM, defining a functional component that returns a JSX div, and rendering that component into the root element. The page loads React and ReactDOM from CDN links in the HTML, while the application logic resides in a separate bundle. Styling is applied via a CSS class defined in the document’s head, and the message scales with a 13em font size.

React Starter

A React-based web page displays a pet-selection dropdown. The interface uses React's `useState` hook to manage and log the currently selected option, with a custom `Dropdown` component handling the native `<select>` element. The list of pets, including dog, cat, hamster, parrot, and goldfish, is defined in `index.js`, and the selection updates the label via ReactDOM's `render` on the root element. The page loads React and ReactDOM from unpkg, with styling applied through a separate stylesheet.

World Map D3 & React

This example displays a world map using a Natural Earth projection, rendering landmasses, graticules, country interiors, and a sphere outline. It uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` within a React component, loading geographic data via `json` and processing it with TopoJSON’s `feature` and `mesh` methods. The map is drawn as SVG paths, with data sourced from the world-atlas TopoJSON dataset.

Line chart with Time Series

This line chart visualizes temperature readings over time, using a smooth natural curve to connect data points from a CSV dataset of weekly San Francisco temperatures. The chart displays time on the x-axis using `d3.scaleTime` with weekday tick labels formatted via `timeFormat`, while temperature values are plotted on a linear y-axis. Built with React and rendered as SVG, the visualization leverages d3 v6 functions including `extent`, `line`, and `curveNatural` for the path generation, with axes constructed through reusable React components.

Scatter Plot with Time Series

A scatter plot displays temperature readings against timestamps from a San Francisco weekly weather dataset, using circular marks positioned by time and linear temperature scales. Built with React and D3 v6, the visualization renders as SVG with reusable axis components and tooltips showing formatted day labels. Data loads via CSV from a remote gist, with `scaleTime` and `scaleLinear` handling the mapping, while `d3.timeFormat` formats tick labels.

Scatter Plot - RDG2018

This scatter plot displays monthly waste measurements in kilograms (WasteKgs) for 2018, sorted by month. The visualization uses React with D3 v6 for scales and SVG rendering, loading CSV data from a GitHub gist. It employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with reusable axis components and circle marks that include native SVG tooltips via the `<title>` element. Custom Poppins typography and teal circle styling give the chart a clean, modern appearance.

Scatter Plot - iris flower

This scatter plot visualizes the iris flower dataset, mapping sepal length on the x-axis against sepal width on the y-axis. Each circle represents an individual flower sample, with hover tooltips revealing the precise x-value via the native SVG `<title>` element. Built with React and D3 v6, the visualization uses `scaleLinear` for both axes with `.nice()` padding, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG ticks and circles. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with numeric parsing applied to all four measurement columns.

Mar 8, 2021

Styleized residuosdecultivosgenerados Refactored

This example shows a horizontal bar chart displaying monthly agricultural crop residue generation across multiple zones. Each bar’s length represents the value for a given month, with zones listed along the vertical axis and a formatted x-axis indicating totals. Built with React and D3 v6 (using `scaleBand`, `scaleLinear`, and `format`), the chart renders as SVG. Data is loaded via `csv` from a remote gist URL, and components like `AxisBottom`, `AxisLeft`, and `Marks` handle scales, labels, and bar drawing. The title labels the metric as "Residuos Decultivos Generados."

Mar 8, 2021

Mexico Population Analysis (Zone Prop)

This visualization plots Mexican population data against geographic zones, with each point representing a zone and its population on the x-axis and zone identifier on the y-axis. The color and tooltip encode surface area in square kilometers. The chart uses the vega-lite-api to construct a circle mark specification, which is rendered by Vega-Lite and Vega with an SVG output. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the visualization is configured with custom axis and title styling in config.js.

Mar 8, 2021

Rect Chart Residuos decultivos generados

A rect chart visualizes crop waste generated across zones by month for 2018, with color intensity representing kilograms of waste and tooltips revealing exact values. Built with the vega-lite-api, the visualization uses `vl.markRect()` and encodes zones on the y-axis and months on the x-axis via a time unit. Data is loaded asynchronously with d3.csv from a GitHub gist, and the chart is rendered with vega and vega-lite, configured for dark text and larger fonts to improve readability.

CircleMark Residuos decultivos generados

This visualization displays crop residue waste generated in 2018 across different zones and months, using a circle mark where the size of each circle encodes the WasteKgs value. The chart orders zones on the y-axis and months on the x-axis, with tooltips revealing exact waste amounts. It is built with the vega-lite-api library, which registers Vega and Vega-Lite, and loads data from a CSV file via d3.csv. The visualization applies custom configuration for axis styling and title formatting.

Mexico Population Analysis (Area x Prop)

This visualization plots Mexican states by population against surface area, with each circle colored and tooltipped by state name. It uses the Vega-Lite API (vl.markCircle, vl.encode with fieldQ/fieldN mappings) to generate the scatterplot from CSV data fetched via d3.csv, rendering through vega and vega-lite with custom config for axis styling. The chart is fitted to the full window size and includes an interactive tooltip handler.

residuosdecultivosgenerados Refactored

This bar chart shows crop residue generation in thousands of kilograms across twelve zones, with each horizontal bar labeled by zone and scaled linearly by its January value. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Data is loaded asynchronously via d3.csv from a GitHub gist, and tick labels are formatted with a custom "M Kg" suffix. The chart includes gridlines from the bottom axis and zone names from the left axis, implemented through custom React components.

residuosdecultivosgenerados with axes

This visualization displays agricultural crop residue generation data across different zones using a horizontal bar chart. The React component loads CSV data from a GitHub gist and renders a bar chart using SVG, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the x-axis. The code uses d3.csv for data loading, and d3.max to determine the domain, with axis ticks and labels generated via the scale’s .ticks() method. Each rectangle’s width corresponds to the value for the month of January, with axis lines and text labels providing reference points.

Margin Convention

This example displays agricultural residue data by zone as horizontal bars, with each rectangle's width proportional to January values. The chart uses D3's `scaleBand` and `scaleLinear` within a React component, respecting a 50-pixel margin on all sides via SVG transforms. Data loads from a CSV file through `d3.csv`, showing the first 12 records in a static, non-interactive format.

Mar 6, 2021

Bar Chart w/ D3 And React

This example displays a horizontal bar chart of the ten most populous countries for 2020, using data from a UN Population CSV loaded via `d3.csv`. The React component manages the data with `useState` and `useEffect`, while D3’s `scaleBand` and `scaleLinear` compute the bar positions and widths. Each bar is rendered as an SVG `rect` element, with the chart sized at 960 by 500 pixels.

Mar 5, 2021

Rendering Data w/ D3 And React

This example renders a donut-style pie chart of CSS named colors using React and D3. The code fetches CSV data via `d3.csv` and employs `d3.pie` and `d3.arc` to compute and draw the SVG paths. Each slice is filled with its corresponding color value from the dataset, with React managing state and rendering the SVG elements.

Data Viz w/ D3 And React

This visualization displays all CSS named colors as horizontal SVG bars, stacked vertically in a 960-pixel-wide column. The React component fetches color data from a remote CSV file using the `csv` function from D3 v6, then renders each row as a div with its corresponding RGB hex value as the background color. The example demonstrates integration of D3’s data-loading utilities within a React state management flow, using hooks like `useState` and `useEffect` to handle asynchronous data fetching and display a loading message until the dataset arrives.

Load Data with D3 and Show State with React (FrontEnd)

This D3 and React example loads a Mexico Waste CSV from a GitHub gist and displays a text summary of the dataset. The app uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously with `d3.csv`, then a helper function formats the file size in kilobytes, row count, and column count. The visualization shows the loaded information as plain text in a React-rendered `<pre>` element, demonstrating how D3 utilities can integrate with React state management for front-end data processing.

Mexico Population Analysis (Zone x Pop)

This bar chart visualizes Mexico’s population by geographic zone, with each bar’s height representing the summed population per zona and bars sorted in descending order. State-level color coding via a category20b scheme and tooltips reveal additional detail. The visualization is built with vega-lite-api, which registers vega and vega-lite, and loads CSV data from a GitHub gist using d3.csv. Custom configuration adjusts axis, title, and label styling, while vega-tooltip provides interactive hover information.

residuosdecultivosgenerados

This bar chart shows the sum of crop residue generated per zone across Mexico, with each bar colored by state. The visualization aggregates population data by zone and sorts bars in descending order, with tooltips revealing the state name for each segment. Built with the vega-lite-api, it uses `markBar`, `fieldQ` for quantitative population values, and a category20b color scheme. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart renders with vega-tooltip handler and custom config for improved readability.

Fork of Bar Chart to Mutli Stack Bar Chart

This example shows world population by country, broken down by religion, as a stacked bar chart. Each bar represents a country, with segments colored by religion and tooltips revealing the specific group. Using the vega-lite-api and vega-tooltip libraries, the visualization loads CSV data from a GitHub gist, renders with SVG, and applies custom styling for larger fonts and dark text. The bars are sorted by total population and sized via the `size` property for readability.

Mexico Population Bar Chart

This bar chart displays the population of Mexican states, sorted in descending order, with the highest-population states appearing on the left. The visualization is rendered using the vega-lite-api library (version 0.1.0) with d3.v5 for data loading via the `csv` function, pulling from a gist-hosted CSV file. It uses a single bar mark with an opacity of 0.9 and configures axis, title, and label styling for improved readability. The chart dynamically sizes to the window and includes tooltips for each state's population value.

Tempurature Line Chart

This chart displays temperature readings over time using a line plot, with the y-axis labeled “temperature” and the x-axis labeled “timestamp.” The visualization is constructed with the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded from a CSV file via d3.csv, and the chart’s appearance is customized through a configuration object that adjusts axis ticks, font sizes, and color. Tooltips are enabled via the Vega-Tooltip handler, showing the temperature value on hover.

Fork of Stylized Line Chart

This line chart displays temperature readings over time from the Data Canvas Sense Your City dataset. The visualization uses a natural curve to create a smooth, stylized path through the weekly temperature data points, with axes labeled "Time" and "Temperature." Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `curveNatural` to position and render the SVG line. The code loads CSV data via `d3.csv`, and includes modular axis and marks components that handle tick generation and path drawing.

Vega-Lite API Template w/ API Fetch

This example demonstrates a scatterplot of temperature readings for various cities, using the Vega-Lite API to construct the visualization. The chart encodes temperature as the y-axis and city as the x-axis, with a tooltip displaying the state for each point. The code fetches CSV data from a remote URL using `d3.csv`, then builds the visualization with `vega-lite-api`, rendering it as an SVG via the `vega` and `vega-lite` libraries. Styling is customized through a config object, and the chart fills the browser window with an autosize fit.

Mar 1, 2021

Vega-Lite API Template (1)

This visualization shows a scatter plot of automobile data from the UCI Auto MPG dataset, plotting population against horsepower with point size scaled by weight. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through JavaScript calls like `vl.markPoint()` and `vl.x().fieldQ()`. It loads data asynchronously via `d3.csv`, applies a custom configuration for axis styling, and renders to SVG with interactive tooltips powered by `vega-tooltip`. The visualization fills the browser window and auto-fits its dimensions to the viewport.

Mar 1, 2021

Inputs of Data Viz (React)

This example demonstrates how to summarize a raw CSV dataset by displaying its size in kilobytes, row count, and column count as large monospaced text. Built with React and D3.js, it uses D3’s `csv` function to fetch and parse a dataset of Mexican states from a GitHub gist. A callback in a `useEffect` hook triggers the fetch, and the result is formatted via a custom `message` function that relies on `d3.csvFormat` to compute the data’s size. The rendered output appears in an SVG-based layout.

Mar 1, 2021

Load Data with React & D3 Template

This example demonstrates a minimal template for loading a CSV dataset with D3 and displaying summary statistics about the loaded data. It fetches a remote CSV file from a GitHub gist using `d3.csv()` and, upon successful resolution, logs the data’s size in kilobytes, row count, and column count to the browser console. The page also contains a large empty `pre` element, though the code to populate it with the same statistics is commented out. The example highlights the asynchronous data-loading pattern in D3 v6 with a React-ready structure, with the actual data stored in React state via a commented-out `setData` call.

CSV Fetch and Parse

This example demonstrates a minimal workflow for fetching and parsing remote CSV data with D3. It shows the resulting dataset’s size in kilobytes, row count, and column count in large text on the page. The code uses `d3.csv` to load a CSV file from a GitHub gist and `d3.csvFormat` to measure its string length, while also logging the parsed array to the console. A commented-out alternative shows manual fetching via the Fetch API and parsing with `d3.csvParse`.

React Interaction Template

This example demonstrates a simple interactive template built with React and D3 v6, rendering an SVG circle that follows the mouse cursor across a 960×500 canvas. The app uses React’s `useState` and `useCallback` hooks to track and update the mouse position on every `mousemove` event, while the circle’s `cx` and `cy` attributes are bound directly to that state. The template shows how to combine React’s declarative component model with D3’s SVG primitives for real-time user interaction without explicit D3 selections or transitions.

CSV Fetch Template

This example demonstrates the minimal boilerplate required to fetch and read a CSV file from a remote URL using JavaScript. The page uses the `fetch` API and the `.text()` method to retrieve raw text data, logging the contents to the browser console. The data originates from a GitHub Gist containing state names for Mexico, while the HTML and CSS establish a simple centered display. No external libraries or charting frameworks are used, focusing purely on the data-fetching workflow.

Colors Table

This example demonstrates fetching and displaying a table of CSS named colors in the browser console. The code uses the native JavaScript `fetch` API to asynchronously retrieve a CSV file containing color names and their corresponding hexadecimal values from a GitHub Gist URL. It then processes the response using the `response.text()` method, and logs the raw CSV content to the developer console via `console.log`. The HTML page itself is minimal, centering a large title text with CSS, while the data retrieval and logging logic are handled entirely within a `_script` tag. No external visualization libraries or frameworks are employed.

Smiley Face Part II

A grid of 18 identical smiley faces, each rendered as a yellow circle with a black border, two dark eyes, and a simple dark mouth. The faces are created using React components, with each face built from modular `BackgroundCircle`, `Eyes`, and `Mouth` components. The mouth shape is generated using the d3 `arc` function to define a curved path. The eyes have a randomized radius, introducing slight variation across the repeated faces. The entire composition is rendered as SVG elements within a React application.

Fork of Rose Wind Plot

A radial wind rose chart displays wind speed and direction data from a CSV file, using a circular layout where each of the compass directions forms a segment whose length corresponds to wind speed. The chart uses stacked bars colored by speed range from blue to red, with the data loaded via `d3.csv`. The implementation combines D3's `scaleLinear`, `scaleBand`, and `scaleOrdinal` with a custom `radial` scale function that applies a square-root transformation to map linear data onto a circular radius. Angular axes and concentric circular gridlines are generated using `axisLeft` with a transformed radius scale, while the chart is rendered as SVG.