wangjonathan

@wangjonathan·14 public vizzes

Fastfood Scatter Plot With Menus, Legend, and Tooltips

This interactive scatter plot displays nutritional data for McDonald’s menu items, sourced from a McDonald’s CSV dataset. Users can select which two nutritional variables to compare via dropdown menus, with each category colored using `d3.scaleOrdinal` and a clickable legend. The chart includes tooltips for point details, and a brushing interaction with `d3.brush` allows zooming into a region. A coordinated data table and parallel coordinates chart are also linked, updating based on selections with SVG and canvas rendering.

Mar 6, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the brand values of the world’s top 10 most valuable companies in 2018, using data from the Inc. article “The 10 Most Valuable Brands in 2018.” The visualization encodes value on the horizontal axis with a linear scale and company names on the vertical axis using an ordinal band scale. Built with D3 v5, it renders company names and values as SVG rectangles, axes, and labels via `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The chart populates from a local CSV file, with values multiplied by one million for display.

Nov 8, 2018

Loading thumbnail…

Fastfood Scatter Plot With Menus, Legend, and Tooltips

This interactive scatter plot visualizes nutritional data for McDonald’s menu items, sourced from a CSV hosted on VizHub. Users select which two nutritional attributes (e.g., Calories, Sodium) to compare using dropdown menus, while colored circles represent item categories (Beef, Chicken, etc.). A clickable color legend filters the data, and hovering over a circle reveals a tooltip with the item’s name, category, and values. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition()` for animated circle updates, with SVG rendering and interactive menus.

Nov 7, 2018

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes McDonald’s menu items, plotting calories against protein with each point colored by food category. Users can click the color legend to highlight a specific category, dimming other points, while hovering over a circle displays a tooltip with item details. The visualization is built with D3 v5, using `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, and data is loaded from a CSV via `d3.csv`. The chart includes interactive dropdown and legend components, rendered as SVG with mouse event handlers.

Nov 7, 2018

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries with hover and click interactions. Hovering highlights a country and displays its name in a large text label above the map, while clicking locks the selection and turns the country red. The visualization uses D3 v5 with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` to render and manipulate the SVG projection, pulling geographic data from TopoJSON world-atlas files.

Nov 7, 2018

Loading thumbnail…

Fastfood Scatter Plot

This scatter plot visualizes nutritional data for fast food menu items, plotting calories against protein content. Each circle represents a menu item, colored by its food category using a categorical color scale. The visualization includes labeled axes, grid lines, and a clickable legend for category selection. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs. Data is loaded via D3's `csv` function from a McDonald's nutritional dataset (2017). The SVG rendering includes axis tick marks, axis labels, and a title, with legend items that respond to click events.

Oct 31, 2018

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for entering, updating, and exiting elements. It shows a bowl of fruit where apples are added, removed, and replaced with lemons over time, with transitions animating position and opacity changes. The code uses `d3.scaleOrdinal` for color and radius mappings, `selection.merge` for combining enter and update selections, and `transition.duration` for smooth animations. The visualization renders as SVG with circles and text labels inside a rounded rectangle bowl.

Sep 18, 2018

Loading thumbnail…

Total Salary in MLB from Season 13~16

This line chart visualizes the total team salaries across Major League Baseball from 2013 to 2016, aggregated by season using `d3.nest` and `d3.sum`. The chart plots season years on a time scale and salary totals on a linear scale, with a smoothed line generated by `d3.line` and `curveBasis`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with tick labels formatted via `d3.format` and `d3.timeFormat`. The data comes from Statcrunch’s MLB Team Stats 2013–2016 dataset, loaded via `d3.csv`.

Sep 17, 2018

Loading thumbnail…

Fortune 500 Area Chart

This area chart visualizes world population over time, using a smooth curved path filled in maroon against a light gray grid. The D3 v5 code loads CSV data from a VizHub dataset and parses the year as a date and population as a number. It employs `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and an `area` generator with `curveBasis` to create the filled shape. Axis labels and a title are added as SVG text elements.

Sep 15, 2018

Loading thumbnail…

Re-create Marks & Channels Graphic

This example recreates a marks-and-channels graphic by drawing a curved line through a set of six predefined points. The path uses D3’s `line` generator with `curveCardinal` interpolation to produce a smooth spline, while small circles mark each data point. The code selects the SVG `path` and appends `circle` elements for every point, using raw coordinate arrays from the dataset. Rendering is done with D3 v5 and SVG, with the line styled via CSS as a gray, unfilled stroke.

Sep 10, 2018

Loading thumbnail…

Data Table Summary

This example reads a CSV file containing the 2017 Fortune 500 company data and displays a concise summary of the dataset. It shows the total number of data rows, the number of columns, and the approximate file size in kilobytes. The first ten rows are then printed as formatted JSON for inspection. The code uses the d3.csv function to parse the data, d3.csvFormat to calculate the data size, and d3.select to append the text elements to the page.

Sep 1, 2018

Loading thumbnail…

Data Table Summary

This visualization displays a plain-text summary of a dataset containing nutritional information for fast food items in the US, such as row count, column count, and file size. It also prints the first 10 rows of the data as formatted JSON. The code uses `d3.csv` to load the data from a CSV file, then appends the summary and preview to the page using D3’s selection and `append` methods, with styling applied via CSS.

Sep 1, 2018

Loading thumbnail…

Data Table Summary

This example displays a summary of an MLB team statistics dataset from 2013–2016, sourced from Statcrunch. It shows the total number of rows, columns, and file size in kilobytes, followed by the first ten rows of data formatted as JSON. Using D3 v5, the visualization loads the CSV data with `d3.csv` and `csvFormat`, then appends the summary and preview to the page as `pre` elements. The black background and green monospaced text evoke a terminal interface.

Sep 1, 2018

Loading thumbnail…

Let's make a face with D3.js!

A smiley face composed of SVG circles and a path mouth is drawn with D3.js, then the circle and mouth transition colors and rotate while the left eyebrow rotates. The example demonstrates fundamental DOM manipulation and animation using d3-selection, d3-arc, and transition methods, with hardcoded coordinates rather than external data. Eyebrow animation is partly commented out, so only the left eyebrow moves via a chained rotate and translate transition.

Aug 28, 2018