CrossZeigler

@CrossZeigler·15 public vizzes

Stacked Bar Chart of Depression Rates by Country

This horizontal stacked bar chart displays depression rates across countries, broken down by year from 2015 to 2019. Each bar represents a country, with colored segments corresponding to annual prevalence percentages, and hovering reveals exact values via a custom tooltip. Built with D3 v4, the visualization renders as SVG and uses `d3.stack` for the segmented bars, `d3.scaleOrdinal` for the color palette, and a CSV dataset from GitHub as the data source.

May 21, 2023

Loading thumbnail…

Rate of Depression over Time per Country

This visualization shows the global rate of depression over time for each country, with a logarithmic y-axis displaying cumulative deaths. It uses React and d3.v5 to render an SVG line chart, with a Voronoi overlay for hover interactions that highlight the active country’s line and display a tooltip with exact values. Data comes from a CSV dataset processed via d3.csv, with scales and line generators built using d3.scaleTime, d3.scaleLog, and d3.line.

May 19, 2023

Loading thumbnail…

Untitled

This visualization demonstrates temperature trends over time for three cities—New York, San Francisco, and Austin—using a multi-series line chart. The chart displays daily temperature readings across roughly three weeks, with each city represented by a distinct colored line and accompanied by a legend and labeled endpoints. The visualization uses D3 version 3.5.3, specifically leveraging `d3.tsv.parse` to read tab-separated data, `d3.time.scale` for the x-axis, and `d3.svg.line` for drawing the paths. Temperature data is parsed as dates and mapped to a linear y-axis, with city names colored via `d3.scale.category10`.

May 19, 2023

Loading thumbnail…

Choropleth Map NU

A choropleth map displays the World Happiness Report 2019 scores of countries. The map uses a Robinson projection and colors each nation according to its happiness score using a sequential OrRd color scale. The visualization is built with D3 v4 and React, and renders as an SVG. The code uses `d3.geoPath`, `d3.geoRobinson`, and `d3.scaleThreshold` for the choropleth. It fetches GeoJSON and CSV data from GitHub. Interactive features include a tooltip and click-to-zoom animation using `d3.transition`.

May 19, 2023

Loading thumbnail…

MT Cars

This interactive scatterplot explores the 1974 Motor Trend cars dataset, letting viewers choose the x, y, and size variables via dropdown menus. Selections trigger animated transitions between configurations, updating scales, axes, and point radii. Built with D3 v5, the visualization renders SVG elements and uses d3.csv for data loading, d3.axisBottom and d3.axisLeft for axes, plus d3.scaleLinear and d3.scaleSqrt for positioning and sizing.

May 18, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.csv` to load the data and `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for the axes. Population values are formatted with `d3.format`, and custom axis labels and gridlines highlight the data.

May 18, 2023

Loading thumbnail…

Untitled

This example shows a multi-series line chart with a dropdown menu to switch between different data groups, highlighting one series at a time. The code uses d3.csv to load a dataset from a GitHub repository, then creates an SVG chart with d3.scaleLinear for axes and a d3.scaleOrdinal color scale based on d3.schemeSet2. Selecting a new group triggers the update function, which animates a transition on the path’s d attribute over 1000ms, changing its stroke color accordingly. The visualization is built with d3.v4 and includes an HTML select element populated with group names.

May 17, 2023

Loading thumbnail…

Untitled

This interactive bar chart visualizes the depression rate across the top 10 happiest countries for a selected year. A dropdown menu, populated from a CSV file, lets the user choose a year, triggering a new chart that shows the "Allages" depression rate for each country. Built with D3 v6, the visualization uses `d3.select`, `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG, with bars colored green and rotated country labels for readability.

May 17, 2023

Loading thumbnail…

AIT684 Fork of Fork of NASCAR Statistics Dashboard

This dashboard presents NASCAR race statistics in a multi-view React layout with separate panels for a stacked bar chart, map, simple bars, scatter plot, color legend, and car maker finishes. Each panel is color-coded for visual distinction. The scatter plot uses D3 scales and SVG circles to plot race data, while the color legend displays track names with ordinal color mapping. Data loads from a CSV file containing race winners, and the layout uses Flexbox for responsive panel arrangement.

May 17, 2023

Loading thumbnail…

Flex Wrap Missing Migrants on a Map

This example visualizes the Missing Migrants Dataset, with each circle representing a single event and its radius encoding the total number of dead and missing. The map uses a natural Earth projection rendered as SVG paths via `d3.geoPath`, with graticules and country boundaries from World Atlas TopoJSON. Circle marks are positioned using the projection and scaled with `d3.scaleSqrt`. The React app loads data asynchronously with `d3.csv` and `d3.json` through custom hooks.

May 17, 2023

Loading thumbnail…

Happiness Choropleth Map

A choropleth map displays national happiness scores for the year 2017, using a yellow-orange-red sequential color scale. Countries without data appear gray. The map is rendered with SVG using D3’s `geoNaturalEarth1` projection and `geoPath`, with graticules and country interiors drawn from TopoJSON world atlas data. Happiness values are loaded from a CSV and matched to countries via ISO codes. A D3 color legend with circles and labels explains the scale, built with React components.

May 17, 2023

Loading thumbnail…

Fork of NASCAR Statistics Dashboard

This dashboard displays statistics from an AIT684 dataset, combining depression and happiness metrics with unemployment rates across different years. The visualization uses a scatter plot, bar charts, and a world map to display the data, with a legend for track names. Built with React and D3 v6, it renders SVG graphics, though several components like the map and scatter plots currently appear as placeholders without implemented interactivity or rendering logic.

May 17, 2023

Loading thumbnail…

Multiple Views Cleanup Examples of Multiple Graphs

This visualization combines a D3 geo map with a time-series histogram to explore reported migrant deaths and disappearances. The map uses a natural Earth projection with graticules and country boundaries, where circle size is scaled by the square root of the total dead and missing per location. The histogram below bins reported dates by month and sums the same metric, using D3’s scaleTime, scaleLinear, and histogram APIs. Data is loaded from a CSV of missing migrants, and the world atlas TopoJSON provides geographic features. Both views are rendered as SVG within a React component.

May 17, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using the D3.js library. It fetches a dataset of CSS named colors and displays a summary of the parsed data, including file size, row count, and column count, in a large text element. The code uses the `d3.csv` method to fetch and parse the data, `d3.csvFormat` to compute the size, and relies on an HTML `<pre>` element for output.

May 7, 2023

Loading thumbnail…

AIT684_Coding_Participation6_1

The visualization renders a grid of eighteen smiley faces, each composed of SVG circles and a d3 arc path for the mouth. The faces are generated randomly using React components, with each face’s fill color, stroke width, eye position and radius, and mouth dimensions varying per instance based on JavaScript’s `Math.random`. The `d3.arc` API creates the mouth, while `d3.range` drives the array mapping. All faces share the same randomly chosen hexadecimal background color, computed once from a random number, and are drawn inside a shared SVG viewport using the `FaceContainer` component.

Apr 17, 2023