Skip to main content
Log in
A

Amanullah007

@Amanullah007·15 public vizzes

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using a Natural Earth projection, with countries filled in pink and outlined in black against a blue ocean sphere. It uses the d3 library’s geoNaturalEarth1 and geoPath to render geographic shapes from a TopoJSON dataset, while the topojson library’s feature function extracts country boundaries. Interactive hover effects change the fill color of individual countries to dark blue.

Apr 4, 2022
Loading thumbnail…

ICE-8 Social Network Graph

A force-directed network diagram visualizes social connections among ten individuals, with node size fixed and link thickness scaled by relationship weight. The graph uses D3 v4 with an SVG rendering and a custom force layout configured through `d3.layout.force()`, applying gravity, charge, and distance parameters to position nodes. Node labels display names, while draggable circles allow interaction with the network. Data is loaded from a local `network.json` file, defining node groupings and weighted links between them.

Apr 4, 2022
Loading thumbnail…

Family Tree ICE-8

This example renders a family tree as an indented hierarchical diagram using D3.js v5. It visualizes three generations of relatives, with each node represented by a circle whose radius encodes a numeric value and whose fill and stroke colors are set from data properties. Curved link paths connect parent to child nodes using a custom cubic Bézier command. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while SVG elements are bound to the dataset directly in the source code.

Apr 4, 2022
Loading thumbnail…

ICE8 USA Map

This example displays a choropleth-style map of the United States, with each state filled in green and outlined in a semi-transparent orange. It shows the geographic boundaries of all 50 states, highlighting them in red on hover. The visualization uses the D3 v5 library with `d3.geoPath` and `geoAlbersUsa` projection, rendering the map as SVG paths from TopoJSON data loaded from the us-atlas repository. The `states-10m.json` file provides the geographic features, and the `geo-albers-usa-territories` plugin enables territory inclusion.

Apr 4, 2022
Loading thumbnail…

ICE 7 Line Chart

This chart displays annual sales of Apple mobile phones from 2009 to 2019 as a single line, with time on the x-axis and sales volume on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators within a React framework, rendering to SVG. Data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. The chart includes labeled axes, grid lines, and a styled line path, with sales values formatted using D3’s `format`.

Apr 3, 2022
Loading thumbnail…

ICE-7 Assignment Area Chart

This chart visualizes the number of traffic accidents in the USA over time, using a smooth curved line and a filled area beneath it to emphasize trends. The visualization is rendered as a scalable vector graphic (SVG) using D3 v5, with scales and axes generated by `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded from a CSV file, and both a line generator and area generator with `curveBasis` create the smoothed shapes, with grid lines and labeled axes for clarity.

Mar 28, 2022
Loading thumbnail…

LINE CHART

This line chart visualizes total sales of an Apple product from 2013 to 2022. It uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the SVG path, with gridlines from tick marks. The data is loaded from a CSV file hosted on GitHub Gist. The chart is rendered as an SVG element and uses updated date parsing to format the x-axis years.

Mar 28, 2022
Loading thumbnail…

Pie chart , ICE-7

A pie chart displays the top ten weekly product sales in a shop, with each slice sized by the `weeksales` value and colored via `d3.scaleOrdinal`. The code loads CSV data from a GitHub gist using `d3.csv`, computes the pie layout with `d3.pie`, and draws SVG paths with `d3.arc`. Slice labels show formatted sales values, and a legend lists product names with matching colors and values.

Mar 27, 2022
Loading thumbnail…

Reusable _scatter_Plot

This animated scatter plot visualizes the Iris dataset, encoding petal and sepal measurements along the axes with each species represented by a distinct color. The visualization cycles through different x-axis variables every two seconds using `setInterval`, demonstrating the reusable nature of the chart component. Built with D3.js, the example uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to construct axes, while SVG circles represent data points with CSS styling from the Share Tech font. The code includes a legend and axis labels to support interpretation of the three iris species.

Mar 27, 2022
Loading thumbnail…

Reusable plots

This example demonstrates how to build reusable chart components in React with D3. It visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with circle radii fixed at 7 pixels. The code separates axes and marks into distinct React components—AxisBottom, AxisLeft, and Marks—which accept scales and dimensions as props for reuse. It uses d3.scaleLinear with extent-based domains, d3.csv for data loading, and renders SVG elements via React’s JSX syntax.

Mar 27, 2022
Loading thumbnail…

Plotting for the Iris Dataset

This visualization displays the classic Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with each species (setosa, virginica, and versicolor) colored blue, red, and orange respectively. The code uses d3.csv to load the data and d3.scaleLinear with d3.extent to map values to screen coordinates. Circle marks are rendered via SVG, with axes drawn using d3.axisLeft and d3.axisBottom. Although sepal dimensions are parsed, they are not visually encoded in the final plot, which focuses solely on the petal measurements across all three species.

Mar 7, 2022
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the number of gold medals won by the top ten countries in the Tokyo Olympics, using a horizontal bar chart ordered from highest to lowest medal count. The chart is rendered as SVG within a React application, with D3 v5 handling data loading via `d3.csv`, scaling through `scaleBand` and `scaleLinear`, and gridline creation with `xScale.ticks`. Each rectangular bar uses a distinct fill color from a hardcoded array, with the data sourced from a remote CSV file.

Mar 6, 2022
Loading thumbnail…

Parsing the loaded Data and displaying the svg

This example displays metadata about a football players CSV dataset as plain text in a styled HTML container, showing file size, row count, and column count obtained via d3.csv. It also presents an SVG image loaded from an external gist script. The code parses the remote CSV URL using d3.csv and computes the formatted data size with d3.csvFormat, while relying on D3 v7 for data loading and the document’s DOM for rendering.

Feb 28, 2022
Loading thumbnail…

tongue smiley

A yellow circle with a black outline forms a smiling face, featuring two dark eyes and a curved mouth, rendered as SVG elements positioned through manual coordinate offsets. A smaller red arc below the mouth represents the tongue. The visualization uses D3 v5 selections to append shapes and the `d3.arc` path generator to create both the mouth and tongue, with the entire composition translated to the center of an 900x500 SVG canvas.

Feb 21, 2022
Loading thumbnail…

Fork of Smiley Face Part V

This example renders a yellow smiley face as an SVG graphic using React components and D3.js. It shows a circle background, two eyes, and a curved mouth, all positioned relative to a central point. The code splits React components into separate files, including a `BackgroundCircle`, `Eyes`, and `Mouth` that uses D3's `arc` function to generate the mouth path. The React application computes center coordinates and offsets to place the features, and renders the final composition within an SVG element.

Feb 21, 2022