N

NTCHANG1289

@NTCHANG1289·29 public vizzes

Loading thumbnail…

Data Visualization Project

This interactive visualization maps the locations of fast food restaurant chains across the United States, using a geographic projection with `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to pan and zoom. Clicking a state or a color legend item filters and animates a bar chart showing the top five chains in that region, built with `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`. Points and bars are rendered as SVG elements with smooth `transition()` animations, while a clickable "close chart" button toggles the chart’s visibility.

Loading thumbnail…

Data Visualization Project

This interactive visualization maps the locations of major fast food restaurant chains across the United States, with each dot colored by brand. Clicking a state zooms the map and displays a bar chart ranking the top five chains in that state by count, while a color legend filters the map by selected brand. The project uses D3 v5 with `geoAlbersUsa` and `geoPath` for the map, `scaleBand` and `scaleLinear` for the bar chart, and animated transitions for chart updates. Data comes from a CSV of fast food restaurant locations loaded via `d3.csv`, with U.S. state boundaries from a TopoJSON file.

Loading thumbnail…

Data Visualization Project

This visualization maps fast food restaurant chains across the United States using a topojson file of U.S. states and a CSV dataset of restaurant locations. A dropdown-style color legend filters the map by chain name, while clicking any state triggers a bar chart showing the top five chains in that province. The chart uses d3.scaleBand for bars and animates transitions, with a close button to hide the chart. Map and chart visuals both leverage d3.geoPath, d3.zoom, and d3 transitions for interactivity.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates special cases of the General Update Pattern for animated data transitions. It shows a bowl of fruits—apples and lemons—as colored circles with labels, where fruits are added, removed, or swapped over time. The visualization uses D3 v5’s selection chaining, merging enter and existing elements, and applies sequential transitions to animate opacity, color, and text styles. The SVG rendering uses `scaleOrdinal` for color and radius scales, with `.transition()` to choreograph fading effects and element removal, highlighting how D3 handles updates, exits, and keyed elements.

Loading thumbnail…

Let's make a face with D3.js!

This gallery example demonstrates a smiley face built with D3.js that cycles through animated transformations. The face’s circle, eyebrows, and mouth transition over time, shifting its fill color between yellow, purple, and pink while the eyebrows move and the mouth’s arc changes shape. The visualization uses D3’s `select` and `append` to manipulate SVG elements, and the `transition()` API to animate attributes. It relies on D3’s `arc` generator for the path data and SVG for rendering.

Loading thumbnail…

Life expectancy vs Happiness Score Scatter Plot

This scatter plot visualizes the relationship between life expectancy and happiness score from the 2017 World Happiness Report, sourced from Kaggle. Each green circle represents a country, plotted by its health life expectancy contribution against its overall happiness score. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the coordinates and axes, rendering as an SVG. The code loads data via `csv` from a VizHub dataset, applies numeric parsing, and styles points with opacity and a sans-serif font.

Loading thumbnail…

The top 10 largest fast food restaurant chains in the world

This bar chart displays the top 10 largest fast food restaurant chains by number of locations, using data from Wikipedia. Subway leads with 44,834 outlets, followed by McDonald’s and Starbucks. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and SVG rectangles to encode quantities. Axes are generated with `axisLeft` and `axisBottom`, and data is loaded from a CSV file.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the ten largest fast food restaurant chains worldwide, ranking them by number of locations from Subway’s 44,834 down to Hunt Brothers Pizza’s 7,300. The visualization uses D3 version 5, reading the data from a local CSV file via the `csv` import and selecting the SVG element with the `select` method. Each chain is represented as a steel-blue rectangle rendered in an SVG, with the data sourced from Wikipedia’s list of the largest fast food restaurant chains.

Loading thumbnail…

US fertility rate Line Chart

This line chart visualizes the US fertility rate from 1960 to 2016. The data, sourced from Kaggle’s World Bank dataset, is loaded via the `csv` function from D3 v5 and rendered as an SVG. The chart uses `scaleTime` and `scaleLinear` to map years and rates, with an axis on the left and bottom. A smooth line generated by `line` with `curveBasis` shows the declining trend, while styled tick lines and labels are applied via CSS.

Loading thumbnail…

Re-create Marks and Channels Graphic

This example reproduces a marks and channels graphic as a static SVG. It displays three scatterplots that demonstrate how visual encodings, such as position, color, and size, map to data values. The plots use grey axes and reference lines, with blue circles as the primary marks. The SVG is constructed with nested `<g>` groups and `transform` attributes to create the layout. The code uses standard SVG elements like `circle`, `line`, and grouping, with styling defined in the CSS file. The rendering is purely SVG, without any JavaScript libraries or data processing.

Loading thumbnail…

The top 10 largest fast food restaurant chains in the world

This bar chart displays the number of locations for the top 10 largest fast food restaurant chains worldwide, with Subway leading at over 44,000 outlets. Using D3 v5, the code loads data from a CSV file sourced from Wikipedia and renders an SVG with green horizontal bars. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. The bars visually compare chain sizes from Subway down to Hunt Brothers Pizza.

Loading thumbnail…

Interaction

A world map renders countries in light green with black outlines on a blue sphere, using D3 v5 with a geoNaturalEarth1 projection. Users hover over any country to highlight it pink, while clicking a specific country isolates that selection and removes highlights from others. The visualization loads geographic data from a TopoJSON world atlas and merges it with a TSV file for country names. Code employs d3.geoPath, d3.zoom for panning, and CSS classes to toggle the selected country’s fill color.

Loading thumbnail…

Cars colorlegend

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing horsepower versus weight for individual cars. Each point’s color encodes the number of cylinders, using an ordinal color scale with a categorical palette, and the legend is generated via the d3-legend library’s `legendColor` function. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while margin conventions and SVG circles position the data. The visualization relies on D3 v5 for scales, extents, and SVG rendering, with parsed numeric fields from the CSV source.

Loading thumbnail…

Project in progress - Week 1

This example presents the initial stage of a state-level map visualization. It displays a U.S. map with light green states, which turn red upon hover, alongside two blue circles marking specific coordinates. The map is built using the D3.js v5 library, employing `d3.geoPath` and `d3.geoAlbersUsa` for the projection and shape rendering. The visualization supports zooming and panning through the `d3.zoom` interaction, and it loads geographic data from a remote JSON source.

Loading thumbnail…

Project in progress - WEEK 2

This example displays a map of the United States with red points marking fast food restaurant locations, overlaid on a state boundary layer. The map supports zooming and panning, and states highlight on hover. It uses D3 v5 with `d3.geoAlbersUsa` for projection, `d3.geoPath` to render TopoJSON state outlines, and `d3.zoom` for interaction. Restaurant coordinates are loaded from a CSV file and plotted as SVG circles.

Loading thumbnail…

The relations between Happiness Score and variables Scatter Plot dropdownMenu

This interactive scatter plot uses a dropdown menu to explore the relationship between a chosen variable and the Happiness Score from the 2017 World Happiness Report on Kaggle. The D3.js v5 code (using `scaleLinear`, `axisLeft`, and `axisBottom`) renders a circle per country on an SVG canvas. Selecting a new option triggers a callback that re-renders the chart, updating the x-axis scale, tick marks, and circle positions while keeping the y-axis fixed on happiness.

Loading thumbnail…

Project in progress

A choropleth-style map of the United States plots fast-food restaurant locations as colored dots, with a legend for chains like McDonald’s and Subway. Clicking a state triggers a bar chart ranking the top five chains there, while hovering highlights states and zooming pans the map. Built with d3.v5, it uses geoAlbersUsa, geoPath, and zoom for the map, and scaleLinear, scaleBand, and transitions for the animated chart. Data loads via CSV, with TopoJSON for state boundaries.

Loading thumbnail…

Project in progress - Week x

This map shows the locations of fast food restaurants across the United States, with each restaurant colored by name and overlaid on a state boundary map. Users can pan and zoom the map, and hovering over states highlights them. The visualization uses d3.geoPath with the geoAlbersUsa projection to render states from TopoJSON data, and d3.zoom for interaction. A color legend is included to explain restaurant name colors, and the dataset comes from a CSV of FastFoodRestaurants_New.

Loading thumbnail…

Life expectancy vs Happiness Score Scatter Plot with menus

This scatter plot displays the relationship between Life Expectancy and Happiness Score using data from the 2017 World Happiness Report on Kaggle. It shows how these two variables correlate across countries, with each circle representing a nation. The visualization uses d3.v5 with SVG rendering, employing scaleLinear for both axes and axisBottom/axisLeft for tick marks. The code loads CSV data, parses numeric values, and renders circles with fixed radius, green fill, and opacity, while a dropdown menu component is included but not implemented.

Loading thumbnail…

Cars colorlegend

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between car cylinders and miles per gallon, with points colored by species. The visualization uses D3 v5 to create an SVG rendering, employing `d3.scaleLinear` for both x and y axes, `d3.scaleOrdinal` with the `schemeCategory10` color palette, and `d3.legendColor` from the d3-legend library to generate a color legend. Axis labels, tick styling, and legend text are styled via external CSS for a clean, readable presentation.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between family and freedom scores in the 2017 World Happiness Report, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. Each green semi-transparent circle represents a country, with axes labeled “family” and “freedom” and a title noting horsepower versus weight. The code uses d3.csv to load data, d3.scaleLinear with d3.extent for scaling, and d3.axisLeft and d3.axisBottom for axes. It renders circles as SVG elements, with tick lines, axis labels, and a title styled via CSS.

Loading thumbnail…

unidirectional data flow

This example shows a world map where clicking a country highlights it in pink, illustrating unidirectional data flow through a single render function that updates the visualization. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to draw country outlines from TopoJSON data (world-atlas 50m), and `d3.zoom` for panning and zooming. The code loads geographic data via `d3.json` and country names via `d3.tsv`, then binds click events to update the selected country state. SVG paths represent countries, with a blue sphere as the ocean backdrop.

Loading thumbnail…

unidirectional data flow

This example shows a zoomable world map where clicking a country highlights it in pink, demonstrating unidirectional data flow through a simple render function. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw country boundaries from TopoJSON data loaded via `d3.json`, with country names from a TSV file. The view updates through an `onClick` handler that toggles a CSS class, while `d3.zoom` applies pan and zoom transformations to the map group.

Loading thumbnail…

Fast Food Restaurants Across America_1

This example presents a console-style summary of a dataset containing 10,000 fast food restaurant locations across America. The visualization displays the total row count, column count, file size in kilobytes, and a JSON-formatted preview of the first ten records. The code uses D3’s `csv` API to load the remote CSV file and `select` to access the DOM, appending multiple `pre` elements to the body. The data originates from a Kaggle dataset, and the minimal, monochrome styling with green text on a black background evokes a terminal interface.

Loading thumbnail…

World Bank Data

This example loads a World Bank dataset containing country population, fertility rate, and life expectancy from 1960 to 2016, then displays summary statistics and the first ten rows as JSON-formatted text. The visualization uses D3 v5, specifically the `csv` and `csvFormat` functions, to fetch and parse the remote CSV file from Vizhub, and `select` to append `<pre>` elements to the page body. It reports the row count, column count, and data size in kilobytes before printing a preview of the data.

Loading thumbnail…

Fast Food Restaurants Across America_3

This gallery example displays the first 10 rows of a 10,000-record dataset on fast food restaurant locations, alongside summary statistics such as row count, column count, and file size in kilobytes. The visualization uses the `select` and `csv` functions from the d3.v5 library to fetch and parse the CSV data from an external Kaggle-hosted source. It then appends preformatted text blocks to the document body, styling the output with monospaced text on a black background with green terminal-like aesthetics, as defined in the accompanying stylesheet.

Loading thumbnail…

World Happiness Report

This example displays the World Happiness Report dataset, summarizing its size and previewing the first ten rows. It shows the number of rows, columns, and file size in kilobytes, followed by a JSON-formatted listing of the initial data entries. The page renders this textual information in a terminal-style interface with a black background and green monospace text. It uses D3 v5 functions such as `select`, `csv`, and `csvFormat` to load and process the CSV data from a remote Kaggle source, then appends the results as `<pre>` elements to the body.

Loading thumbnail…

Fast Food Restaurants Across America_2

This example displays basic dataset information and a preview of the first 10 rows from a CSV file containing 10,000 fast food restaurant locations across America. It uses D3 v5’s `csv` method to load the data, then appends `<pre>` elements to the body showing the row count, column count, file size in kilobytes, and a JSON-formatted sample of the records. The visualization relies on D3’s `select`, `csv`, and `csvFormat` APIs, with styling applied via CSS.

Loading thumbnail…

Data Table Summary

This example summarizes a population dataset of the ten most populous countries in 2018, sourced from the United Nations World Population Prospects 2017. It displays a plain-text report showing the row count, column count, and dataset size in kilobytes, followed by the first ten rows in JSON format. The code uses d3.csv to load the data, d3.csvFormat to calculate its byte size, and d3.select to append the textual output to the page.