Skip to main content
Log in
A

abdulmoin9624

@abdulmoin9624·20 public vizzes

Loading thumbnail…

ICE - 8 USA Country Map (11508271)

This example displays a map of the United States with state boundaries, rendered as an SVG using React and D3. The visualization loads US Atlas TopoJSON data from a CDN and projects it using the `geoAlbers` projection, drawing landmasses with `geoPath`. State interiors are highlighted as black lines, generated from the `mesh` function from the topojson library, while the overall map is styled with a purple fill for land and a white sphere background.

Apr 3, 2022
Loading thumbnail…

ICE - 8 Network Graph of Friends (11508271)

This network graph visualizes a small social network of seven friends, showing connections between individuals with varying link weights. The graph uses a force-directed layout to position nodes, with red circles representing each person and labels displaying their names. The visualization is built using D3.js v4, employing the legacy `d3.layout.force` API for node positioning and drag interactions. Data comes from a JSON file containing node names, group assignments, and weighted links, rendered as SVG lines with stroke-width proportional to connection weight. The graph automatically positions nodes based on the force simulation, with links drawn between connected friends.

Apr 3, 2022
Loading thumbnail…

ICE - 8 Family Tree of Kapoor's (11508271)

This visualization presents the Kapoor family tree as a hierarchical diagram, with each node labeled by name and colored to distinguish generations. It renders the data from a JSON file using D3 v5’s tree layout, connecting parent-child relationships via horizontal curved links. The SVG output supports pan and zoom through the d3.zoom API, while text styling with a white shadow improves readability. Node colors come from the data’s color field, applied via fill attributes.

Apr 3, 2022
Loading thumbnail…

ICE - 8 World Map with D3.js! (11508271)

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths filled in turquoise and outlined in black. Hovering over any country highlights it in red. Built with D3.js v5 and TopoJSON, it uses `d3.geoEquirectangular` and `d3.geoPath` to generate the geometry, and loads geographic data from the world-atlas countries-110m.json file via `d3.json`.

Apr 3, 2022
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot (11508271)

This scatter plot visualizes the Iris dataset, displaying petal width against sepal length with different species represented by distinct symbol types. The visualization cycles through all four numeric columns every two seconds, automatically updating the x-axis to show a different variable. Built as a reusable D3 module, the chart uses the `scatterPlot` factory function with `scaleLinear`, `axisBottom`, and `axisLeft` from D3 v6. The SVG rendering animates through different column combinations, with axis labels and a title overlaid on the plot.

Mar 27, 2022
Loading thumbnail…

ICE - 7 Line Chart for Car Sales (11508271)

This line chart displays car sales in the USA from 2011 to 2020, using a red stroke to trace sales trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. Axis labels are generated via `d3.axisBottom` and `d3.axisLeft`, while the line path is drawn using `d3.line`. Data is loaded from a CSV file hosted on GitHub and parsed with `d3.csv` and `d3.timeParse`.

Mar 27, 2022
Loading thumbnail…

ICE - 7 Area Chart for Car Sales (11508271)

This chart depicts annual car sales in the USA from 2010 to 2020 using a combined line and area chart. The visualization employs D3 v5 to render SVG paths for both the smooth line and the filled area beneath it, using a basis curve for interpolation. The x-axis, formatted as dates, is scaled with `scaleTime`, while the y-axis uses `scaleLinear` with compact tick labels. Data is loaded from a remote CSV via `csv()`, with sales values and dates parsed before rendering. Axis labels are customized with distinct colors and fonts, and grid lines are drawn with tick marks.

Mar 27, 2022
Loading thumbnail…

ICE - 7 Pie Chart for Car Sales (11508271)

This example visualizes top brand car sales in the USA for 2020 as a pie chart, with each slice labeled in thousands and a legend listing brands and their corresponding sales values. It uses d3.csv to load the data from a remote CSV file, then d3.pie and d3.arc to generate the chart’s paths, while d3.scaleOrdinal assigns colors to slices. All rendering is done via SVG, with text elements placed using arc.centroid for slice labels and a custom legend built from appended rectangles and text.

Mar 27, 2022
Loading thumbnail…

ICE - 6 Marks and Channels (11508271)

A bar chart displays the top ten car models by first-quarter sales, ranked by year along the vertical axis and price along the horizontal axis. The visualization uses React state to load CSV data via `d3.csv`, then renders SVG rectangles with blue fills and yellow strokes. Scales are created with `d3.scaleBand` and `d3.scaleLinear`, while axis ticks and grid lines are generated manually using `xScale.ticks()` and SVG elements. The chart title appears above the visualization, and the y-axis labels show the year for each bar.

Mar 7, 2022
Loading thumbnail…

ICE - 6 Iris Dataset Scatter Plot (11508271)

