M

meangreen0067@gmail.com

@meangreen0067-lab·21 public vizzes

Loading thumbnail…

Fork of Animal Kingdom — Taxonomy Tree

This visualization presents the Animal Kingdom as an interactive taxonomic tree, branching from a root through kingdom, class, and order layers down to individual species. Nodes are colored by depth, and hovering reveals tooltips. Built with D3 version 7, it uses `d3.stratify()` to convert a flat parent-child data array into a hierarchy, then `d3.tree()` to compute positions for the SVG rendering. Links and node circles are styled with CSS classes based on depth, and a color legend explains the layer mapping.

Loading thumbnail…

World Population Map (2023 estimates)

This interactive SVG map visualizes 2023 world population estimates using a logarithmic color scale, with countries shaded from light yellow to dark blue-green based on population size. Countries lacking data appear in neutral gray, and hovering over any nation reveals a tooltip with its name. Built with D3.js v7 and TopoJSON, the map employs a Natural Earth projection, graticule grid, and sphere background. Population values come from the UN World Population Prospects 2023, keyed by ISO numeric country codes, and the color encoding uses `d3.scaleSequentialLog` with an interpolator for the YlGnBu color scheme.

Loading thumbnail…

Animal Kingdom — Taxonomy Tree

This interactive tree diagram displays the animal taxonomy hierarchy from a root down through kingdoms, classes, orders, and species. It uses d3.stratify to convert a flat parent-child dataset into a hierarchy and d3.tree to compute the layout, then renders nodes and links as SVG elements. Each depth level is color-coded via CSS classes, and node circles are clickable with a tooltip. The example shows a color legend for depth layers and relies on d3.v7 for all data binding and layout operations.

Loading thumbnail…

Ice 8-2c

A vertical family tree shows three generations descending from a single root, with each person as a labeled circle and parent-child relationships drawn as curved links. The layout is computed with `d3.stratify` and `d3.tree`, using `d3.linkVertical` to generate the paths. The data is a hardcoded array of child-parent pairs, rendered as an SVG with circles and text labels.

Loading thumbnail…

Animal Ecosystem Network (food web)

This interactive food web depicts the feeding relationships among seven animals in a simple ecosystem, with nodes colored by trophic level (producer, herbivore, omnivore, carnivore, apex predator) and directed arrows showing energy flow. The visualization uses D3.js v7 with an SVG renderer, placing nodes initially in a static layout while allowing users to drag and reposition each animal. Edges are drawn as lines with arrowhead markers, and the legend clarifies the color coding for each ecological role.

Loading thumbnail…

World Map - Natural Earth Projection

This example displays a world map using the Natural Earth projection, with countries rendered as blue vector paths on an ocean-colored sphere. It visualizes geographic boundaries with a graticule grid and hover highlighting, loading country data from the world-atlas TopoJSON dataset and converting it to GeoJSON with topojson.feature. The map is drawn with D3 v7’s d3.geoPath and d3.geoNaturalEarth1, with the sphere background generated from a GeoJSON Sphere geometry.

Loading thumbnail…

Ghana Map Top

This example displays a Natural Earth projection world map using SVG paths. Countries are rendered in blue with white borders, set against a light blue ocean sphere and graticule grid. The code uses D3 v7’s `d3.geoNaturalEarth1` projection, `d3.geoPath`, and `d3.geoGraticule` to draw geographic features. It loads `world-atlas` TopoJSON data, converts it to GeoJSON via `topojson.feature`, and binds the resulting country features to path elements.

Loading thumbnail…

Electric Vehicle Data Area Chart

The visualization displays the number of electric vehicles registered per model year using an area chart with an overlaid line. The chart aggregates Washington State EV registration data from a CSV file, counting vehicles by year using d3.rollup. Built with Vue and D3 6.7.0, it renders SVG elements via d3.area and d3.line generators, with axes created using d3.axisBottom and d3.axisLeft. The teal-colored area emphasizes the trend in EV adoption across model years.

Loading thumbnail…

Electric Vehicle Data Line Chart

