E

evers-codeshop-ai

@evers-codeshop-ai·28 public vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization shows the organizational network of the Kenneth Rainin Foundation, using a force-directed graph with four main nodes connected to child nodes and leaf nodes. The d3.forceSimulation API positions the nodes, while d3.forceLink handles the connections, and the drag interaction allows users to reposition elements. Data generates from a hardcoded structure in data.js, with node colors and sizes defined programmatically. The SVG rendering displays circles for nodes, lines for links, and text labels for entity names.

Loading thumbnail…

Fork of Global Coronavirus Deaths

This chart shows the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A thick black line traces the rising total from the first recorded deaths through the most recent date, with a horizontal marker at 10,000 deaths and a vertical marker at the final date. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for axes, a D3 `line` generator for the path, and custom `XAxis`, `XMarkerLine`, and `YMarkerLine` components rendered as SVG.

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the share of the population infected with HIV/AIDS for the year 2017, using a yellow-orange-red sequential color scale to encode prevalence rates. Countries without data appear in gray. The map is rendered with SVG paths generated by d3.geoPath and the geoNaturalEarth1 projection, with graticules and country boundaries drawn from World Atlas TopoJSON data. The visualization is built in React, fetching CSV data via d3.csv and mapping ISO country codes to numeric identifiers for joining with the geographic features.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis maps reported dates over time, while the y-axis uses a logarithmic scale to display total dead and missing counts, compressing the wide range of values. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLog`, and `scaleLinear` for axis construction, with SVG circles rendered through the `Marks` component. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, while hover tooltips reveal exact dates via the `<title>` element.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

A geographic bubble map displays migrant deaths by location, linked to a time-series histogram below. The map uses a natural Earth projection with graticules, while the histogram shows monthly death counts. Brushing the histogram filters the map’s circles in real time. The visualization uses React with d3.js v5, including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, `d3.scaleTime`, and `d3.brushX`. Data comes from a CSV of Missing Migrants records.

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram into a single SVG view, showing the total number of dead and missing migrants over time and across geographic locations. Users can brush a time range in the histogram to filter which incidents appear on the map. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land and graticules from World Atlas TopoJSON, while circles sized with `d3.scaleSqrt` encode mortality counts. The histogram is built with `d3.bin`, `d3.scaleTime`, and `d3.brushX`. Data comes from a CSV of migrant incidents.

Loading thumbnail…

Fork of Multiple Views Cleanup

This interactive visualization combines a geographic bubble map with a time-series histogram to explore migrant deaths and disappearances. The map projects city locations using an equal-area projection with graticules, while the histogram aggregates monthly totals using `d3.histogram` and `timeMonths`. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` for the map projection and `scaleSqrt` for bubble sizing, rendering data from the Missing Migrants Project as SVG. The code demonstrates a modular approach with separate axis and mark components for each view.

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This interactive visualization shows reported deaths and disappearances of migrants across global locations and over time. It combines a world map with proportional bubbles representing incident magnitudes alongside a monthly histogram displaying cumulative fatality counts. The map uses a natural Earth projection rendered via d3.geoPath, while bubbles size with d3.scaleSqrt based on total dead and missing. The histogram bins reported dates by month using d3.histogram. Both views are built as React components with SVG, drawing from the Missing Migrants Project dataset and world-atlas TopoJSON for geographic boundaries.

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization displays events from the Missing Migrants Dataset as semi-transparent circles on a natural Earth projection map. Each circle’s radius encodes the total dead and missing count using a square-root scale, with country boundaries and graticules rendered for geographic context. Built with React and D3 v5, it uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and draw the map, while d3.csv loads the data and d3.scaleSqrt sizes the circles. The map is rendered as SVG, with TopoJSON land and interior boundaries from the World Atlas dataset.

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This histogram displays the monthly count of dead and missing migrants, with time on the x-axis and total fatalities on the y-axis. The visualization uses React to render SVG elements and D3 v5’s d3.bin and d3.sum functions to aggregate the data into monthly bins, sourced from the Missing Migrants Dataset. Axes are generated with custom React components, and bars include tooltips showing exact values.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis maps reported dates over time, while the y-axis shows the total number of dead and missing individuals. The visualization uses React and d3.v5, employing `scaleTime` and `scaleLinear` for axes, and rendering marks as SVG circles with native `<title>` tooltips. Data is loaded asynchronously via d3’s `csv` function from a GitHub-hosted CSV file.

Loading thumbnail…

Fork of Working with Time

A time-series scatter plot visualizes temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. React renders SVG circles through the `Marks` component, while `d3.scaleTime` and `d3.scaleLinear` map the data extents. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, with CSS styling applied via SVG classes.

Loading thumbnail…

Fork of Sized Points on a Map

This example visualizes a world map with circles sized by city population, focusing on cities with populations exceeding 50,000. The map uses a Natural Earth projection rendered with `geoNaturalEarth1` and `geoPath`, while city points are positioned via the projection and scaled using `scaleSqrt` for their radius. Data is sourced from Simplemaps and world-atlas TopoJSON, with graticules and polished land boundaries. The visualization is built with React, leveraging `d3.csv` for data loading and `topojson.mesh` for interior boundaries.