This interactive scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis. Each point is colored by species (setosa in red, versicolor in green, virginica in magenta) using D3 v6’s scaleLinear, axisBottom, and axisLeft. The SVG circles also store sepal length and width as rx and ry attributes, though the visual radius remains constant. Data is loaded as CSV via d3.csv from a GitHub gist.

Mar 6, 2022
Loading thumbnail…

ICE 5 - Loading and parsing of Data (11508271)

This example demonstrates how to load and parse CSV data with D3, displaying basic dataset statistics in a large preformatted text block. It fetches a cricket World Cup winners CSV file from a GitHub gist using d3.csv, then computes the approximate file size in kilobytes, row count, and column count. The page also includes a static SVG image referenced in the HTML. The visualization uses D3 version 7.3.0 and the d3.csvFormat API to calculate the data length while presenting results with a simple centered layout.

Feb 26, 2022
Loading thumbnail…

Sad smiley face with D3.js

A sad smiley face is drawn in an SVG canvas using D3.js v5. The code builds the face from primitives: a blue circle for the head, two black circles for the eyes, and an arc path for the mouth. The `arc()` API generates the mouth’s path with specified inner and outer radii and angle ranges, while transforms position the eyes and mouth relative to the canvas center. The SVG is selected via `d3.select`, and attributes like coordinates and radii are set with `.attr`.

Feb 20, 2022
Loading thumbnail…

Sad smiley face with D3.js

A sad smiley face is drawn in an SVG canvas using D3.js v5. The code builds the face from primitives: a blue circle for the head, two black circles for the eyes, and an arc path for the mouth. The `arc()` API generates the mouth’s path with specified inner and outer radii and angle ranges, while transforms position the eyes and mouth relative to the canvas center. The SVG is selected via `d3.select`, and attributes like coordinates and radii are set with `.attr`.

Feb 20, 2022
Loading thumbnail…

Sad smiley face with D3.js

A yellow circle with black outlines forms a sad smiley face, its mouth rendered as an inverted arc and eyes positioned with a fixed offset. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to target the SVG element and `d3.arc` to construct the downward-curved mouth path. All facial features are centered via group transformations, with dimensions derived from the SVG's width and height attributes.

Feb 20, 2022
Loading thumbnail…

Sad smiley face with D3.js

A yellow circle with black outlines forms a sad smiley face, its mouth rendered as an inverted arc and eyes positioned with a fixed offset. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to target the SVG element and `d3.arc` to construct the downward-curved mouth path. All facial features are centered via group transformations, with dimensions derived from the SVG's width and height attributes.

Feb 20, 2022
Loading thumbnail…

Sad smiley face with D3.js

This example shows a simple, static sad smiley face rendered as a yellow circle with black eyes and a downward-curving arc for a mouth, all drawn in SVG. The face is centered in a 960×500 viewport, with the eyes and mouth positioned using translate transforms. Built with D3 v5, the code uses `d3.select` to target the SVG and `d3.arc` to generate the mouth path, while circle elements are appended directly for the head and eyes. No animation or interaction occurs; the visual is purely geometric.

Feb 20, 2022
Loading thumbnail…

Fork of SVG Face

A face rendered as yellow SVG circles and an arc mouth, centered in a 960×500 viewport. The code builds the figure with D3 v5 selections, using `d3.arc` for the mouth path and nested `<g>` elements for symmetry. Animated eyebrows are implied by the title, but the visible code only draws static facial features with fixed positions and radii, with no animation logic present in the provided files.

Feb 20, 2022
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple, smiling face as an SVG graphic. The code positions a large blue circle for the head, two smaller circles for eyes with a set spacing and vertical offset, and an arc path for the mouth using D3’s `arc()` generator. Rendering relies on SVG elements, with the entire face grouped and translated to the center of the canvas. The visualization demonstrates basic D3 shape creation and coordinate transforms, though it does not animate or respond to data.

Feb 20, 2022
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple, smiling face as an SVG graphic. The code positions a large blue circle for the head, two smaller circles for eyes with a set spacing and vertical offset, and an arc path for the mouth using D3’s `arc()` generator. Rendering relies on SVG elements, with the entire face grouped and translated to the center of the canvas. The visualization demonstrates basic D3 shape creation and coordinate transforms, though it does not animate or respond to data.

Feb 20, 2022
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple, smiling face as an SVG graphic. The code positions a large blue circle for the head, two smaller circles for eyes with a set spacing and vertical offset, and an arc path for the mouth using D3’s `arc()` generator. Rendering relies on SVG elements, with the entire face grouped and translated to the center of the canvas. The visualization demonstrates basic D3 shape creation and coordinate transforms, though it does not animate or respond to data.

Feb 20, 2022