AmnaRizvi-S

@AmnaRizvi-S·15 public vizzes

Fork of Coronavirus Log Y Axis

This chart visualizes the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. It displays a line graph with dates on the x-axis and a logarithmic y-axis for death counts, encoded as SVG paths. The visualization is built with React and D3 v5, utilizing `scaleLog` for the y-axis, `scaleTime` for the x-axis, and D3’s `line` generator. Interactive axis ticks and gridlines are rendered via D3’s `axisLeft` and `axisBottom` functions.

Jul 25, 2022

Loading thumbnail…

coronavirus Line Chart Practice

This example shows the global cumulative death toll from COVID-19 over time as a single black line chart, with horizontal and vertical marker lines highlighting the 10,000-death threshold and the latest date. Built with React and D3 v5, it uses `d3.csv` to load time-series data from the CSSE COVID-19 dataset, `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the path. The SVG is rendered directly via React components, while `d3.axisBottom` and refs are used to draw the x-axis.

Jul 24, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source using D3 v5’s `d3.csv` method, which returns a promise. The code fetches a COVID-19 death time series dataset, identifies the latest date column, and aggregates the total deaths across all rows by mapping values to numbers and reducing them with a sum function. The result is logged to the console, while the HTML page displays a large, empty `<pre>` element intended for output. The implementation runs in a React framework and uses plain JavaScript promises for asynchronous data handling.

Jul 23, 2022

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization maps the Missing Migrants Dataset, plotting each migrant death or disappearance event as a semi-transparent point on a natural Earth projection. Circle size encodes the total number of dead and missing per event using a square-root scale. The code leverages React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render SVG landmasses, country boundaries, and graticules. World Atlas TopoJSON provides geographic features, while the dataset is loaded via D3’s `csv` parser.

Jul 23, 2022

Loading thumbnail…

Missing Migrants size on Map

This visualization displays a world map with circles representing cities, where the circle size encodes population using a square root scale. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to render land masses, graticules, and country boundaries from World Atlas TopoJSON. City coordinates from the Missing Migrants dataset are projected and drawn as React-managed SVG circles with `scaleSqrt` determining radius. The visualization is built with React 16.9 and D3 v5, featuring styled land and sphere paths with semi-transparent teal circles.

Jul 22, 2022

Loading thumbnail…

Fork of Working with Time

This visualization shows the total number of dead and missing migrants over time, using a bar chart where each bar aggregates the data by month. The chart displays the counts on the y-axis and dates on the x-axis, with a tooltip revealing the exact value for each bar. The code builds the visualization using React, the d3.scaleTime and d3.scaleLinear functions for axes, and the d3.histogram `bin` function to group data by months. The data is loaded from a CSV file of the Data Canvas Sense Your City dataset.

Jul 22, 2022

Loading thumbnail…

Points on a map

This visualization displays a world map with city points scaled by population. Country outlines and graticules are rendered using d3.geoPath and the geoNaturalEarth1 projection, with city populations mapped to point radii via a d3.scaleSqrt. Data comes from a CSV of world cities and TopoJSON world atlas features, rendered as SVG within a React application.

Jul 21, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes Fisher’s Iris dataset, allowing users to switch the x-axis attribute among sepal and petal measurements via a React dropdown menu. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with axes rendered as custom React components. Stylized with the Poppins font and teal circular marks, hovering reveals tooltips formatted with D3’s `format`. The y-axis remains fixed on sepal width while the x-axis changes dynamically.

Jul 21, 2022

Loading thumbnail…

Fork of React starter code

This example shows a pet-selection dropdown built with React. Users choose a dog, goldfish, or spider from a menu, and the selection state updates via React’s `useState` hook. The interface uses a plain `<select>` element, with options mapped from an array of objects containing `value` and `label` properties. The code relies on `ReactDOM.render` to mount the `App` component, and the dropdown’s change events are handled through an `onChange` callback that calls `setSelectedValue`. No data visualization or external charting library is present; it demonstrates basic React component composition and state management.

Jul 21, 2022

Loading thumbnail…

React starter code

This React starter code demonstrates a basic interactive pet-selection form. It shows a dropdown menu populated with dog, goldfish, and spider options, and updates a label based on the user’s choice. Built with React and ReactDOM, the example uses the `useState` hook to manage the selected value and defines a reusable `Dropdown` component that receives options and a callback handler. The app renders into the `#root` element, with styling applied directly in the HTML file.

Jul 21, 2022

Loading thumbnail…

Fork of Working with

This example displays a world map visualization of the Data Canvas Sense Your City dataset, rendered as SVG paths. Using React hooks for state management, the code fetches TopoJSON country boundaries and converts them to GeoJSON with `topojson.feature`. The `d3.geoEqualEarth` projection and `d3.geoPath` generate the map shapes, which are styled with cyan fill and gray strokes. The visualization loads geographic data from the unpkg-hosted world-atlas package.

Jul 20, 2022

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays a week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smoothed paths, and `nest` to group data by city. A `colorLegend` with `scaleOrdinal` and `schemeCategory10` provides the color key.

Jul 20, 2022

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization plots automobile acceleration against horsepower, colored by country of origin, with tooltips revealing model names. The scatterplot uses data from the UCI Auto MPG dataset, loaded via `d3.csv`. Built with the Vega-Lite API, it composes a circle mark with quantitative x and y encodings and a nominal color encoding, rendered as SVG. The code customizes axis and label styling through a Vega-Lite config object to improve readability.

Jul 18, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between acceleration, horsepower, and origin for automobiles in the UCI Machine Learning Repository’s Auto MPG dataset. Each car is plotted as a semitransparent circle, with color encoding the country of origin and tooltips revealing the model name. Built using the Vega-Lite API, the visualization loads data via d3.csv, renders with Vega’s SVG output, and applies custom axis and label styling from a shared configuration. The chart resizes to fit the browser window and uses Vega Tooltip for interactive hover details.

Jul 18, 2022

Loading thumbnail…

D3 JS tutorial

This example shows a single yellow circle rendered inside an SVG element with a black outline, serving as a basic D3.js tutorial demonstration. The visualization uses React and is embedded in a minimal HTML page, with the circle positioned at the center of a 960x500 pixel canvas. The code relies on the React library for component structure and manually creates the SVG circle, specifying its center coordinates, radius, stroke color, stroke width, and fill color directly in the markup. The page includes a stylesheet that sets the SVG dimensions and hides overflow, while the React bundle is loaded from a script tag.

Jul 17, 2022