vamshisoletii

@vamshisoletii·23 public vizzes

Fork of India Map

This example renders a choropleth map of Indian states using D3 v5 and TopoJSON, with each state colored by a categorical color scale and labeled with its name at the centroid. The visualization uses a geoMercator projection and d3.geoPath to draw state boundaries from the external TopoJSON source, while d3.scaleOrdinal and schemeCategory10 assign colors. State names are positioned using pathGenerator.centroid, and hover effects are not implemented.

Mar 30, 2023

Loading thumbnail…

Fork of Data visualization ICE-8 Social network

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

Mar 30, 2023

Loading thumbnail…

Data visualization ICE-8 Animals tree Chart

This visualization presents a hierarchical tree chart of animals, showing the classification of species into groups like Invertebrates, Amphibians, and Fish, with leaf nodes for specific examples such as insects and frogs. The chart uses a D3.js tree layout algorithm, where the thickness of each node’s circle reflects its assigned value, and color encodes both the node’s type and level. Curved links connect parent and child nodes, with stroke colors derived from the data’s level field. The visualization is built with React, renders as an SVG, and relies on D3 v5 APIs including `d3.tree()` and `d3.hierarchy()`.

Mar 30, 2023

Loading thumbnail…

Data Visualization ICE-8 Animals tree Chart

This example shows an animated tree chart of the animal kingdom, with circles sized by value and colored by type for each taxonomic group, connected by curved links with color-coded levels. Using d3.hierarchy and d3.tree, the code positions nodes in a hierarchical layout, then renders the structure as SVG paths and circles. Data is embedded directly in the source, with node circles and links styled via D3’s selection and attribute methods, all running within a React framework using D3 v5.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Data visualization ICE-8 Country map

This visualization displays a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name at its centroid. It uses D3.js v5 with topojson to load and parse Indian state boundary data from a remote TopoJSON file, then renders the shapes as SVG paths via `d3.geoPath` and a Mercator projection. The code applies a `scaleOrdinal` color scheme to differentiate regions and appends text elements positioned using `pathGenerator.centroid`, demonstrating a basic geographic data mapping workflow.

Mar 30, 2023

Loading thumbnail…

Data visualization ICE-8 Country map

This visualization renders a choropleth map of Indian states, colored by category using a D3 ordinal color scale. It loads TopoJSON data from a remote source and converts it to GeoJSON with the TopoJSON `feature` API. The map is projected using `geoMercator` and drawn as SVG paths via `d3.geoPath`. Each state is labeled with its name placed at the path’s centroid, and state boundaries are highlighted with a yellow stroke and semi-transparent opacity.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of India Map

A choropleth map of India's states, colored by state name using a categorical color scale, displays each state's name as a text label at its centroid. The map uses a Mercator projection applied via D3's `geoMercator` and `geoPath` to render SVG paths from TopoJSON data, specifically from a GitHub-hosted India states TopoJSON file. The code selects an SVG element, processes the TopoJSON features with `topojson.feature`, and applies D3 v5 APIs including `scaleOrdinal` and `schemeCategory10` for coloring.

Mar 30, 2023

Loading thumbnail…

Fork of Data visualization ICE-8

This visualization displays a world map using an equirectangular projection, with countries rendered as red polygons outlined in green against a yellow sphere background. The map loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. D3’s `geoEquirectangular` and `geoPath` handle the projection and path generation, while SVG paths are bound to country features via `selectAll` and `enter`. Hovering over a country changes its fill to blue through CSS.

Mar 30, 2023

Loading thumbnail…

Piechart ICE - 7

This interactive D3.js visualization displays a pie chart of insurance policy numbers against their corresponding insured values. The chart partitions a circle into colored slices, each representing a policy, with the slice size proportional to the insured value, and labels each slice with its value. A legend on the right maps the slice colors to policy names and values. The implementation uses D3’s `pie`, `arc`, and `scaleOrdinal` APIs, reading data from a remote CSV file. Rendering is done via SVG, with data processed through the `d3.csv` function, and includes custom styling for the legend text and labels.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart visualizes the relationship between policy number and insured value, with a smooth curve and shaded region beneath the line. The visualization uses D3 v5 to load CSV data, then employs scaleTime and scaleLinear to map the axes. The line and area generators from d3-shape, combined with curveBasis, create the smooth path, while axisBottom and axisLeft render labeled tick marks. The SVG chart includes formatted value labels and grid lines through tick settings.

Mar 13, 2023

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes the relationship between policy numbers (dates on the x-axis) and insured values (y-axis), using example data loaded from a CSV file. The visualization is rendered as scalable vector graphics (SVG). The code employs D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct and plot the chart, with a red line path representing the data trend. Both axes include labeled ticks and custom margins define the plotting area.

Mar 13, 2023

Loading thumbnail…

Fork of Stylized Line React

