syedhaliz

@syedhaliz·9 public vizzes

Fork of ICE 08 11540905

This example presents a world map where individual countries are rendered as filled shapes with black borders, and they change to a red highlight when hovered. The visualization uses a geographic projection, with the earth’s background colored light blue and landmasses in green, all rendered through SVG paths. The code relies on D3.js for map generation, specifically using `d3.geoPath` to convert GeoJSON data into paths, while the `styles.css` sets the body overflow to hidden and defines the fill and hover states for the country polygons. The interaction is limited to CSS-based hover effects, with no additional data simulation or dynamic behavior.

Mar 29, 2023

Loading thumbnail…

COVID-19 Forecast

This chart displays a time-series forecast of COVID-19 infections, plotting each data point as a circle on a date-based x-axis and an infection-count y-axis. It uses D3 v5’s `csv` loader to fetch remote data, `scaleTime` and `scaleLinear` for axes, and `axisBottom`/`axisLeft` to render the scales. The SVG rendering includes labeled axes and a title, with circles styled via CSS.

Mar 13, 2023

Loading thumbnail…

Most Popular Cities In The World

This pie chart displays the top 10 most populated cities in the world based on 2022 population data. Each slice represents a city’s total population, with a color-coded legend showing city names and values in thousands. The visualization uses D3 v5’s `pie` and `arc` generators to compute angular segments, with `scaleOrdinal` mapping colors to population values. Data is loaded asynchronously from a CSV file via the `csv` function, and the SVG rendering includes custom legend text and percentage formatting using `format`.

Mar 13, 2023

Loading thumbnail…

Reusable D3 Scatter Plot w/ symbols

This example demonstrates a reusable D3 scatter plot that visualizes the Iris dataset, mapping petal length and sepal length on the x and y axes. Different Iris species are distinguished using D3 symbols (circles, crosses, diamonds, etc.) via `d3.symbol` and a `scaleOrdinal` mapping. The chart is built with an SVG rendering, utilizing `d3.csv` for data loading, `scaleLinear` for scales, and `axisLeft`/`axisBottom` for axes, while the chart’s dimensions, margins, and labels are configured through a custom reusable function pattern.

Mar 13, 2023

Loading thumbnail…

Line Area

This visualization displays daily mean temperature changes over time, using a smooth green area chart to emphasize the temperature trend across days. The chart includes labeled axes for days and mean temperature, with a title and formatted tick values. Built with D3 v6, the code imports specific modules like `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom` to generate an SVG rendering. Data is loaded from a CSV file and parsed with a time format. The chart applies margins, grid lines, and axis labels to present the temperature data clearly.

Mar 13, 2023

Loading thumbnail…

Penguin Data set scatter Plot

A scatter plot of the Palmer Penguins dataset displays body mass on the x-axis and bill depth on the y-axis, with each circle colored by species (Adelie, Chinstrap, or Gentoo). The visualization uses D3 v5 to load CSV data via `d3.csv`, scales with `scaleLinear` and `extent`, and renders circles as SVG elements. Axes are generated with `axisLeft` and `axisBottom`, while custom styling applies cursive fonts and a bold title.

Mar 9, 2023

Loading thumbnail…

Weight Treatment Data Visualization

This example visualizes average weight differences before and after treatment, grouped by gender, using diverging blue and pink bars. It builds a React component that loads CSV data via `d3.csv`, nests and aggregates it with `d3.nest` and `d3.mean`, then renders an SVG bar chart with `d3.scaleBand` and `d3.scaleLinear` scales. Axes are drawn using `d3.axisBottom` and `d3.axisLeft` via refs, while the bar heights encode positive and negative weight changes relative to a zero baseline.

Mar 9, 2023

Loading thumbnail…

Weight Loss Treatment

This example displays the metadata of a two-week weight loss treatment dataset, showing the file size in kilobytes, row count, and column count in large green text. After clicking a link to a raw CSV file, D3 v7’s `d3.csv` loads the remote data and `d3.csvFormat` calculates its size. The page uses CSS for a background image and positions the results within a `<pre>` element, while the raw data link is provided as an external gist URL.

Mar 2, 2023

Loading thumbnail…

Angry Red Metal Face

This example shows a stylized angry face rendered as an SVG, with two eyes and a curved mouth on a red circular head. D3.js v5 manipulates the DOM by selecting the SVG element and appending grouped shapes, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. The code uses explicit attribute setters like `.attr()` to position and style each element, creating a static, geometric portrait.

Feb 22, 2023