weny1109

Fork of Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, where each point represents a single reported migration event with its date on the x-axis and total dead or missing on the y-axis. The visualization uses React for component structure and d3-scale functions including scaleTime and scaleLog for axis construction. SVG circles render each data point with a native title tooltip, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The data is loaded asynchronously via d3.csv from a GitHub gist, with the log-scaled y-axis accommodating the wide range of casualty counts.

Aug 12, 2023

Fork of Multiple Views with Brushing

A world map displays cities with populations over 50,000 using a square-root size scale, while a histogram below shows the total dead and missing migrants over time. The visualization uses React with D3 v5, employing `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection and `d3.brushX` for interactive brushing. Users can brush the histogram to filter the map points by date range. Data comes from Simplemaps and the World Atlas TopoJSON, with migrant records from a CSV. The map circles are semi-transparent to show overlapping points.

Fork of Multiple Views Cleanup

This interactive visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances. The map projects circles scaled by the square root of the reported total, using `geoNaturalEarth1` and `geoPath` for geographic rendering. The histogram aggregates incidents by month, with a `brushX` component filtering the map data based on the selected time range. City and country boundaries come from the World Atlas TopoJSON dataset, while the migrant data is loaded via `d3.csv`.

Fork of Missing Migrants Multiple Views

This interactive visualization presents two coordinated views of missing migrant data. A bubble map displays incidents using a natural Earth projection with graticules and country boundaries from TopoJSON, where circle size reflects the total dead and missing. Below, a time-series histogram shows monthly aggregated counts using d3.bin and d3.timeMonths, with d3.scaleTime and d3.scaleLinear axes. Both views are rendered in SVG, built with React and D3 v5, pulling data from a CSV of Missing Migrants Global 2019 incidents.

Fork of Missing Migrants on a Map

This visualization combines a bubble map and a date histogram to explore the Missing Migrants dataset. A world map uses scaled circles to show the total dead and missing for each event, with circle sizes determined by a square-root scale. The lower chart displays monthly totals of dead and missing over time. The project uses React with D3 v5 for data processing and rendering, including `d3.geoNaturalEarth1` for map projections, `d3.geoPath` for drawing geographic features, and `d3.csv` to load the data.

Fork of Sized Points on a Map

This example shows a world map of migration incidents, with semi-transparent circles sized by the total number of dead and missing people at each location. The map uses a natural Earth projection with graticules and country boundaries drawn via `geoPath` and `geoGraticule` from D3 v5. Point sizes are scaled by a square-root scale (`scaleSqrt`) mapping the data attribute to a maximum radius of 15 pixels. The visualization loads data from a CSV of Missing Migrants Global data and renders all marks as SVG circles over the projected coordinates in a React component.

Fork of Missing Migrants Scatter Plot

This visualization displays a bar chart of the Missing Migrants Dataset, showing the total number of dead and missing migrants per month over time. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.histogram with d3.timeMonths thresholds to bin events by month, summing the casualties. React components render SVG rect elements for each bar, with tooltips via the title element. The visualization is drawn with D3 v5 and React 16.9, using Poppins font styling.

Fork of Working with Time

This scatter plot visualizes reported dates against total dead and missing counts from the Data Canvas Sense Your City Dataset, revealing temporal patterns in migration incidents. The visualization uses React with D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering as SVG circles with tooltips. Axes are built through reusable React components that map ticks using D3’s tick generation, while data loading employs D3’s `csv` parser with custom row formatting for date and numeric conversions.

Fork of Scatter Plot with Color Legend

This visualization is a scatter plot of the classic Iris dataset, showing petal length against sepal width. Each dot represents a flower, colored by species, with a legend on the right that maps the ordinal color scale to the three species categories. The plot is built with React and rendered as an SVG, using D3 scales for positioning and axis ticks.

Aug 5, 2023

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which numerical attributes appear on the x and y axes, while the color of each point encodes the species of the flower. The visualization is built with React and D3 v5, using SVG rendering for the axes, color legend, and data points. The D3 library provides the linear and ordinal scales, while React manages the interactive state for the menu selections. The dataset is loaded as a CSV file and mapped to numeric values.

Jul 31, 2023

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as an SVG in React, with dropdown menus that let the viewer change which flower measurements appear on the x- and y-axes. The plot uses d3.scaleLinear and d3.extent to map data to pixel coordinates, with custom React components for the axes and marks. Data is loaded as CSV via d3.csv, and each circle includes a native SVG title tooltip.

Jul 30, 2023

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, comparing sepal width against petal length for individual flower specimens. The visualization uses React components to render SVG circles, with d3-scale’s `scaleLinear` mapping data values to pixel coordinates and d3-format’s `format` function for axis tick labels. Axes are built as reusable React components, and hovering over any point reveals its exact petal length via SVG `<title>` tooltips. The design features a clean, stylized aesthetic with Poppins typography and muted teal-colored markers.

Jul 30, 2023

Menus with React

This example presents a simple pet-selection dropdown menu built with React. It defines a `Dropdown` component that maps over an array of pet options, rendering them as `<option>` elements inside a `<select>` element. The interface includes a large label and select box, with the options data hardcoded in the `index.js` file. The app is mounted to the DOM using `ReactDOM.render`, and the page loads React and ReactDOM from the Unpkg CDN, as shown in the HTML file.

Jul 30, 2023

Polished World Map

This example displays a world map using a Natural Earth projection, with graticules, landmasses, and country boundaries rendered as SVG paths. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data loaded from the World Atlas TopoJSON file, processed via `topojson.feature` and `topojson.mesh`. React manages the component hierarchy, while the `Marks` component iterates over land features and draws the sphere, graticules, land fill, and interior borders with distinct colors.

Stylized Line Chart

This chart shows a week of temperature readings in San Francisco plotted as a line with circular markers, using a time-based x-axis and a linear y-axis. Built with React and D3 v5, it employs scaleTime, scaleLinear, extent, and line generators, with custom AxisBottom and AxisLeft components rendering SVG ticks and labels. The data, loaded via d3.csv from a weekly temperature dataset, is styled with teal marks, rounded line joins, and the Poppins font.

Fork of Stylized Bar Chart

This scatterplot displays the Iris dataset, plotting sepal length against sepal width, with each point representing a flower sample. The visualization uses D3.js scale functions to map data to SVG coordinates, with React components rendering the axes and circular marks. The chart is a fork of a stylized bar chart example, adapted to show the relationship between two quantitative variables. The styling employs the Poppins font and a custom color scheme, while tooltips reveal the sepal length value for each point.

Fork of Stylized Scatter Plot

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with the country name on the y-axis and population on the x-axis, based on United Nations World Population Prospects 2019 data. The visualization is rendered as an SVG using React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom React components (`AxisBottom`, `AxisLeft`, and `Marks`) draw the axes and rectangles, while `d3.csv` loads the remote dataset and `d3.max` calculates the domain.

Jul 26, 2023

Fork of Pathetic Bar Chart

This example displays the top 20 most populous countries as a bar chart, with horizontal bars rendered as SVG rectangles. It deliberately omits axes, instead using gridlines and tick labels from `scaleLinear` and `scaleBand` to convey values. The chart is built with React functional components and hooks, while D3 v5 handles data loading via `csv`, scaling, and tick generation. Population figures come from the United Nations World Population Prospects 2019 dataset.

Jul 26, 2023

Fork of Rendering Data with React & D3

This visualization renders a radial burst of CSS named colors using React and D3. The code loads color data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute the angular segments, drawing each as an SVG `<path>` filled with its corresponding hex color value. The React app manages the data loading state and renders the SVG elements, displaying “Loading...” until the asynchronous fetch completes. The resulting graphic shows all named colors arranged in a circular pattern.

Jul 26, 2023

Fork of Vega-Lite API Template

This example uses a scatter plot to explore the relationships among automobile performance metrics, including engine displacement, horsepower, weight, and origin. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and is rendered via Vega. It loads the auto-mpg dataset using D3’s `csv` function, then encodes the data with size and color channels. The chart is configured for full-screen display with custom axis and label styling from a separate config file, and includes a tooltip showing the car name.

Jul 25, 2023

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with circles colored by region of origin and sized by vehicle weight. Built using the Vega-Lite API, it defines the visualization through method-chaining operations including `markCircle`, `encode`, and scale specifications. The example loads car data from the UCI Machine Learning Repository via d3’s `csv` function, and renders interactively with tooltips provided by the `vega-tooltip` Handler. Custom axis and label styling are applied through a shared configuration object.

Jul 25, 2023

Fork of Loading Data with React & D3

This example demonstrates a simple data-loading workflow using React and D3. It fetches a CSV file containing CSS named colors via D3’s `csv` utility and stores the parsed data in React state. While the data is loading, the page displays “Loading...”; once loaded, it shows a concise summary of the dataset, including its size in kilobytes, row count, and column count, formatted as plain text. The visualization uses React hooks (`useState`, `useEffect`) to manage asynchronous data fetching and rendering.

Jul 25, 2023

Fork of Loading and Parsing CSV Data

This visualization displays basic statistics about a CSS Named Colors CSV dataset, showing the file size in kilobytes, row count, and column count. The code uses d3.csv to load and parse the data from a GitHub gist, then calculates metrics from the parsed result. It also demonstrates alternative approaches using the Fetch API with async/await and d3.csvParse, though these are commented out. The output is rendered as large text in a pre element using vanilla JavaScript.

Fork of Smiley Face Part II

This interactive React and SVG visualization displays a single yellow circle that follows the user's mouse movements across the full browser window. The circle's position is updated through React's `useState` hook, with mouse coordinates captured by the `onMouseMove` event handler on the SVG element. Rendering is handled by ReactDOM, which renders the circle element with dynamic `cx` and `cy` attributes. The code uses the window dimensions to size the SVG canvas, and the circle has a fixed radius of 30 pixels.

Fork of Loading and Parsing CSV Data

Fork of Smiley Face Part V

A grid of eighteen yellow smiley faces is rendered with React and SVG, each face using randomized eye radii while sharing fixed dimensions and offsets. The code splits UI components into separate ES6 modules, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. Each face is built with SVG circles and a d3 arc path for the mouth, composed inside a translated `<g>` element. React fragments group the eyes, and the `range` function from d3 generates the array of face instances.

Fork of Smiley Face Part IV

This example shows a classic smiley face rendered as a static SVG graphic, composed of a yellow circular background, two black eyes, and a black arc-shaped mouth. The visualization is built using React components for each facial feature, with D3’s `arc` API generating the mouth’s path geometry. The code defines specific dimensions and offsets for the features, centered within a 960 by 500 pixel viewport, and renders the final composition through a React DOM call.

Jul 23, 2023

Fork of Smiley Face Part III

A smiling face rendered as a yellow circle with black outlines, two eyes, and an arc-shaped mouth. The visualization is built with React and D3 v5, using SVG elements inside a single `<g>` transform. A `BackgourndCircle` component draws the face via a `<circle>`, while the mouth is generated with `d3.arc()` using start and end angles. Eye positions and radii are fixed constants, demonstrating declarative React components combined with D3’s arc generator for path creation.

Jul 23, 2023

Fork of Smiley Face Part II

This example shows a large yellow smiley face rendered to fill the browser window, built as a React component. The face uses SVG primitives: a yellow circle with a black stroke, two eye circles, and a mouth path. The mouth shape is generated using the `d3.arc()` API with inner and outer radii and start/end angles. Instead of hardcoding values, dimensions are calculated dynamically from `window.innerWidth` and `window.innerHeight`. React renders the SVG, while D3 v5 provides the arc generator, with all elements positioned relative to the screen center.

Jul 22, 2023

Fork of Let's Make a Face Part I

This example shows a yellow smiley face rendered as an SVG circle with two smaller circles for eyes, positioned symmetrically around the center of a 960×500 canvas. The face is drawn using React and ReactDOM, with the main circle's radius and eye offsets defined as variables derived from the canvas dimensions. The code uses inline SVG elements within a React component, computed from constants like `centerX`, `centerY`, `strokWidth`, `eyeOfsetX`, and `eyeOfsetY` to maintain consistent spacing. The rendering relies on React 16.9 and ReactDOM’s `render` method to mount the component into the DOM.

Jul 22, 2023