bepnye@gmail.com

Fork of Working Zoom/Pan

This example demonstrates a zoomable and pannable stacked bar chart visualizing Colorado county election votes using d3.zoom with scaleExtent and translateExtent to constrain navigation. Data is loaded from external GeoJSON and CSV sources, then rendered using d3.stack, scaleBand, and scaleLinear. The implementation includes SVG clip paths, axis elements, and a tooltip module (svgGlobals.js) for showing vote details—though tooltip interactivity appears commented out in the main rendering code.

Working Zoom/Pan

This visualization displays Colorado county voting data for a ballot proposition, showing stacked bars of yes and no votes for each county. The chart uses D3 v4’s `d3.zoom` and `d3.event.transform` with `rescaleX` to enable panning and zooming along the horizontal axis, while vertical movement is locked. Hovering over bars or counties reveals a tooltip with county-specific vote counts, using the `tooltip` module from `svgGlobals.js`. Data originates from a GeoJSON file of Colorado counties and a CSV of proposition results, rendered as SVG.

Fork of Fork of Fork of colorado county data bar chart pt 2

This bar chart visualizes Colorado county voting data for a proposition, with stacked bars showing the number of yes and no votes per county. Hovering over a bar reveals a tooltip displaying the vote counts for that specific county. The visualization uses d3.stack, d3.scaleBand, and d3.scaleLinear to construct the chart, while d3.zoom enables panning and zooming along the x-axis. Vote data comes from a CSV file and county geometry from a GeoJSON source, rendered as SVG via D3 v4.

Fork of Fork of Fork of colorado county data bar chart pt 2