This example visualizes weekly temperature data as a smooth, curved line chart rendered with SVG. The chart uses D3’s `scaleTime`, `scaleLinear`, and `curveNatural` to create a stylized path, while React components handle the axes and marks. Data is loaded from a CSV file via D3’s `csv` method. The visualization includes custom axis labels, a Poppins font, and muted teal and gray styling defined in CSS, with tick formatting using `timeFormat`.

Mar 12, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and using distinct symbols for each species. It uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbols` to render SVG paths, with axes generated via `axisLeft` and `axisBottom`. The chart is built through a reusable `scatterPlot` function configured with margin, size, and accessor methods. Data is loaded as CSV from a GitHub gist and parsed into numeric values.

Mar 12, 2023

Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point is rendered as a distinct symbol from D3’s `symbols` set, with the species of iris determining which symbol shape is used. The visualization is built as a reusable D3 component using `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol().size(100)` to generate the scatter plot’s marks. The `scatterPlot` function is configured with margin, size, and accessor functions, while the SVG rendering fills the browser viewport.

Mar 12, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the classic Iris dataset in a scatter plot, cycling through the four measured attributes on the x-axis every two seconds to reveal different correlations with sepal length on the y-axis. Each point is rendered as an SVG circle, and the axes rescale dynamically as the data mapping changes. Built as a reusable D3 chart, it employs `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from the D3 library. The animation is driven by a `setInterval` callback that updates the chart’s configuration and re-invokes the plotting function.

Mar 10, 2023

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Penguin Dataset, showing flipper length on the x-axis versus body mass on the y-axis, with points colored by species. It uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to render an SVG with gridlines and labeled axes. The data is loaded via `d3.csv` from a GitHub-hosted CSV file. The code also includes non-functional square elements and oversized tick text, reflecting an experimental fork of the original cars example.

Mar 10, 2023

Loading thumbnail…

Fork of Data Visualization ICE6: Penguins Dataset Scatter Plot

This visualization displays the Palmer Penguins dataset as an interactive scatter plot. It maps flipper length on the x-axis and body mass on the y-axis, with each circle colored by penguin species (Adelie, Gentoo, or Chinstrap). The visualization uses d3.csv to fetch the data, d3.scaleLinear and d3.extent to scale the axes, and d3.axisLeft and d3.axisBottom to render tick marks. Circle positions are computed using the d3.select and .join methods within an SVG canvas.

Mar 9, 2023

Loading thumbnail…

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

This visualization shows a horizontal bar chart comparing policy numbers against their insured values, displaying the first fifteen records from a policy CSV dataset. The chart uses green styling for the title and renders blue bars with red gridlines on an SVG canvas. Built with React and D3 v5, the code employs `d3.scaleBand` for the y-axis policy labels and `d3.scaleLinear` for the x-axis values, while using React state management to fetch and process the CSV data via `d3.csv` before rendering the SVG elements.

Mar 9, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This visualization is a scatter plot of the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis. Each circle’s color encodes the penguin species (Adelie, Gentoo, or Chinstrap), while the circle’s fill attributes of `rx` and `ry` are set to the raw bill length and bill depth values, though the visual radius remains constant. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data and render SVG axes. The background is the browser window, and the plot includes cursive font labels for both axes.

Mar 8, 2023

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (green for setosa, purple for versicolor, orange for virginica). The D3.js v6 code loads the CSV data via `d3.csv`, and uses `d3.scaleLinear` for axes and `d3.extent` to compute domains. Using `d3.select` and the `join` operator, it appends SVG circles whose radius is fixed, while also setting `rx` and `ry` attributes (though these do not affect circle rendering). Axis labels and tick marks are generated with `d3.axisLeft` and `d3.axisBottom`. The visualization is rendered directly to an SVG element sized to the full browser window.

Mar 5, 2023

Loading thumbnail…

ICE5

This example displays the metadata of an insurance policy dataset, presenting the file size, row count, and column count as plain text on a web page. It retrieves the CSV data from a remote URL using D3’s `d3.csv` function, calculates the byte size of the formatted data with `d3.csvFormat`, and updates the HTML content of a `<pre>` element. The page includes a link to the raw dataset and uses a background SVG image.

Mar 2, 2023

Loading thumbnail…

Fork of ICE5

This visualization presents metadata about a credit card customer dataset, fetched from an external CSV file. It displays the dataset’s size in kilobytes, row count, and column count as plain text in a large, bold, centered `<pre>` element. The page shows a credit card SVG as a background image and includes a hyperlink to view the raw data. The code uses the D3.js `d3.csv` function to parse the remote CSV and `d3.csvFormat` to calculate its size, reporting the results without any graphical charts or interactive elements.

Mar 2, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup, rendering the text “Hello D3 version 7” prominently in the center of the page. It uses D3’s `select` API to target the document body and chain the `text` method to set the displayed string. The code loads D3 version 7 from the unpkg CDN alongside a local `bundle.js` script, and embeds a YouTube tutorial video for reference. The visualization serves as a starter template for learning the library’s basic DOM-selection syntax.

Mar 1, 2023