ianjwo

@ianjwo·9 public vizzes

Fork of Bar Graph - New York Homeless Population (2009-2012)

This visualization shows New York’s unsheltered homeless population from 2009 to 2012, grouped by borough and location (surface, subways, and total). Each year is represented by a distinct colored bar within a grouped bar chart, with axes and a legend. Built with d3.csv, scaleBand, scaleLinear, scaleOrdinal, axisLeft, and axisBottom, it uses SVG rectangles for bars and renders the full dataset from a CSV. Colors encode years via a ordinal scale, and a legend maps hues to each year.

Nov 19, 2022

Loading thumbnail…

Fork of Bar Graph - New York Homeless Population (2009-2012)

This chart displays New York's homeless population from 2009 to 2012, breaking down counts by borough (Manhattan, Bronx, etc.) and by location category (Surface, Subways, Total Unsheltered) for each year. The data is read from a CSV file using `d3.csv`, and bars are rendered in SVG using `scaleBand`, `scaleLinear`, and `scaleOrdinal` for positioning and color coding by year. Axes are added with `axisLeft` and `axisBottom`, and a color legend distinguishes the four years.

Nov 19, 2022

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of an Iris parallel coordinate plot visualizes the classic Fisher iris dataset, encoding four flower measurements as connected lines across vertical axes. Each line represents a single sample, colored by species using a custom `colorMap`, with a legend shown in the corner. Users can drag the axis labels to reorder the dimensions; during the drag, lines and axes are repositioned dynamically, and upon release, a transition smoothly animates them back to their original order. The implementation uses D3 v5's `scalePoint`, `scaleLinear`, `axisLeft`, and `line` generators, with SVG rendering and custom drag interaction handling.

Oct 18, 2022

Loading thumbnail…

Fork of Iris parallel coordinate plot

This interactive parallel coordinate plot visualizes the classic Iris flower dataset, showing how four measurements (petal length, petal width, sepal length, sepal width) vary across three species. Users can drag any vertical axis to reorder the dimensions, with the polygonal lines re-rendering dynamically. Hovering a line highlights its species while dimming others. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scalePoint for axes, d3.drag for interaction, and color-coded SVG paths with d3.line.

Oct 18, 2022

Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris flower dataset, letting users select which measurements (sepal length/width, petal length/width) map to the x- and y-axes via dropdown menus. It colors each point by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with red, blue, and green, and includes a legend. Built with D3 v5, the visualization renders as SVG with animated transitions that grow circles from a central point over two seconds. It uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom with gridlines.

Sep 29, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through four feature combinations on the x-axis while mapping species to color. It uses D3 v6 with a reusable scatter plot module, SVG rendering, and a `setInterval` to update the visualization every few seconds. The code leverages `d3.csv` for data loading, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes, plus manual legend and label elements.

Sep 29, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which numeric columns to display on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while a custom `dropdownMenu` component handles the select elements. Circles animate into position over two seconds with a staggered delay, and axis labels update to reflect the chosen variables.

Sep 25, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple web page displaying the text “Hello HTML!” centered and styled with a large font size. It demonstrates the basic structure of an HTML document that uses CSS for styling and JavaScript for potential interactivity. The page is defined entirely within a single `index.html` file, incorporating internal CSS rules and JavaScript code. This serves as a minimal template for creating web-based visualizations, using standard web technologies without any external libraries or frameworks.

Sep 25, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository's Auto MPG data set. Red semi-transparent circles encode each car's two attributes on linear axes, with a title labeling the chart. The visualization uses D3 v5 functions like `csv` for data loading, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to build the scaled axes, rendered as SVG.

Sep 25, 2022