hotdoujiang

Global Terrorism Dataset Visualization

This visualization uses a bar chart to display terrorist attacks in the United States from 1975 to 2017, showing perpetrators against target types, with color encoding for weapon types. The chart reveals that Private Citizens & Property and Business are common targets across many perpetrators, while the predominance of green blocks indicates Explosives/Bombs/Dynamite as the preferred weapon. The visualization is built with the Vega-Lite API, which translates its high-level specification into Vega for rendering, and loads its data from a CSV file via d3's `csv` method. Tooltip interactions are handled through the vega-tooltip library.

Nov 6, 2019

[VizStudy]Add a menu on polished scatter plot

This interactive scatter plot visualizes the 2019 World Economic Freedom Index dataset, showing correlations between eight economic freedom attributes. Users select X and Y axes via dropdown menus to explore relationships between variables like Property Rights and Tax Burden. The visualization is built with React and d3.scaleLinear for axes and scales, rendering SVG circles with tooltips. Data loads through d3.csv, while custom AxisBottom, AxisLeft, and Marks components structure the polished chart.

Nov 5, 2019

[DataVizStudy]Using Size with Points on the map

This interactive world map displays global terrorism events from 2018, using the [2018 Global Terrorism Database](https://gist.github.com/hotdoujiang/e6064faca930a996230aa4dc3ccd8db0). Each point's radius encodes the number of people wounded or killed, with color set to a semi-transparent "bloody red" to visually emphasize severity. The visualization is built with React, D3 v5, and SVG, using the `d3.geoNaturalEarth1` projection for the map and `d3.geoPath` to render land boundaries and graticules. Point sizes are scaled via `d3.scaleSqrt` with a maximum radius of 13 pixels.

Nov 5, 2019

[DataVizStudy]Points on the map

This visualization displays the world’s country boundaries alongside 2018 global terrorism events, plotted as semi-transparent red points. Using a Natural Earth projection, it renders landmasses, graticules, and interior borders, then positions each event circle via the d3.geoNaturalEarth1 projection and d3.geoPath. The map is built with React, pulling geographic data from World Atlas TopoJSON and event coordinates from a CSV of the Global Terrorism Database.

Nov 4, 2019

[VizStudy]Week7: Scatter plot with color legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width to reveal species clusters. The visualization uses d3.scaleLinear for axes and d3.scaleOrdinal with a three-color palette to distinguish Iris species. Built with React and rendered as SVG, the plot encodes species through color, with each circle representing a flower sample. Hovering over a point displays its precise value via an SVG title tooltip. The code imports functions like useData for CSV loading and uses d3's extent for domain calculation, with axis labels styled using the Poppins font.

Oct 28, 2019

[Version3]Economic Freedom Index Radar Chart-China vs US

This interactive radar chart compares Economic Freedom Index scores for China and the United States across twelve indicators. A dropdown menu lets users switch between the two countries, revealing the respective data as a colored polygon. The visualization is built with React and D3.js, adapting Nadieh Bremer’s radar chart design. It uses `d3.scaleOrdinal` for color and a custom `RadarChart` function to render circular axes, levels, and area blobs. The data is embedded directly in the code, with values normalized to a 0–100 scale.

[VizStudy]Week6: Add a menu

This interactive scatter plot visualizes the 2019 World Economic Freedom Index dataset, allowing users to explore relationships between different economic indicators. Dropdown menus let viewers dynamically select which attribute appears on each axis, with the chart updating the scatter plot, axis labels, and scale accordingly. The visualization uses React components with D3 v5 scales (`scaleLinear`, `extent`, `max`) to map data to SVG positions, while `useState` and `useEffect` hooks manage state and data loading. Axis components and marks are rendered as reusable React functional components, with tooltips showing formatted values via the `format` function.

[VizStudy]Week6: Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control the x and y axes. The visualization uses React's useState hook to manage selected attributes, while D3 v5 scales and SVG render the data points with tooltips. When users change a dropdown selection, the axes and labels update dynamically, and the plot redraws with the new attribute pair.

Hotdoujiang's playground

This example renders a static HTML page displaying the text “Hello HTML!” in large, centered typography. Built with React, the visualization uses plain CSS within the `style` tag to control font size and alignment, while the `index.js` file imports React without implementing additional interactive behavior. The code demonstrates a minimal setup for embedding React into a static HTML document.

[VizStudy]Week6: Menus with React

This example demonstrates a pet-selection menu built with React, allowing users to choose among Goldfish, Dog, or Cat from a dropdown. The selected value is tracked via the `useState` hook and displayed in the console, while a custom `Dropdown` component maps over option objects to render `<option>` elements. The app uses ReactDOM to render the interface, with the menu styled at a large font size using `rem` units in the HTML. It relies on React 16.9’s production UMD build and follows a starter-code pattern from a lecture.

React Starter

This example shows a minimal React application that renders the text "Hello React!!!" to the browser. It demonstrates the basic setup of a React project, using the `ReactDOM.render()` API to mount an `App` component into a root `div` element. The code imports both the core `react` and `react-dom` libraries, and the HTML file loads pre-built React and ReactDOM distributions from unpkg before executing the bundled JavaScript. The visualization does not display any data, serving purely as a starter template for React-based development.

Oct 25, 2019

Smiley Face Part II

This example uses React and D3 to render a smiley face as a scalable vector graphic. It draws a yellow head, two black eyes, and a mouth using SVG primitives. The mouth is created with D3’s `arc` generator, which produces a path with specified inner and outer radii and angular range. The face is centered within a 960 by 500 viewport, with all components positioned relative to the center using an SVG group transform.

Oct 25, 2019

[withDropDown]World Economic Freedom Index

This example visualizes the World Economic Freedom Index, plotting countries by their Tax Burden and Government Integrity scores, with color encoding by region and point size by 2019 score. The vega-lite-api specification defines the circle marks, while d3.csv loads the data from a GitHub gist. React renders a dropdown menu for attribute selection, though the main visualization runs independently. The scatterplot reveals no clear correlation between tax burden and government integrity, but highlights regional clusters: European countries (red) show low tax burden with high integrity, while Sub-Saharan African countries (green) exhibit the opposite pattern, with North Korea as an outlier.

Oct 6, 2019

World Economic Freedom Index

This visualization plots countries by their Tax Burden against Government Integrity, using circle size to reflect 2019 economic freedom scores. The scatterplot reveals no clear correlation overall, though European countries cluster with low tax burden and high integrity, while Sub-Saharan African nations show the opposite pattern; North Korea appears as an outlier with minimal taxation and low integrity. The chart is built with vega-lite-api, registering vega, vega-lite, and d3, loading CSV data via d3.csv, and applying custom axis styling for readability.

Sep 29, 2019

Untitled

This radial tree visualization displays the hierarchical relationships between world regions, subregions, and countries, with text labels sized by depth. The d3.cluster layout positions nodes radially, and d3.svg paths connect parent-child nodes with curved links. Users can pan and zoom the entire visualization using d3.zoom, which applies a transform to a container group. The code reads country data from a JSON file using d3.json, and the font sizes scale with depth via d3.scaleSqrt, creating a clear visual hierarchy.

Sep 29, 2019

[Version2]Economic Freedom Index Radar Chart-China vs US

This radar chart compares the economic freedom of China and the United States across twelve dimensions, such as property rights, tax burden, and financial freedom. Two colored polygons represent each country’s scores, normalized to percentages and visualized using D3.js version 5 with SVG rendering. The chart uses a scaleOrdinal for colors, a linear radius scale for values, and optional animations. Data comes from the World Economic Freedom Index, with China shown in gold and the US in red.

Mathematical Graphic Patterns

This animated canvas visualization displays a grid of circles that ripple outward in concentric, rotating patterns resembling a living mathematical kaleidoscope. The code, written by hotdoujiang, generates each circle’s position and radius using trigonometric functions of a continuously incrementing `time` variable, while colors shift through an RGB spectrum based on grid coordinates. The rendering uses the raw Canvas 2D API with `fillRect` to create a fading trail effect and `arc` calls to draw individual circles. The pattern adapts to the window size, recalculating dimensions and offsets as the browser resizes.

Economic Freedom Index Radar Chart-China vs US

This radar chart compares economic freedom between China and the United States across 12 indices, revealing that while the U.S. generally scores higher, China leads in fiscal health and government spending. Built with D3 v5, the visualization uses an animated, round-stroked SVG radar layout adapted from Nadieh Bremer’s design, with custom scales for percentages and interactive color encoding via `d3.scaleOrdinal`. Data is embedded directly in the script rather than imported from external files.

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. Red, semi-transparent circles encode each car’s position along the two axes, with a title and axis labels providing context. The visualization is built with d3.csv to load the data, d3.scaleLinear for the x and y scales, and d3.axisLeft and d3.axisBottom to render the axes, which include gridlines via tickSize. The SVG output is styled with CSS for circle opacity and text font sizes.

Untitled

This example shows a 12-axis radar chart comparing the economic freedom of China and the United States, using 12 indicators from the World Economic Freedom Index dataset. The chart displays two colored polygons, one for each country, overlaid on a grid of concentric levels, with axis labels and percentage values. It uses D3.js to compute the scales and paths, applying a linear radius scale (`d3.scaleLinear`) and a cardinal-closed curve (`roundStrokes`) for a smooth silhouette. The data is hardcoded as arrays of key-value pairs, and the `RadarChart` function customizes the chart’s dimensions, margins, and color scheme.

Ramen Rating Viz

The Ramen Rating Viz displays ramen scores by country and style, using circle size and y-axis position to encode star ratings while color distinguishes packaging types like pack or bowl. The scatterplot reveals that Japan, Taiwan, and the US have ratings spanning from below 0.5 to 5.4, with most circles in light red and purple indicating popular styles. Built with the vega-lite-api, it registers vega and vega-lite and renders via vega-tooltip for interactive inspection, pulling CSV data from a GitHub gist. Custom configuration adjusts axis ticks and label styling for readability.

Untitled

This bar chart displays the 2019 Economic Freedom Index, with countries ranked by population and colored by religion. The visualization is built using the Vega-Lite API, which constructs a bar mark with categorical country fields, quantitative population values, and religious categories for color encoding. Tooltips provide additional population details on hover. The data is fetched via d3.csv from a GitHub Gist, and the chart is rendered responsively using Vega-Lite’s autosize fit setting, with custom axis and label styling from the provided configuration.

Untitled

This scatterplot shows the relationship between perpetrator groups, target types, and the number of injured people in U.S. terrorism incidents. The visualization uses a circle mark with fixed size and semi-transparency to reveal overlapping points. It encodes the categorical fields PERPETRATOR 1 and TARGET TYPE 1 on the x- and y-axes, and the quantitative INJURED field on size. Built with the Vega-Lite API, the chart reads data from a CSV file via d3.csv and renders through the Vega and Vega-Lite renderers.

Untitled

This example visualizes a small network of three nodes connected by distinct links, with each node labeled by name. The nodes are positioned in a triangular layout and colored differently to highlight their relationships. The visualization uses Vega-Lite’s declarative specification, with a custom config that disables axis domains, applies light gray tick marks, and increases label and title font sizes for readability. The dark text color is defined in a JavaScript config object, and the chart’s axes and labels are rendered using Vega-Lite’s default rendering pipeline.

Hello Vega Lite API

This example maps zip code locations across the United States as an interactive canvas visualization. It uses the Vega-Lite API (vl) to define a circle mark with longitude and latitude encodings, projecting the data with the Albers USA projection. The D3 library supplies a categorical color scale generated from hue, chroma, and lightness (hcl) values, assigning a distinct color per first two digits of each zip code. The final Vega view is rendered to a HiDPI canvas with a scale factor of three for retina displays. The underlying data is loaded from a remote CSV of zip codes.

Sep 12, 2019

Ramen Rating

This example displays a summary of a ramen-rating dataset, reporting its approximate file size in kilobytes, number of rows, and number of columns in large text. It loads the CSV from a GitHub gist using `d3.csv`, then formats the parsed data with `d3.csvFormat` to measure its size. The code also includes commented alternatives using `fetch`, `async/await`, and `d3.csvParse`, though only the primary `d3.csv` path runs. The visualization is minimal, focusing on data loading and parsing rather than graphical encoding.

Sep 5, 2019

2019 Index of Economic Freedom

This example displays summary statistics for the 2019 Index of Economic Freedom dataset, showing file size in kilobytes, row count, and column count. The code loads a CSV file from a GitHub gist using `d3.csv` and formats the parsed data with `d3.csvFormat` to calculate the size. It then updates the text content of an HTML `<pre>` element to present the metrics. The example demonstrates basic data loading and parsing with D3 v5, with commented alternatives using `fetch`, `async/await`, and `d3.csvParse`.

Sep 5, 2019

[GTD]Loading and Parsing CSV Data

This example demonstrates a basic data-loading workflow for a CSV file containing 1985-2017 United States terrorism incident records. It displays the file size, row count, and column count for the dataset in large text. The code uses `d3.csv` to fetch and parse the remote CSV, then `d3.csvFormat` to calculate the data size in kilobytes. It also shows commented alternatives using the Fetch API with `d3.csvParse`.

Sep 5, 2019