Skip to main content
Log in
S

Suzizaher

@Suzizaher·12 public vizzes

Loading thumbnail…

Smiley face part 1

This example shows a yellow smiley face built from SVG shapes, with a circular background, two eyes, and an arc-shaped mouth. The face is assembled from React components that pass geometry values like radii, offsets, and stroke widths down through props. The code uses d3.arc to compute the mouth path, while d3.forceSimulation is present in the data file, though the primary rendering relies on React's declarative SVG output. The components are composed within a FaceContainer that centers the graphic on an SVG canvas.

Aug 17, 2022
Loading thumbnail…

Worl Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion, rendered as a horizontal tree layout. It uses D3 v5’s `tree` layout and `linkHorizontal` to draw curved links between parent and child nodes, with country names positioned along the branches. The interactive zooming is enabled via `d3.zoom`, and the text size decreases with each depth level, reflecting the hierarchy of the data loaded from a JSON file.

Jun 27, 2022
Loading thumbnail…

Blank Canvas!

A blank, rounded rectangle fills the entire browser window, created entirely with SVG. The example demonstrates a minimal, full-screen canvas using D3 v5 to select an SVG element and set its dimensions based on the viewport. The code appends a single rectangle with a 40-pixel corner radius, while CSS fixes the body to prevent scrolling, resulting in a clean, empty visual space.

Jun 27, 2022
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies using a color scale, with an interactive legend that filters countries by clicking on color categories to highlight or dim them. The map supports pan and zoom through d3.zoom, while d3.geoNaturalEarth1 and d3.geoPath render the geographic shapes from TopoJSON data loaded via d3.json and d3.tsv. Hovering reveals country names and values through SVG title elements, and the legend uses d3.scaleOrdinal with a spectral scheme.

Jun 22, 2022
Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, using an SVG path filled with maroon. The x-axis displays years and the y-axis shows population in billions. The code builds the chart with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis`. Data is loaded as CSV from a VizHub dataset. Axis labels and a title are added via SVG text elements.

Jun 19, 2022
Loading thumbnail…

Fork of Fork of Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart uses a filled path to show temperature fluctuations over time, with axes labeled "Time" and "Temperature." The code leverages d3.csv, d3.scaleTime, d3.scaleLinear, d3.area, and d3.curveBasis to generate the smooth area shape. SVG rendering is employed, with axis ticks and gridlines styled via CSS.

Jun 19, 2022
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, using a smooth curved path to connect timestamp and temperature values. The visualization includes labeled axes for time and temperature, with a title and grid lines. It loads data from a CSV file hosted on VizHub, which originated from the Data Canvas - Sense Your City project. The implementation uses d3.csv for data parsing, d3.scaleTime and d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.line with d3.curveBasis for the smoothed path, rendered as SVG elements.

Jun 19, 2022
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using circles to mark individual data points. The chart loads CSV data from an external URL, parses timestamps and numeric temperatures, and renders the SVG using D3 v5’s scaleTime, scaleLinear, axisBottom, and axisLeft APIs. Gridlines are drawn via tickSize, and axis labels and a title are added as SVG text elements with custom styling.

Jun 18, 2022
Loading thumbnail…

Scatter Plot!

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses red semi-transparent circles positioned on a Cartesian grid with labeled axes and gridlines. The code leverages D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data, scale quantitative values, and render SVG elements. Data is fetched from a VizHub-hosted CSV file and parsed before being joined to circle elements using D3’s enter selection.

Jun 16, 2022
Loading thumbnail…

Making a Bar Char!

This example shows a horizontal bar chart of the top ten most populous countries, with populations scaled to thousands and formatted with abbreviations (e.g., "1.41B"). The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with axes rendered via `axisLeft` and `axisBottom`. Data is loaded from a CSV file using `csv()`, and the rendering employs D3’s enter/update/exit pattern to append SVG rectangles. Axis tick lines and domains are styled via CSS.

Jun 16, 2022
Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a single black circle that follows the mouse cursor across the full browser window. The circle repositions dynamically based on the user's pointer movements, updating its coordinates in real time. The implementation uses React's `useState` and `useCallback` hooks to track the mouse position and optimize the event handler, while ReactDOM renders the SVG element with an `onMouseMove` listener. The SVG viewport fills the entire viewport, with the circle radius fixed at 30 pixels.

Jun 15, 2022
Loading thumbnail…

Loading and parsing csv

This example demonstrates the basic process of loading and parsing a CSV file from a remote URL. It displays a summary of the loaded data, including the file size in kilobytes, the number of rows, and the number of columns. The program uses the `fetch` API to retrieve the text and D3's `d3.csvParse` method to parse the CSV structure. The data source is a gist containing CSS named colors, and the results are rendered in a `<pre>` element.

Jun 14, 2022