NYCUBK201

@NYCUBK201·17 public vizzes

Fork of 2015 Internet Users World Map

This world map visualizes internet usage per 100 people across countries in 2015, using a green color scale to represent percentage ranges from 0–20% to 80–100%, with gray for missing data. Data comes from the Kaggle Internet Users Dataset, loaded via `d3.csvParse`. The map, rendered with `d3.geoPath` and a Natural Earth projection, supports hover tooltips showing country names and percentages, plus zooming via `d3.zoom` with a bounding-box transform. A color legend built with D3’s `scaleOrdinal` and `schemeGreens` clarifies the ranges.

Dec 8, 2023

Loading thumbnail…

Prototype

This scatterplot displays the classic Iris flower dataset, allowing users to compare any two measured attributes (sepal length, sepal width, petal length, petal width) against each other. Points are colored by species (setosa, versicolor, virginica) according to CSS classes. The visualization uses D3 v5 with selectors, scales, and axes from the `d3` module. Two dropdown menus dynamically update the plot's x- and y-axis mappings, while the underlying data is loaded from a CSV file.

Sep 22, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays a stylized smiley face drawn on an SVG canvas, with eyebrows that animate in a repeating up-and-down motion. Built using D3.js v5, the code constructs the face by appending circle, rect, and path elements to an SVG group, and drives the animation with the `transition` API to move the eyebrow group’s `transform` attribute over two-second intervals. The mouth is rendered using the `arc` generator from d3, specifying inner and outer radii and angle parameters.

Sep 22, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to choose which numeric measurements appear on the x- and y-axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom/axisLeft with tick marks. Circles are colored by iris species (setosa, versicolor, virginica) through CSS classes, with a legend overlay. The code utilizes d3-selection and d3-transition APIs within an SVG rendering approach.

Sep 21, 2023

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples rendered as red circles sit in a row, with one highlighted by a black stroke when selected. Clicking any circle updates the selected fruit, which is tracked via React’s `useState` hook. The visualization uses React and D3’s `scaleOrdinal` to map fruit types to colors and radii, with SVG circles for rendering. D3 v5 and React 16.8 are loaded from CDNs, and styled by a simple CSS reset.

Sep 21, 2023

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The SVG rendering positions red semi-transparent circles for each vehicle, with labeled axes and a title. Using D3 v5, the code employs `scaleLinear` for scaling, `extent` for domains, and `axisBottom`/`axisLeft` with tick marks to build the chart. Data is loaded via `csv` and coerced to numeric values before rendering, with margins and `g` elements managing layout.

Sep 21, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to map to the x- and y-axes. The visualization uses d3.scaleLinear and d3.axisBottom/axisLeft to render axes, while circles animate into position via d3 transitions. The code implements a custom dropdownMenu component and a scatterPlot function that updates axes and data points when menu selections change, rendering as SVG.

Sep 21, 2023

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, mapping sepal length and petal length on the x- and y-axes while coloring each point by species. A color legend distinguishes setosa, versicolor, and virginica flowers. Built with D3 v7, the visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 to position and color the circles. Data loads asynchronously from a CSV file using d3.csvParse, and the axes and legend are generated through custom reusable functions leveraging d3.axisLeft, d3.axisBottom, and selection.join.

Sep 21, 2023

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

A scatter plot of the Iris Dataset, colored by species with a legend. The visualization uses D3's `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and `selection.join` to handle data binding. Axes and the color legend are rendered via reusable modules, while data is loaded from a CSV using `csvParse`.

Sep 21, 2023

Loading thumbnail…

Fork of Scatter Plot with Color

Sep 21, 2023

Loading thumbnail…

Iris Dataset Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Three flower species are color-coded in the SVG output. Dropdown menus dynamically change the axes, and D3 transitions animate the points to their new positions. The code uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.select` to manage the interactive controls.

Sep 21, 2023

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies using color-coded countries, with an interactive legend that filters the map by clicking on a category while dimming non-matching regions. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `scaleOrdinal` with `schemeSpectral` for coloring, and `zoom` for panning. Hovering reveals country names via `title` elements. Data comes from the world-atlas TopoJSON dataset, enriched with a TSV file of economy classifications. The SVG rendering synchronizes legend and map states through shared `selectedColorValue` events.

Sep 20, 2023

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes global income groups using a natural Earth projection, coloring each country according to its income classification. The map is rendered with SVG paths using `d3.geoPath` and `geoNaturalEarth1`, with country data loaded from TopoJSON and TSV files via the world-atlas package. A custom color legend component displays the ordinal color scale, which uses `scaleOrdinal` with a spectral scheme. The visualization supports pan and zoom through `d3.zoom`, and hover interactions highlight individual countries.

Sep 20, 2023

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses d3.scaleLinear and d3.scaleBand to map population values and country names, with d3.axisLeft and d3.axisBottom for custom axes, including tick formatting that converts billions to abbreviated labels. The SVG rendering applies custom margins, tick lines, and axis labels, with data loaded via d3.csv and population values multiplied by 1000.

Sep 18, 2023

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates how an SVG visualization can automatically resize to fill its container. It renders two green, semi-transparent lines forming an X that spans the full width and height of the available space. The code uses d3.v5 to select the chart div and append an SVG element, then a `redraw()` function extracts `clientWidth` and `clientHeight` from the container to update the SVG’s dimensions and line coordinates. A window `resize` event listener triggers this function, ensuring the visualization always matches the browser’s viewport size.

Sep 18, 2023

Loading thumbnail…

HTML Cars Report

A plain HTML page titled "Cars Report" displays a static list of three used vehicles, each with a model year, name, and price. The page presents the data as a simple bulleted list, with the first item—the 2012 Nissan Leaf—highlighted in red via the CSS class `.highlighted`. The rendering relies on basic HTML `<ul>` and `<li>` elements, styled by an external `styles.css` file that sets a large monospace font for all body text. No JavaScript, dynamic graphics, or visualization libraries are used, and the car data is hardcoded directly in the HTML markup.

Sep 17, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered message reading “Hello HTML!” using a plain HTML document with embedded CSS and JavaScript. The page’s single visual element is a styled `<div>` whose font size is set to 13em via the `.message` class, aligning it horizontally with `text-align: center`. The code demonstrates basic web rendering through standard HTML markup and CSS styling, with no external libraries or data sources. It serves as a minimal starter template for understanding how HTML and CSS work together to present static text content in a browser.

Sep 17, 2023