057SatvikDamera

@057SatvikDamera·14 public vizzes

ICE-08 11603435

This visualization displays a world map using an equirectangular projection, with countries rendered as black-filled paths against a blue ocean sphere. It loads geospatial data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature()` method from TopoJSON. The D3 v5 code employs `geoEquirectangular()`, `geoPath()`, and `.projection()` to generate the map geometry. Countries change to a red color on hover through a CSS `:hover` rule, and the SVG output is fixed at 960 by 500 pixels.

Mar 29, 2023

Loading thumbnail…

Social Network Graph

This social network graph visualizes the connections between ten individuals, with node size and link thickness representing group membership and relationship weight. Using `d3.layout.force()` for physics-based layout and `force.drag()` for interactivity, nodes are rendered as SVG circles with red text labels. The network loads JSON data from `network.json`, drawing links as blue lines whose stroke-width reflects each connection’s weight. The graph uses D3.js v4 and v2 APIs to position elements dynamically, enabling users to drag and rearrange nodes while the force simulation updates positions in real time.

Mar 29, 2023

Loading thumbnail…

Fork of ICE-8_Family_Tree

This fork of ICE-8 Family Tree displays a hierarchical animal classification tree, from Animals down to specific species like Lion, Tiger, Beaver, and Turtles. It uses d3.v3 layout and zoom/pan behaviors, rendering nodes as colored rectangles with SVG and HTML foreignObjects, plus animated transitions. The code loads data from a JSON file and assigns distinct colors by node type.

Mar 29, 2023

Loading thumbnail…

INDIA MAP

This example visualizes a map of India, displaying each state as a colored SVG path with its name labeled at the centroid. Using d3.geoMercator for projection and d3.geoPath to generate paths, it loads state boundaries from a TopoJSON file via d3.json. The code applies a d3.scaleOrdinal color scheme to fill each state and appends text elements using pathGenerator.centroid for positioning, while CSS adds black strokes between states.

Mar 29, 2023

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays the current population of different countries over time, using a smooth, basis-curved line and an orange fill beneath it. The visualization is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` and `area` generators with `curveBasis`. Data is loaded from a remote CSV file and rendered as an SVG, with a grid, axis labels, and a title.

Mar 13, 2023

Loading thumbnail…

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the top 10 countries by air pollution deaths in 2020, using a dataset fetched from a GitHub-hosted CSV. Each slice represents a country’s death count, with a legend pairing country names and formatted values. The visualization is built with D3 v5, using `d3.pie()` to compute arc segments, `d3.arc()` for rendering SVG paths, and `d3.scaleOrdinal` for color assignment. Legends are appended as grouped SVG elements, with text formatted via `d3.format`. Data is loaded asynchronously with the `csv` function from D3’s fetch API.

Mar 13, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot uses the Iris Dataset to visualize the relationship between petal width and sepal length, with each of the three flower species represented by a distinct symbol. D3.js v6.7.0 powers the visualization, employing `scaleLinear` for axes, `scaleOrdinal` for symbol assignment, and `symbol()` for mark generation. The reusable `scatterPlot` component draws SVG paths, includes left and bottom axes, and automatically scales to the browser window size.

Mar 13, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This D3.js scatter plot visualizes the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Each species is represented with a distinct symbol, determined by the `scaleOrdinal` and `symbols` APIs, with all points rendered at a fixed size. The visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `symbol().size()` to generate SVG paths. Data is loaded from a CSV via `d3.csv`, and the plot is drawn into a full-window SVG.

Mar 13, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows the Iris Dataset in an animated scatter plot that cycles through different feature pairs every two seconds. It uses a reusable D3 scatter plot component, built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` from D3 v6. The plot is rendered as an SVG that fills the browser window, with circles sized by a fixed radius. The animation is driven by `setInterval`, which updates the x-value mapping and re-applies the plot to the SVG element.

Mar 10, 2023

Loading thumbnail…

Penguin Data Set Of ICE-6

This scatter plot visualizes the Penguin Data Set of ICE-6, showing the relationship between flipper length and body mass for three penguin species, color-coded as black (Adelie), violet (Gentoo), and red (Chinstrap). The code uses d3.csv to load the data, d3.scaleLinear for axis scaling, and d3.extent for domain calculation, rendering SVG circles with d3.select and .join('circle'). The visualization includes labeled axes for flipper length and bill_length_mm, with axes created via d3.axisLeft and d3.axisBottom. Data is sourced from a GitHub gist, and the rendering uses D3 v5 within an HTML page.

Mar 9, 2023

Loading thumbnail…

Ranks Of Countries

This example displays a horizontal bar chart comparing the population ranks of fifteen countries, using a dataset loaded via `d3.csv`. The visualization uses React for component rendering and D3 v5 functions such as `scaleBand`, `scaleLinear`, and `max` to compute scales and layout. Bars are drawn as SVG rectangles, with gridlines and axis labels generated manually from the scales. The chart highlights rank order rather than absolute population values, with the longest bar representing the highest-ranked country.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart using SVG rendering. It loads population data from a CSV file via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and formats axis ticks with `d3.format`. The chart uses `d3.axisLeft` and `d3.axisBottom` for axes, with custom labels and a steelblue fill for bars.

Mar 9, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, with population values scaled linearly and sorted by descending size. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars and axes, while the `csv` loader imports population data from a local CSV file. Axis labels and a chart title are added via SVG text elements, and population tick labels are formatted using D3’s `format` function with abbreviations for billions.

Mar 8, 2023