S

sudhamshu24

@sudhamshu24·18 public vizzes

Loading thumbnail…

Fork of ICE8 Social Network Graph d3

This example shows a social network of ten people, displayed as a force-directed graph where nodes are yellow circles and links are red lines. The graph uses d3.layout.force (the v3 API) to position nodes, with link stroke widths scaled by the `weight` attribute in the data. Node labels are drawn in blue text, and nodes are draggable via `force.drag`. The network.json file supplies the node names and link weights, and the visualization renders entirely in SVG on a plain HTML page.

Loading thumbnail…

Family Tree

This visualization displays a family tree using D3.js v5 within a React framework, rendering nodes and links as SVG elements. The tree structure is built from a flat data list via `d3.stratify()` and laid out with `d3.tree()`, with each family member represented as a colored circle and labeled with their name. Node colors vary by hierarchical depth, using a `marker()` function that assigns a distinct color to each level. Curved connecting paths are drawn using cubic Bezier commands in the `d` attribute, while `text` elements label each descendant.

Loading thumbnail…

India Map

This example displays a choropleth-style map of India, rendering each state as a green SVG path against an orange background. It uses React for component structure and d3’s `geoMercator` projection with `geoPath` to convert TopoJSON geographic data into scalable vector graphics. The map loads state boundaries from a remote gist URL via `d3.json`, processes them with `topojson.feature`, and fills the viewport dynamically. The visualization is simple and static, focusing on clear geographical layout rather than interactivity or data encoding.

Loading thumbnail…

World Map with Topojson data

This example displays a world map rendered as SVG paths, with countries in grey and yellow strokes against a red spherical backdrop. It uses the Mercator projection and D3’s `geoPath` to convert geographic coordinates into screen paths, while TopoJSON’s `feature` extracts country boundaries from a remote world.json file. The sphere and countries are appended directly to the SVG via D3’s `select` and data joins, with styling handled through CSS classes.

Loading thumbnail…

Fork of Area Chart

The chart shows 15 years of car sales using a combined line and area chart. A black line traces sales over time, while a grey filled area beneath it emphasizes the trend, with axes labeled "Sales" and "Year." It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` for smoothing. The SVG rendering loads CSV data from a remote gist, parses dates, and formats the y-axis tick labels with `format('.3s')`.

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization shows the sales of cars in India from 2009 to 2019, combining a black line path and an orange filled area to emphasize the trend in yearly sales data. The code uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for the axes, along with d3.line and d3.area generators using a curveBasis interpolation. Axis labels and gridlines are rendered via d3.axisBottom and d3.axisLeft, with the SVG output styled through an external stylesheet.

Loading thumbnail…

Fork line chart section 3

A fork line chart displays 15 years of automobile production totals, with years on the x-axis and total sales on the y-axis, rendered as a red stroke in an SVG. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line to generate the path. Data is loaded from a CSV via d3.csv, with years parsed using d3.timeParse. Gridlines are drawn via tickSize, and axis labels are added manually.

Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the top ten most populous countries, ranked by 2017 population data loaded from a CSV file. The chart uses React for component state and rendering, with D3 v5’s `scaleBand` and `scaleLinear` to map countries and population values to SVG rectangles. Axes are custom-drawn using D3’s array methods, and the visualization updates when new data arrives via a `useEffect` hook.

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart visualizes the top five countries by deaths in 2020, using a dataset from a GitHub gist. Each slice is color-coded and labeled with its percentage, while a legend on the right lists the country names and corresponding death counts. The visualization is built with D3 v5, using `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate and style the SVG paths and text. Data is fetched as CSV and converted to numeric values before rendering.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

A reusable scatter plot built with D3 v6 displays Iris flower measurements, mapping petal width against sepal length and coloring each point by species (white, red, or green). The `scatterPlot` function encapsulates scales, axes, and circle rendering using `scaleLinear`, `axisBottom`, and `axisLeft`. Data loads from a CSV via `d3.csv` and parses numeric fields. The view fills the browser window with an orange background, and the script cycles through four measurement columns as the x-value, though only the initial petal-width view renders visibly.

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, virginica). The visualization uses D3.js v6 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes and scales. Data loads from a CSV via the `csv` function. The code also references sepal dimensions but does not plot them, and includes a custom marker function to assign colors to each species group.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, cycling through the four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis while sepal length remains on the y-axis. It demonstrates a reusable chart pattern using D3 v6, where a `scatterPlot` function returns a configurable closure that sets scales, joins circle elements to data, and renders axes with `axisLeft` and `axisBottom`. The visualization rotates through columns every two seconds via `setInterval`, updating the x-value accessor and re-invoking the chart. It loads data asynchronously with `csv` from a GitHub Gist and renders in SVG within the full browser viewport.

Loading thumbnail…

ICE-6

This interactive chart displays the top 5 most populous countries based on 2019 data, using horizontal bars to compare population sizes. The visualization loads data from a CSV file via `d3.csv`, then renders an SVG bar chart with React. It employs `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, with gridlines and tick labels generated from the scales. The chart updates reactively as data loads, showing a loading state before the bars appear.

Loading thumbnail…

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

This example visualizes the top 10 soap products by their 2008 population values using a horizontal bar chart rendered as SVG. The chart employs React’s `useState` and `useEffect` hooks to asynchronously fetch CSV data from a GitHub URL, then maps each product to a rectangle whose width is proportional to its population via `d3.scaleLinear` and `d3.scaleBand`. Axes ticks are generated with `xScale.ticks()`, and the layout uses explicit margins and dimensions. The code demonstrates manual rendering of marks and channels with React components and D3 scales.

Loading thumbnail…

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

This visualization displays a horizontal bar chart comparing the population of the top 10 countries from a CSV file hosted on GitHub. It uses React for component structure and state management, with D3 (v5) for the scales and axes. The SVG rendering maps each country's population to a bar’s width using `d3.scaleLinear`, while `d3.scaleBand` positions the categorical labels along the y-axis. The chart includes blue x-axis gridlines and labeled ticks, presenting a clean, static comparison of the selected data.

Loading thumbnail…

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

This visualization displays the population of 20 countries as horizontal bars, with country names on the y-axis and population values on the x-axis. The SVG chart is rendered using React components alongside D3 scale functions and SVG elements. The code loads CSV data from a GitHub Gist, parses the population column, and uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axis ticks and labels are generated manually with D3’s `ticks()` method, while bars are drawn as `<rect>` elements.

Loading thumbnail…

Car Companies

This example demonstrates the loading and parsing of a CSV file containing car company data using D3.js version 7.3.0. The page displays a summary of the dataset, including its size in kilobytes, number of rows, and column count, within a styled HTML container. The code fetches the CSV from a GitHub Gist URL using the `d3.csv()` method, then uses `d3.csvFormat()` to calculate the data size. The visualization is minimal, focusing on text output rather than graphical representation, with CSS styling applied to headings and the message area.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a simple emoji-like face using React and D3.js. It draws a red circle with a black stroke as the face, two smaller circles for eyes, and a curved path generated with `d3.arc` to create a mouth. The SVG elements are positioned via a centered `<g>` group transformed using React JSX template literals, with all geometric constants defined in JavaScript. React's `ReactDOM.render` mounts the component, while CSS removes page margins.