Sanjib Paudel

@krison44·12 public vizzes

ICE-8 Social Network

The ICE-8 Social Network example renders a force-directed graph of social connections using React and D3 v7. It loads JSON data from a remote gist and displays nodes as orange circles with maroon links, labeled with names. The layout uses `d3.forceSimulation` with `forceLink`, `forceCenter`, and `forceCollide` to position elements, updating SVG attributes via a `ticked` function. The React `useEffect` hook manages data fetching and D3 rendering.

Apr 9, 2023

Loading thumbnail…

ICE-8 Family Tree

This example displays a family tree as a hierarchical node-link diagram. It uses d3.hierarchy and d3.tree to compute the layout, then renders it as SVG with d3.linkHorizontal for curved edges and circles for individual nodes. Named labels appear above each node, while custom logic assigns distinct stroke colors—maroon, indigo, orange, and green—based on generation depth. Data is loaded from a remote JSON file via fetch, and the visualization updates reactively within a React component using useEffect.

Apr 9, 2023

Loading thumbnail…

ICE-8 World Map and USA Maps

This interactive map viewer displays world countries, U.S. states, and U.S. counties, letting the user switch between geographic scales via buttons. It renders dynamic SVG paths using React's `useState` and `useEffect` hooks, fetching GeoJSON from `us-atlas` and `world-atlas` via TopoJSON. The visualization applies distinct projections—`geoNaturalEarth1` for the world map and `geoAlbersUsa` for U.S. views—through `d3.geoPath`, with a deep blue background. Map features are drawn as white-filled, black-stroked paths, providing a clean comparison of administrative boundaries across scales.

Apr 9, 2023

Loading thumbnail…

ICE-7 Reusuable scatterplot

This reusable scatter plot, built with D3.js, visualizes the Iris dataset by mapping petal width and sepal length. The SVG chart encodes each flower species with a distinct shape and color: triangles for setosa, stars for versicolor, and squares for virginica. Following the "Towards Reusable Charts" pattern, the `scatterPlot` module exposes fluent setters for data, dimensions, and margins, while `scaleLinear`, `axisLeft`, and `axisBottom` handle the axes and scaling.

Mar 26, 2023

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes Walmart’s weekly sales against outdoor temperature, showing an overall upward trend in sales as temperatures rise from 35°F to 85°F. The dataset is loaded from a CSV and aggregated into ten-degree temperature bins. Built with D3 version 7, the chart uses `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while `d3.line` with a basis curve and `d3.area` generate the smoothed line and red filled region beneath it.

Mar 26, 2023

Loading thumbnail…

ICE-7 Line Chart

This visualization aggregates Walmart weekly sales data by temperature bins, smoothing the resulting points into a blue basis-spline line chart. It uses D3 version 7 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The chart plots temperature in Fahrenheit on the x-axis against total weekly sales on the y-axis, with the data sourced from a CSV hosted on GitHub. Axis labels and a title annotate the plot, which lacks interactive features.

Mar 26, 2023

Loading thumbnail…

ICE-7 Pie Chart

This example visualizes the weekly sales of Walmart for ten dates as a pie chart, with each slice colored and labeled by its corresponding sales amount in millions of dollars. The pie chart layout is generated using D3.js version 7, employing the `pie` and `arc` functions, while `scaleOrdinal` with `schemeCategory10` assigns colors. A legend on the right displays each date and its formatted sales value, drawn with SVG `rect` and `text` elements. The data is loaded asynchronously from a CSV file hosted on GitHub, and all rendering is done with SVG.

Mar 25, 2023

Loading thumbnail…

ICE-6 Penguins Dataset Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis against body mass on the y-axis. Each circle represents an individual penguin, colored by species (indigo for Adelie, red for Chinstrap, gray for Gentoo). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data and render SVG axes. Circle radius is fixed, while the `rx` and `ry` attributes are set to culmen measurements, though they do not affect the visible circle shape since `r` is also applied.

Mar 21, 2023

Loading thumbnail…

ICE-6 Rendering walmart sales and unemployment with React and D3

This visualization displays weekly sales data from Walmart across different dates, with horizontal bars representing sales figures for each time period using a bar chart layout. Built with React and D3.js v7, the application loads CSV data from a GitHub gist and renders the first 20 records as an SVG. The code uses d3.scaleBand for the categorical date axis, d3.scaleLinear for the continuous sales axis, and React's useState and useEffect hooks to manage data loading and state.

Mar 11, 2023

Loading thumbnail…

ICE-5

This example displays metadata from a COVID-19 vaccination dataset for U.S. jurisdictions, showing file size, row count, and column count. The visualization uses D3 v7’s `d3.csv` to load the data and `d3.csvFormat` to calculate its size, then updates text content in the DOM. An SVG background image and CSS styling frame the page, while a hyperlink points to the original dataset on GitHub.

Mar 3, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A forked D3.js v5 example renders a smiley face in SVG with animated brows, a hat, and a mouth that bounce between positions over repeated transitions. The code uses `d3.select`, `d3.arc`-less path strings, and `transition.attr` to move circles, rectangles, and ellipses. It demonstrates fundamental DOM manipulation and chained transitions on SVG elements, with the face’s components like eyes and eyebrows spaced via explicit coordinates rather than a data-binding layout.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation and animation with D3.js. The code selects an SVG element and builds the face using circles for eyes, rectangles for eyebrows, and a d3.arc path for the mouth. A chained transition on the eyebrows group animates its vertical position over two seconds, then returns it, creating a repetitive raising and lowering effect. The example relies on D3 v5 selections, attributes, and transitions in a straightforward SVG scene.

Feb 24, 2023