This visualization displays Colorado county election results as a stacked bar chart, with each bar representing the yes and no vote counts for a specific proposition. Hovering over a county reveals a tooltip with the exact vote numbers. The chart uses D3 v4 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.zoom` for interactive panning. It loads county boundaries from a GeoJSON file and vote data from a CSV, rendering the bars as SVG rectangles.

Fork of Fork of Fork of colorado county data bar chart pt 2

This example displays a stacked bar chart of yes and no votes for a Colorado ballot proposition, with each county represented as a bar. Hovering over a bar reveals a tooltip with the county’s vote counts. The chart is built with D3 v4 using `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear`, rendering SVG elements. Data comes from a GeoJSON file of Colorado counties and a CSV of proposition results.

Fork of barchart-sorted

This fork of the bar chart shows child undernutrition percentages across eight blocks in Palghar, India, for three months. Interactive dropdowns let viewers switch between August, September, and October, and toggle among height, weight, or combined height-plus-weight measurements. The sorted bar layout updates smoothly with d3 transitions, reordering bars and rescaling axes. Bars are color-coded with a sequential d3-scale-chromatic interpolator (RdYlGn), and a d3 tooltip displays block values. Data comes from the provided CSV files.

Fork of dropdown test

This interactive visualization combines a geographic map and a scatter plot to explore endangered languages worldwide. A dropdown menu filters data by country, updating both the map points and the plot simultaneously. The map uses an August projection via `d3.geoAugust()` and `d3.geoPath()`, while the plot displays speaker counts on a log scale against endangerment categories. Brushing on the scatter plot highlights corresponding map marks. Built with React and D3 v6, it renders SVG elements and employs `d3.scaleOrdinal` for color encoding.

Fork of Fork of Cat Data Final Demo popup dropdown

This visualization examines cat breed origins and attributes using two linked views. A zoomable, pannable choropleth world map, drawn with `d3.geoPath` and a `d3.geoEqualEarth` projection, colors countries by the number of breeds. A scatterplot of life expectancy against weight allows dynamic axis selection via dropdowns. Both views support popup tooltips, though they are currently non-functional. Data comes from a Kaggle cat breeds dataset.

Fork of getting there

This visualization pairs a choropleth world map with a multi-line chart to explore global red wine production over time. The map colors countries by production quantity for a selected year, while the line chart displays production trends for the top-producing countries, with a slider to change the active year. Built with D3 v6, it uses `d3.geoEqualEarth` and `d3.geoPath` for the map, `d3.scaleThreshold` for coloring, and SVG paths with a `d3.line` generator for the chart. Hovering highlights a country's output on the map and shows a tooltip with its latest recorded value.

Fork of Cat Data Final Demo

GapMinder (CP341 Style)

Fork of Production Map and Line Chart

Fork of Wine/Happy Graph Take 2

Fork of SC5

This visualization combines a choropleth map of South Carolina counties with a horizontal bar chart, showing elevator counts and population data. Hovering over a county highlights it and displays a tooltip with the number of elevators and total population. The map uses a linear color scale, while the bar chart employs `d3.scaleBand` and `d3.axisBottom`. Data is loaded from external CSV and GeoJSON sources via `d3.csv` and `d3.json`, with interactions handled through D3 event listeners.

Fork of Fork of Chloropleth

A choropleth map of the United States colors each state according to a numeric value from a CSV file, using a white-to-blue linear scale. It renders as an SVG via D3 v6, with an Equal Earth projection fitted to the map’s bounding box. The code loads GeoJSON state boundaries and state statistics, then joins them by ISO 3166-2 codes to set fill colors through `d3.geoPath` and `d3.scaleLinear`. The map is sized at half the container’s width, with data sourced from a GitHub-hosted GeoJSON file.

perceptionWeb

Fork of SC4

This map of South Carolina shows the number of grain elevators in each county via a diverging color scale from light yellow to dark red. Hovering over a county highlights it in dark blue and displays a tooltip with the county name and elevator count. The visualization loads D3 v6 from a CDN, uses `d3.geoMercator` and `d3.geoPath` to project and draw GeoJSON county boundaries, and joins that with CSV data. Interactivity relies on SVG path mouse events and a custom tooltip div managed through `d3.select`.

Choropleth

A choropleth map of global health and economic indicators is paired with an interactive scatter plot of related country attributes. The map colors countries using a linear scale for urban population rate, while the scatter plot encodes continent by color and population by point radius. Built with React and D3 v6, the visualization uses `d3.geoEqualEarth` and `d3.geoPath` for map rendering, dynamic axes with linear/log scale toggles, and animated transitions via `transition.attr` for smooth updates.

Selection

This example shows a linked choropleth map and scatter plot of country data, with a color scale mapping urbanization rates from green to grey and a scatter plot encoding life expectancy, GDP per capita, and population using position, color, and radius. The visualization supports interactivity by letting users select data points, which updates the map's color scale and the scatter plot's axes. It uses d3.geoEqualEarth for the map projection, d3.geoPath to render country shapes, and d3.scaleLinear for color, position, and size scales. Hovering over points triggers a tooltip via CSS transitions.

Fork of Circles with D3

This example draws a set of colorful, semi-transparent circles of varying sizes and positions onto an SVG canvas. It uses D3’s `select` API and the general update pattern with `selectAll`, `data`, and `join` to create the circles and set their `cx`, `cy`, `r`, and `fill` attributes from a hardcoded data array. The visualization also implements interactive tooltips, displaying text on mouseover and logging a circle’s name to the console on click.

Circles

This example demonstrates how multiple HTML input elements can control SVG circle properties in D3.js v6. It shows three interactive patterns: a number input that changes a circle’s radius, a dropdown menu that transitions a circle’s fill color via `selection.transition()`, and a range slider that resizes four circles simultaneously. The code uses `d3.select` to bind event listeners and `join` to populate options. The SVG is rendered directly in the DOM, with visual feedback updating in real time.

Fork of WAEVData_Fork of Chloropleth

Fork of Chloropleth

This visualization displays a choropleth map of world countries colored by birth rate, using a blue-to-red linear color scale. It renders two SVG graphics, each half the width of the full canvas, using the D3.js `geoEqualEarth` projection and `geoPath` to draw country boundaries from a GeoJSON file. The code loads world statistics from a CSV and matches country names to shapefile features, falling back to gray for missing data. It leverages D3's `scaleLinear` for color encoding and `Promise.all` to load multiple datasets concurrently.

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

This D3.js v4 world map visualizes birth rates per country using a Mercator projection, coloring each nation on a white-to-blue linear scale. The map draws country boundaries as SVG paths from a TopoJSON-to-GeoJSON dataset, with the `d3.geoMercator` and `d3.geoPath` APIs converting geographic coordinates into planar shapes. Circular indicators mark four specific cities—Fairbanks, Boston, Philly, and COS—positioned via the same projection. The choropleth colors are derived from a CSV file loaded through `d3.json` and `d3.csv` deferred queues.

Fork of HTML Starter

This example displays a world map rendered as an SVG using a Natural Earth projection. The code loads GeoJSON data from an external GitHub repository and draws each country as a filled path with a white stroke, using the `d3.geoPath` API. The visualization is built with D3.js v4, specifically employing `d3.geoNaturalEarth1` for the projection and `d3.json` for asynchronous data loading.

Fork of Migrant Deaths Linked Views with Fast Brushing

A geographic bubble map and time-series histogram display migrant deaths from a Simplemaps World Cities dataset overlaid on a World Atlas TopoJSON land mesh, styled with graticules and interiors. The map uses d3.geoTransverseMercator and d3.geoPath, with circle radii scaled by d3.scaleSqrt for the total dead and missing. A linked d3.brushX on the histogram filters the map in real time, while React’s useMemo optimizes rendering and SVG output.

Fork of Fork of Scatterplot for peng bird dataset

This example visualizes country-level data from the world-data-2023 CSV, plotting birth rate on the x-axis against calling code on the y-axis, with circle radius encoding infant mortality. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft to render them. Circles are drawn using SVG with d3’s join method, styled in teal, and log data to the console on mouseenter. The chart is built in React with d3.v6, rendering in a fixed 900x400 SVG canvas.

Fork of Reusable D3 Scatter Plot

Heatmap

A d3.js heatmap displays a matrix of values using the Inferno color scale, with each cell representing a combination of a group and variable from a CSV dataset loaded from GitHub. The SVG rendering includes band scales for axes, rounded rectangles, and a tooltip that shows the exact value on hover. The code uses d3.scaleSequential with d3.interpolateInferno, d3.axisBottom, d3.axisLeft, and mouse event handlers for interactivity.

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. It uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the visualization, which is rendered as SVG. The chart customizes the axes by removing tick lines, formatting population values with d3.format, and adding axis and title labels.

Fork of Submarine Cables Globe

This interactive globe visualizes submarine cable routes using an orthographic projection. The map renders landmasses, a graticule, and colored cable paths from TeleGeography data using d3.geoPath. Users can drag to rotate the globe and zoom with the mouse wheel, with d3.drag and d3.zoom updating the projection’s rotation and scale. The visualization loads TopoJSON world atlas data and submarine cable GeoJSON from remote sources, dynamically updating the scene as state changes.

Fork of Margins

This example demonstrates how margins define the inner rectangle of a visualization, using a red rectangle to clearly show the area where data marks are drawn. The code sets fixed margin values for the top, bottom, left, and right, then calculates the inner dimensions by subtracting them from the container's width and height. It uses D3's `select` API with a `join` operation to create and size the SVG and its child rectangle, illustrating the fundamental layout step before adding axes or data.

Fork of Circles with D3

This example shows a simple scatter of seven colored circles over a light green background, using D3.js to render and style an SVG. The code imports the `select` function from D3, measures the container’s width and height, then uses D3’s data join pattern and method chaining to bind circle positions, radii, and fill colors from a hard-coded data array. The resulting visualization demonstrates the general update pattern, with an opacity set to 0.708 to create an overlapping effect.

Fork of Circles with D3

A colorful collection of seven overlapping circles with varying radii and fill colors rendered as SVG. The visualization demonstrates D3's data join pattern, binding an array of circle objects to SVG circle elements with chained attribute setters for position, radius, color, and opacity. The code imports `select` from `d3` and uses `.selectAll()`, `.data()`, `.join()`, and `.attr()` methods to create the static composition from hardcoded data.

Fork of Fork of Fork of HTML Starter

This example displays four circles positioned along a horizontal axis, representing placeholder data points for auto sales by brand. The visualization uses D3 v5 to render the SVG elements, with each circle’s position and radius explicitly set via attributes. The code employs D3’s `select`, `selectAll`, and `join` API to bind the data array to the circles, while a fixed opacity value is applied. The circles lack fill colors, leaving them in their default black state, as no color data is assigned in the provided dataset.

Blank SVG

Blank SVG

This example displays a blank canvas and logs the D3 library to the console. It defines a main function that declares a single `fontSize` variable but does not render any visual content. The code imports the `select` function from D3 and uses the D3 library loaded via a global script in `package.json` for visualization. The HTML page contains a div with the id "canvas" where a chart would normally be placed, but no drawing occurs.

religionbycountrytop20 (Curran)

Fork of Circles with D3

This fork of circles with D3 renders seven translucent, colored circles at fixed positions on a pale green background. Each circle’s size and fill color come directly from the hard-coded data array. The visualization uses D3 joins to create the SVG circle elements and sets their attributes, including an opacity of 0.708, using `select`, `join`, and `attr` methods. The SVG canvas dimensions adapt to the container’s client width and height.