This line chart visualizes the average electric range of electric vehicles aggregated by model year. Built with Vue and D3.js, it uses `d3.csv` to load the dataset, `d3.rollup` and `d3.mean` for aggregation, and `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG line and axes. The chart shows a general upward trend in range across model years, with data sourced from the Electric_Vehicle_Data.csv file.

Loading thumbnail…

Electric Vehicle Data Pie Chart

This pie chart illustrates the distribution of electric vehicles by type, with a sample dataset drawn from the Electric_Vehicle_Data.csv file. Two slices are displayed, likely showing the proportion of Battery Electric Vehicles (BEVs) versus Plug-in Hybrid Electric Vehicles (PHEVs) across the dataset. The visualization is built using the Vue.js framework and D3.js version 6.7.0, with the `pie` and `arc` generator functions from the D3 library to construct the chart's geometry. The SVG-based pie slices and percentage labels are rendered with a custom color scale, and the chart includes interactive hover effects that adjust slice opacity and stroke width. A legend, also built with the same dataset, accompanies the visualization to provide clarity on the categories. The chart is styled with the Share Tech font family and is displayed on a responsive canvas with a white background and subtle shadow.

Loading thumbnail…

Electric Vehicle Data Reusable D3 Scatter Plot

This reusable D3.js scatter plot visualizes electric vehicle data, mapping model year on the x-axis against electric range on the y-axis, with color distinguishing Battery Electric Vehicles (BEVs) from Plug-in Hybrid Electric Vehicles (PHEVs). Built with Vue and rendered as SVG, it uses `d3.csv` to load the dataset, `scaleOrdinal` for color encoding, and `scaleLinear` with `axisBottom` and `axisLeft` for axes. The implementation follows a reusable chart pattern via a `scatterPlot` function, with interactive hover effects that increase stroke width and opacity.

Loading thumbnail…

Multiseries

This visualization presents electric range trends by vehicle type over model years as multi-series lines, alongside a combined bar and line chart showing vehicle counts and average range by county. The D3.js v7 code parses CSV data containing vehicle records from Washington State, using SVG rendering to draw axes, grid lines, and interactive hover effects with tooltips. The multi-series chart handles data aggregation for electric range trends, while the combined chart visualizes categorical county data.

Loading thumbnail…

Washington State Electric Vehicles

A scatter plot examines Washington State electric vehicles, plotting model year against electric range in miles. Each circle represents a vehicle, colored by battery electric versus plug-in hybrid type, with a color legend and hover tooltips. The visualization uses React with D3 v5, employing `scaleLinear`, `scaleOrdinal`, and the `csv` loader to parse local data and render SVG marks.

Loading thumbnail…

Bar bar

This dashboard visualizes Washington State electric vehicle adoption, showing average electric range trends over time for battery and plug-in hybrid vehicles, and vehicle distribution by county. It uses D3.js v5 to render SVG charts from CSV data, employing `d3.csv` for parsing and `d3.scaleLinear` for axes. A multi-series line chart and a combined bar and line chart include interactive tooltips and custom color schemes, with data grouped and averaged per year and county.

Loading thumbnail…

Fork of d3-x3d : 3D Bar Chart Example

This example presents a 3D multi-series bar chart that visualizes car sales data for the top six manufacturers in the USA for 2021, broken down by quarterly sales figures. The visualization uses the d3-x3d library, which bridges D3 v5 and the X3D standard for declarative 3D graphics, rendering the bars directly in the browser. Data is loaded from a remote CSV file via the `d3.csv` API and parsed into a hierarchical format before being passed to the chart component. The page also incorporates CSS background styling, reinforcing the dashboard-like presentation.

Loading thumbnail…

Sentiment Analysis: Thumbs Up by Review Date

This visualization shows the distribution of genres among IMDb's Top 250 movies, with a horizontal bar chart displaying counts for each genre category. The bars are color-coded using a seaborn-inspired palette, and hovering over a bar dims the others while displaying the exact count and percentage in a tooltip. Built with React and D3 v7, the chart uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for tick rendering. Review data from a CSV file is processed in App.js to count genre appearances before being passed to the visualization component.

Loading thumbnail…

Sentiment Analysis: Thumbs Up by Review Date

This bar chart displays sentiment analysis results, showing the number of thumbs-up votes for each review date. The visualization uses React and D3 v5 to render an SVG with a band scale for the x-axis and a linear scale for the y-axis. The code loads CSV data via `d3.csv`, then creates rectangular marks using `Marks.js`, with axes built through custom `AxisBottom` and `AxisLeft` components. Each bar includes a native SVG `<title>` tooltip showing the exact thumb count.

Loading thumbnail…

Bars

This visualization plots the number of “thumbs up” each user review received against its row index in a dataset of Google Play reviews for the Oppenheimer mobile app. It renders the data as green circular points rather than traditional bars, using D3 scales and axes, with hover interactions that enlarge points and clicks that select and dim unselected points. The React component manages state and dimensions, while D3’s CSV loader, linear scales, and axis generators handle data parsing and chart rendering.

Loading thumbnail…

App_Sentiments

This dashboard fetches CSV sentiment data from a GitHub raw URL and presents it through summary cards, an SVG bar chart, and an interactive data table. Using the Fetch API and a custom CSV parser, the application calculates aggregate metrics and renders randomized sample bars as placeholder visualizations, while CSS grid and flexbox handle the responsive layout. The chart is built with native SVG elements manipulated via JavaScript, and the table includes hover-highlighted rows for readability.

Loading thumbnail…

Fork of HTML Starter

This visualization displays the relationship between hours studied and exam scores as a scatterplot of blue circles, with the average exam score shown in a summary box above the SVG. The code loads a CSV file from GitHub using `d3.csv`, converts the numeric fields with the unary plus operator, and computes the mean via `d3.mean`. It binds the parsed data to circles using `selectAll` and `data().enter().append`, positioning each point along the x-axis by index and mapping exam scores to the y-axis with a fixed scale.

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive dashboard demonstrates a CSV data uploader with a clean, responsive interface. Users select a local CSV file and upload it to display the contents in an HTML table. The application uses the browser's FileReader API to parse the CSV data client-side and dynamically generates table rows, while the D3-free JavaScript code handles error validation and HTML escaping. The table includes a gradient-styled header and hover effects, with all SVG icons and styling rendered using standard HTML/CSS.