jt23346059@gmail.com

@jennytenghere·10 public vizzes

Fork of Scatter Plot with Color

A scatter plot of the Iris Dataset maps sepal length to petal length, with each of the three species (setosa, versicolor, virginica) encoded by a distinct color from the categorical `d3.scaleOrdinal` scheme. The visualization includes labeled x- and y-axes, a color legend with tick marks for species names, and circular markers rendered as SVG elements. Built with D3.js, the code uses `d3.extent`, `d3.scaleLinear`, and `d3.schemeCategory10` to scale data and colors, while custom modules `axes.js` and `colorLegend.js` construct the coordinate system and legend via selection joins.

Sep 12, 2024

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, letting users explore relationships between four numeric flower measurements. Two dropdown menus, built with the custom `dropdownMenu` module, allow the user to independently select which column maps to the X and Y axes. The visualization is rendered in SVG using d3.v5, with circles smoothly animating to their new positions over a two-second transition. Axes are generated with `axisBottom` and `axisLeft`, which are part of the d3 scale and axis API, providing grid lines and labels.

Sep 12, 2024

Loading thumbnail…

Fork of Surendar Bar Chart

This horizontal bar chart compares the populations of ten countries, using a linear scale for population values and a band scale for country names. The visualization renders as SVG rectangles filled with steelblue, with axes generated via `axisLeft` and `axisBottom`. The code loads data from a CSV file, multiplies each population value by 1,000, and applies a margin-based layout using `scaleLinear`, `scaleBand`, and D3 v5’s `select` and `csv` methods.

Sep 12, 2024

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, letting viewers explore relationships between numerical attributes. Users select which columns map to the X and Y axes from dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` to animate circles to their new positions when axes change. Data is loaded via `csv`, and the implementation uses an SVG rendering approach with reusable menu and scatter plot components.

Sep 12, 2024

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes data from the Auto MPG data set, with dropdown menus allowing users to select which car attributes map to the X and Y axes. The visualization uses D3.js (v5) to render an SVG with animated circle transitions and axis updates when menu selections change. The dropdown menus are constructed using a reusable `dropdownMenu` function built on D3's selection API, while the scatter plot itself is created with the `scatterPlot` module using `scaleLinear` for scaling, `axisLeft` and `axisBottom` for axes, and `transition` for animated point movement.

Sep 12, 2024

Loading thumbnail…

Fork of Scatter Plot with Color

Sep 12, 2024

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religion breakdown for the world’s 20 most populous countries, with each bar segmented by faith and lengths scaled to population. Hovering over a segment reveals a tooltip with the religion, country, and population, while hovering over the color legend highlights matching segments by dimming all others. Built with D3 v3, the chart uses `d3.layout.stack` for layering, `d3.scale.ordinal` for country bands, and `d3.legend.color` for the interactive legend. Data comes from Pew Research’s Global Religious Landscape, processed and aggregated for this visualization.

Sep 12, 2024

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. It uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes. Circles represent individual car models, with a red fill and partial opacity, conveying density. The code loads data via `csv` and builds the chart using margins, a title, and axis labels.

Sep 12, 2024

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 data set. It uses the D3 v5 library, specifically `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles to represent each car with a red, semi-transparent fill. The plot includes clearly labeled axes and a title, all rendered with a custom CSS styling for text and tick elements.

Sep 12, 2024

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let users dynamically select which data columns map to the X and Y axes. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scaled axes, while circle positions transition over 2 seconds with staggered delays. The custom `dropdownMenu` utility manages the HTML select elements, and axis labels update to reflect the selected columns.

Sep 12, 2024