Loading thumbnail…

Fork of Points on a Map

This example displays a natural Earth projection world map with graticules and country boundaries, overlaid with small semi-transparent teal dots representing cities exceeding 50,000 in population. The map is rendered as SVG using React, with D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for the geographic features. City coordinates are projected from latitude and longitude into screen positions, and the underlying data comes from Simplemaps’ World Cities Database, while land and interior boundaries derive from the World Atlas TopoJSON. Asynchronous data fetching is handled via custom hooks using D3’s `csv` and `json` loaders.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot of the Iris dataset maps petal length against sepal width, with each species represented by a distinct color. Users can hover over the color legend to highlight points of a particular species while dimming all others, using React state for hover tracking. The visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading and scaling, with SVG rendering through React components for axes, marks, and the interactive legend.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers. Each circle is colored by species using a categorical scale, with a legend displaying the three species names. The React application uses d3’s `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data. Axes, marks, and the legend are rendered as SVG components, and hovering shows a tooltip with the x-axis value.

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for three flower species. Each circle is colored by species using an ordinal color scale. Built with React and d3.scaleLinear for positioning, the SVG chart displays axes with formatted tick labels and includes tooltips showing exact values. The code loads data asynchronously via d3.csv, parses numeric columns, and renders marks as SVG circles.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements via two dropdown menus that select the X and Y axes. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes, `csv` for data loading, and React state to update scales and labels dynamically. The chart displays points colored teal, with axis ticks styled via CSS, and includes dropdown-driven attribute selection for all four numeric measurements.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, implemented with React state, dynamically select which numerical attributes map to the x and y axes. The visualization renders as an SVG using React with D3’s `scaleLinear` for axis scales and `extent` to compute domains from the CSV data. Circle marks use a tooltip via the `<title>` element.

Loading thumbnail…

Fork of Polished World Map

This example shows a polished world map with country boundaries displayed as SVG paths. The map renders landmasses in teal, graticules in light gray, and the sphere in off-white, with country interiors highlighted in a contrasting blue. The visualization is built using React, with D3’s `geoNaturalEarth1` projection and `geoPath` to draw the geographic features. It also uses `geoGraticule` to generate the graticule lines and the `topojson` `feature` and `mesh` functions to process the World Atlas TopoJSON source data.

Loading thumbnail…

Fork of Working with Time

A time-series scatter plot visualizes temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. React renders SVG circles through the `Marks` component, while `d3.scaleTime` and `d3.scaleLinear` map the data extents. The `AxisBottom` and `AxisLeft` components generate tick marks and labels, with CSS styling applied via SVG classes.

Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart displays temperature readings over the course of a week, using a smooth, natural curve to connect data points from the San Francisco weather dataset. The visualization is built with React and rendered as SVG, with D3 v5 handling the data loading, scales, and axis generation through functions like `scaleTime`, `scaleLinear`, and `csv`. The chart features labeled axes for time and temperature, with the path rendered via the `line` generator and `curveNatural` interpolation.

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width as circular marks. The React-based SVG rendering uses D3’s `scaleLinear` for axes and `csv` for data loading. Each circle includes a `<title>` tooltip showing the x-value, while axis ticks and labels are styled with the Poppins font and muted colors to create a clean, polished appearance.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries, with each country’s population encoded as the bar length. The visualization uses React components within an SVG canvas, leveraging D3’s `scaleBand` and `scaleLinear` for axis and bar positioning. Data is loaded via D3’s `csv` fetch from the United Nations World Population Prospects 2019. Hovering over a bar reveals its value through a tooltip formatted with D3’s `format` function, converting numbers to abbreviations like “B” for billions.

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset in a horizontal bar chart. The bars are rendered as SVG rectangles using React components, with axes generated via custom `AxisBottom` and `AxisLeft` components that leverage d3.scaleBand and d3.scaleLinear. Data loading is handled through d3.csv in a custom `useData` hook, which parses population values and slices the result to the first ten entries. The chart includes tick marks and labels for both axes.

Loading thumbnail…

Refactored Barchart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values along the x-axis. The visualization uses React components with D3’s `scaleBand` and `scaleLinear` to position bars and ticks, rendering SVG elements directly. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via D3’s `csv` function and sorted to the first ten rows. The chart includes an `AxisBottom` component that maps tick values to x-coordinates.

Loading thumbnail…

Fork of Axes with React & D3

This visualization displays the top 10 most populous countries as a horizontal bar chart, using the United Nations World Population Prospects 2019 dataset. The React component manages state and lifecycle while D3’s `scaleBand` and `scaleLinear` handle positioning. Axes are manually constructed with D3’s `ticks()` method, rendering grid lines, tick labels, and country names as SVG elements. The chart includes minimal styling and no axis titles, presenting a raw, functional view of the data distribution.

Loading thumbnail…

Fork of Hello HTML

This example shows a single SVG circle without any visible data or interaction. The code renders a 960 by 500 pixel SVG element containing a circle with a radius of 100 units, positioned at the default origin. It relies on inline SVG markup within an HTML page, with the body styled to remove margins and hide overflow. The circle has no fill or stroke attributes, so it appears as a black silhouette on the default white background.