Skip to main content
Log in
S

snehareddygurram

@snehareddygurram·67 public vizzes

Loading thumbnail…

Fork of major cities of india

This interactive map of India displays state boundaries that zoom to reveal district-level detail when clicked. Built with React and D3 v6, it uses a Mercator projection with `d3.geoPath` to render TopoJSON boundaries from a Gist source. Clicking a state triggers a smooth zoom animation via `d3.transition`, focusing on the selected region while loading its constituent districts. The map supports panning and zooming up to 8x through `d3.zoom`, with SVG rendering for all geographic features.

Apr 10, 2023
Loading thumbnail…

Untitled

This example presents an interactive map of Canada that displays a tooltip with the name of each province on hover. The map is rendered as SVG using d3.v7, with province shapes generated via `d3.geoPath` and the Albers projection. On mouse movement over a province, a styled `div` tooltip is positioned and populated with the province’s name, while the province’s CSS class changes its fill color; on mouse-out, the tooltip is hidden. The geographic data is loaded as JSON from a remote gist.

Apr 9, 2023
Loading thumbnail…

Fork of Fork of World Map Simple

This example displays a world map rendered as SVG paths, with countries drawn as filled shapes with white borders, a graticule of latitude and longitude lines, and an outline around the map’s edge. It uses d3-geo’s `geoNaturalEarth1` projection and `geoPath` to draw the map, and the country boundaries come from a TopoJSON file fetched from a GitHub gist, which is converted to GeoJSON features using `topojson-client`. The interface is built with React and D3, loading data asynchronously and rendering the map once the data arrives.

Apr 8, 2023
Loading thumbnail…

Fork of Fork of Social Network

This example shows a small social network of six people, grouped into three clusters, with weighted connections indicating relationship strength. The visualization uses a force-directed layout to position nodes and links, with node labels displayed beside each circle. Built with D3 v4, it employs `d3.layout.force` for simulation, `force.drag` for interactivity, and SVG elements (`line`, `circle`, `text`) for rendering. Edge thickness is scaled by the square root of the link weight, while node styling uses a custom color palette defined in CSS. The data is loaded from a local `data.json` file containing node names and group assignments.

Apr 6, 2023
Loading thumbnail…

Fork of Fork of Social Network Graph ICE-8

This example shows a social network graph using a force-directed layout. A small set of person nodes are connected by directed links that represent friendships, with link thickness varying by edge value. The user can drag nodes to reposition them. The visualization is rendered with SVG and built using D3 v6, specifically `d3.forceSimulation` with link, charge, collision, and center forces, alongside `d3.drag` for interactivity. Node labels and link arrow markers are included, and data is loaded from an external JSON file.

Apr 6, 2023
Loading thumbnail…

Fork of Social Network Graph ICE-8

This interactive social network graph visualizes friendships between individuals. It presents a static force-directed layout where each person is a large orange node, and lines with directional markers connect friends. The size of the node is uniform, while the connection strength, represented by `value`, influences the simulation. The graph uses D3's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. User interaction is enabled through `d3.drag`, allowing nodes to be repositioned. Hovering over a node triggers a CSS class change via `classed`, highlighting it with a gray stroke. The data is loaded from a local `data.json` file.

Apr 6, 2023
Loading thumbnail…

Fork of Hello HTML

This example displays a blank HTML page as the starting point for a forked project. The code contains only the basic structure with a `<head>` section and an empty `<body>` element, using no external libraries or JavaScript APIs. The page does not render any data or visual content, serving as a minimal template for further edits. It relies solely on native HTML tags and requires no additional files or assets, as shown by the accompanying README and embedded video link.

Apr 6, 2023
Loading thumbnail…

Fork of ICE - 8: Social Network Graph

This example visualizes a social network of seven people, using nodes and directed links to show friendship relationships. The graph layout is computed with `d3.forceSimulation`, applying link, charge, collision, and center forces to position nodes and edges dynamically. Dragging nodes is supported via `d3.drag`, and hovering highlights a node with a red stroke. The SVG rendering includes arrowheads on lines, with node labels displayed directly on each circle. The dataset is loaded from `data.json`, which specifies nodes and their pairwise links.

Apr 6, 2023
Loading thumbnail…

Fork of Family Tree

This interactive family tree shows a hierarchical dataset with collapsible nodes, allowing users to click and toggle the visibility of children. The visualization uses D3.js v3, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs, to compute the layout and draw curved links. Nodes are rendered as circles with labels using SVG, and animated transitions (`transition`) smoothly reposition elements when branches expand or collapse. The sample data includes named tree members like Rani, riyat, and Sarah, with a fixed-depth horizontal layout.

Apr 6, 2023
Loading thumbnail…

Fork of Fork of ICE - 8 Family Tree Maanas Katta

This example renders an animated family tree as a black-background SVG, with lime-green nodes and connecting paths. It uses D3 v6’s `d3.stratify()` to convert parent-child data into a hierarchy, then `d3.tree()` to compute node positions. Links are drawn as animated straight lines via path transitions, while circles and text labels appear with separate duration-based transitions. The data is hardcoded as an array of objects, and rendering relies on SVG elements manipulated directly through D3 selections.

Apr 6, 2023
Loading thumbnail…

Fork of map exemple

This visualization displays a choropleth map of world countries, with each nation filled by a dark red color scale based on its estimated population. The map uses d3.geoMercator projection and d3.geoPath to render geographic features from the World Atlas TopoJSON data. Population values are loaded as TSV data with d3.tsv, while event handling and zoom functionality come from d3.zoom. Country labels and population estimates are attached as SVG title elements, and hover effects are styled through CSS.

Apr 6, 2023
Loading thumbnail…

Fork of World Map Simple

This example displays a natural Earth projection world map with country boundaries, graticule lines, and a bold outline. It uses `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic features, with `d3.geoGraticule` for the grid. Country shapes come from a TopoJSON file fetched from a GitHub gist, converted via `topojson-client`, while the React-based `viz` function manages asynchronous data loading and SVG rendering.

Apr 6, 2023
Loading thumbnail…

Fork of Europe Regional Map

This visualization displays a map of England with its geographical regions highlighted in teal, using a Natural Earth projection. The regions and their internal boundaries are rendered as SVG paths via `d3.geoPath`, with region borders distinguished using TopoJSON’s `mesh` function. Built with React 18 and D3 v7, the map loads topographic data from a remote JSON URL, styling each region with a solid fill and semi-transparent strokes for interiors.

Apr 6, 2023
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map displays Indian state boundaries and district-level population data, colored by state using D3’s `scaleOrdinal` and `schemeCategory10`. Users can pan and zoom via `d3.zoom`. The visualization loads GeoJSON from two Gist-hosted sources and renders paths with `d3.geoPath` and a Mercator projection, adding tooltips with district and state names.

Apr 6, 2023
Loading thumbnail…

Fork of Fork of ICE-8 INDIA

This visualization shows an interactive map of India with its districts and state boundaries, using a Mercator projection centered on the country. Users can pan and zoom the map, with district paths colored via a categorical color scale and hover tooltips displaying the district name and major city. The code loads GeoJSON data from unpkg and a GitHub gist, then renders paths using `d3.geoPath` with `topojson.feature`. Zoom interactions are handled by `d3.zoom`, and the map includes both district and state layers with distinct stroke styling.

Apr 5, 2023
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map of India visualizes the country's administrative districts and states, colored by state using a categorical scale. Users can zoom and pan the map, and hovering over a district reveals its name and state via a tooltip. The visualization is built with D3.js, using `d3.geoPath` to render geographic features and `d3.zoom` for interaction. Data comes from TopoJSON files for Indian states and districts, with district boundaries from a 2019 dataset.

Apr 5, 2023
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map of India displays state and district boundaries, with district-level administrative divisions colored distinctly and labeled via tooltips on hover. Built with D3.js and TopoJSON, it uses `d3.geoMercator` for the projection and `d3.geoPath` to render geographic features. The visualization supports zooming and panning through `d3.zoom`, while district data is sourced from a 2019 TopoJSON file and state boundaries from a separate India-states TopoJSON. The map conveys the hierarchical relationship between states and their constituent districts.

Apr 5, 2023
Loading thumbnail…

Fork of ICE 08 11540905

This example shows a world map with countries rendered in green and an ocean-blue background, highlighting how geographic boundaries appear on an equirectangular projection. When hovered, individual countries change color to red. The visualization uses d3.geoPath and d3.geoEquirectangular to project GeoJSON data from a TopoJSON source file, with the topojson.feature method converting the TopoJSON objects into drawable features. The SVG is styled using CSS classes for the earth background and country fills.

Apr 5, 2023
Loading thumbnail…

Fork of Historical Space Launches on a map

A historical space launch map combines an interactive equal-Earth projection with a linked time-series histogram. Red semi-transparent circles scale by launch count per site, while brushing the date histogram filters visible launches across the globe. The visualization uses React with D3 v7 APIs including `geoEqualEarth`, `geoPath`, `scaleSqrt`, `bin`, and `brushX`, rendering SVG marks for continents, graticules, and launch sites from CSV and TopoJSON data sources.

Apr 4, 2023
Loading thumbnail…

Fork of ICE 08 11540905

This example displays a world map with country boundaries, rendered as an SVG using D3.js. The map uses an equirectangular projection and fills the Earth with a light blue color, while countries are colored green and shift to red on hover. It loads GeoJSON data representing boundary lines from a remote source, processes it with the TopoJSON library’s `feature` method, and draws the paths via `d3.geoPath`. The visualization relies on D3’s `select`, `json`, and `geoEquirectangular` functions.

Apr 4, 2023
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map of India visualizes the country's administrative districts and states, colored by state using a categorical scale. Users can zoom and pan the map, and hovering over a district reveals its name and state via a tooltip. The visualization is built with D3.js, using `d3.geoPath` to render geographic features and `d3.zoom` for interaction. Data comes from TopoJSON files for Indian states and districts, with district boundaries from a 2019 dataset.

Apr 4, 2023
Loading thumbnail…

Fork of Fork of ICE-7 Line Chart

This example displays a line chart tracking population from 2005 to 2017, rendered as an SVG using D3 v5. The visualization uses `d3.scaleTime` for the year axis and `d3.scaleLinear` for population values, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The line path is created with `d3.line`, and data is loaded from a CSV file using `d3.csv`. The chart includes labeled axes and a title, with gridlines styled by tick marks.

Mar 25, 2023
Loading thumbnail…

Fork of ICE-7 Area Chart

This example shows population changes from 2006 to 2017, combining a smooth curve with a filled area beneath it to emphasize the trend over time. The visualization uses a time-scaled x-axis and a linear y-axis, with grid lines and axis labels rendered via d3.axisBottom and d3.axisLeft. The chart is built with React and rendered as SVG, using d3.line and d3.area with curveBasis for smoothing. Data is loaded from a CSV file using d3.csv, with year values parsed as JavaScript Date objects for time scaling.

Mar 24, 2023
Loading thumbnail…

Fork of ICE-7 Line Chart

This chart displays population trends from 2005 to 2017 using a red line against a grid of horizontal and vertical ticks. It loads CSV data from a GitHub gist and renders it as an SVG using D3 v5. The code applies `scaleTime` for the year axis, `scaleLinear` for population values, and `line` to generate the path, with axes drawn via `axisBottom` and `axisLeft`.

Mar 24, 2023
Loading thumbnail…

Fork of Pie Chart

A pie chart displays population values for the top 10 most populous years from a CSV dataset, with each slice colored by category and an interactive tooltip logging data on mouseover. The visualization uses D3 v5's `pie` and `arc` generators to compute and render SVG paths, while `scaleOrdinal` with `schemeCategory10` assigns colors. A legend lists years with corresponding population figures, and the data is sorted descending before rendering. The chart is built within a React-compatible setup using D3's `select` and `csv` loading.

Mar 24, 2023
Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the latitude and longitude of country locations from a CSV dataset. The code uses d3.pie, d3.arc, and d3.scaleOrdinal with schemeCategory10 to create the SVG segments, while loading data via d3.csv. It also generates a legend with color swatches and labels, and tooltips log values on mouseover. The chart is built in a React project using d3 v5, rendering to an SVG element.

Mar 24, 2023
Loading thumbnail…

Fork of Reusable scatter plot for different styles

This example demonstrates a reusable scatter plot visualizing the Iris dataset, with species distinguished by different D3 symbol shapes (circles, crosses, and diamonds). It maps petal width and sepal length to x/y positions using `d3.scaleLinear`, and uses `d3.scaleOrdinal` to assign symbols to species. The code employs `d3.axisLeft` and `d3.axisBottom` for axes, and renders the marks as SVG paths generated by `d3.symbol`. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

Mar 22, 2023
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris dataset, showing the relationship between two selected measurements. A small multiples approach animates through four variable pairings (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds, while data points are colored by species. Built with D3.js, it uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a reusable scatter plot component created with the `scatterPlot` function. The SVG rendering includes colored circles with white outlines, and the animation cycles using `setInterval`.

Mar 22, 2023
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

A stylized horizontal bar chart displays the top 10 most populous countries, with bars representing population values. The visualization uses React with D3.js (v5) APIs such as `scaleBand`, `scaleLinear`, and `format` to compute scales and tick labels. SVGs are rendered through React components, with data loaded from the UN World Population Prospects 2019 CSV. The chart includes labeled axes, a Poppins font, and tooltips showing formatted population values.

Mar 22, 2023
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019. Each bar’s length encodes population using a linear scale, while country names are arranged on a band scale. The visualization is built with React and D3 v5, rendering bars and axes as SVG elements. It includes custom axis components, a formatted tick label that abbreviates billions as "B", and a tooltip showing the exact population value.

Mar 22, 2023
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customizing D3 axes, including a formatted x-axis with tick marks that extend across the chart, a removed y-axis line and ticks, and styled labels and title. Built with d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft, the chart loads data from a CSV file and renders as SVG.

Mar 22, 2023
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width and sepal length for individual flowers while encoding species with different D3 symbols. The reusable `scatterPlot` function uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` to assign symbols from the `d3.symbols` collection, and `d3.symbol().size()` to generate paths. Data is loaded via `d3.csv`, and the plot renders in SVG with axes created by `d3.axisLeft` and `d3.axisBottom`.

Mar 22, 2023
Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying points colored and shaped by species (virginica, versicolor, and setosa) using D3.js v6. The reusable chart implementation, adapted from "Towards Reusable Charts," plots petal width against sepal length, with axes automatically updating every 10 seconds to cycle through different variable combinations. The chart supports dynamic transitions via SVG path elements, scales from `d3.scaleLinear`, and ordinal scales for categorical color and symbol mapping.

Mar 22, 2023
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, where the x-axis cycles every two seconds through the four measured features (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. It uses D3 v6's `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable chart pattern. SVG circles are positioned and transitioned via a `setInterval` loop that calls the chart function repeatedly, with styling applied from the Share Tech font.

Mar 22, 2023
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris dataset, showing sepal length against sepal width. Each point represents an iris flower, colored by species (setosa, versicolor, virginica) with distinct circle, square, and triangle shapes. The chart is built using d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with the reusable scatterPlot function exposing configurable width, height, margin, and radius. Data is loaded via d3.csv with d3.autoType, and circles are rendered with adjustable opacity and stroke styling.

Mar 22, 2023
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This interactive bar chart visualizes the population of Oscar female winners, focusing on the top three countries. The initial data is loaded from a CSV file via d3.csv, which retrieves a gist dataset. Using d3.scaleBand and d3.scaleLinear, the chart maps country names to the y-axis and population values to the x-axis. SVG rectangles are rendered with React, and axes are drawn using the d3.axis, with tick marks and labels generated programmatically. The visualization dynamically updates as data is fetched, highlighting differences in population counts among the displayed countries.

Mar 12, 2023
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This example visualizes the 2022 population data for three countries as a horizontal bar chart using React and D3 v5. The chart renders SVG rectangles sized by population values on a linear x-scale, with country names on a band y-scale and tick marks on both axes. Data loads from a CSV file via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` position the bars. Gridlines are drawn as purple lines, and React’s `useState` and `useEffect` manage the asynchronous data fetching and state updates.

Mar 12, 2023
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

A bar chart visualizes the 2022 population of the top three countries from a CSV file, sorted by their `population_2022` values. The horizontal bars use a band scale for the country names on the y-axis and a linear scale for the population counts on the x-axis, with tick marks and labels drawn via D3's `scaleBand` and `scaleLinear`. The SVG rendering is built with React, using D3's `csv` loader to fetch data, and axis ticks are generated with `xScale.ticks()`. The chart is titled "2022 Population of RICH" and uses purple gridlines along the x-axis.

Mar 12, 2023
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This visualization shows international migration by age and sex as a bar chart, with categories on the x-axis and values on the y-axis. The React component loads CSV data from a GitHub gist using d3.csv, then renders an SVG with d3.scaleBand and d3.scaleLinear for the axes. It uses d3.axisBottom and d3.axisLeft to display ticks, while the bars are drawn as SVG rectangles with a steelblue fill. The code explicitly imports d3 functions via ES6 modules and leverages React hooks (useState, useEffect) for data fetching and state management.

Mar 12, 2023
Loading thumbnail…

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

This visualization displays estimated migration costs for the top 15 countries, using a horizontal bar chart where bar length encodes the basic cost. Built with React and D3 v5, it renders SVG marks and channels, with axes created using `scaleBand` and `scaleLinear`. The code loads data from a CSV URL using `d3.csv`, and the chart updates asynchronously via React’s `useState` and `useEffect`.

Mar 12, 2023
Loading thumbnail…

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

This bar chart shows the basic cost of Netflix subscriptions in 15 different countries. The visualization is built with React components and D3 v5 methods, using `csv` to load and parse data from a remote URL, and `scaleBand` and `scaleLinear` to map country names and costs to SVG rectangles. Axis ticks are rendered with `xScale.ticks()`, and the chart is drawn as an SVG element within a React app.

Mar 12, 2023
Loading thumbnail…

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

This example visualizes the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered with React and D3. It employs React hooks for state management and data fetching, with D3’s `csv` parser to load external data, `scaleBand` for categorical y-axis positioning, and `scaleLinear` for continuous x-axis scaling. The SVG bars and axes are generated manually through React components, while D3’s `max` and `format` functions handle data processing.

Mar 12, 2023
Loading thumbnail…

Fork of Green house gas bar chart

This bar chart visualizes greenhouse gas emissions by country for 2022, measured in MtCO₂e. It uses D3 v7’s `scaleLinear` and `scaleBand` to map population values and country names, with axes generated via `axisLeft` and `axisBottom`. The SVG rendering includes an animated tooltip that appears on mouseover, displaying each country’s emission value. Data is loaded from a remote CSV file using D3’s `csv` method, and the chart features a custom interactive fill effect on hover.

Mar 11, 2023
Loading thumbnail…

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

This chart visualizes estimated migration data by showing the relationship between a person's age and the basic migration cost for a subset of 15 countries. The visualization uses an SVG canvas within a React application, employing `d3.scaleBand` for the categorical y-axis (country) and `d3.scaleLinear` for the quantitative x-axis (cost). Data is loaded asynchronously from a CSV file using `d3.csv` and rendered as horizontal `rect` marks, with axis ticks generated via `xScale.ticks()` and `d3.scaleBand().domain()`. The code demonstrates how React and D3 v5 can be combined to render marks and channels declaratively.

Mar 11, 2023
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization customizes D3 axes, removing domain lines and using tick marks that span the chart’s height. Population values are loaded from a CSV file and formatted with abbreviations like “B” for billions using `d3.format`. The chart is rendered with SVG elements, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` to generate ticks.

Mar 11, 2023
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the 2018 revenue and product names from a dataset of Oscar female winners, with the title "Oscars winners age" and an x-axis labeled "Year." It uses d3.csv to load data from a GitHub gist, then renders with d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks. The SVG output includes custom tick formatting that converts large numbers to abbreviations.

Mar 11, 2023
Loading thumbnail…

Fork of Penguins Dataset Scatter Plot

This fork of the Penguins Dataset Scatter Plot visualizes the relationship between flipper length and body mass for three penguin species, with each species color-coded. Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load the data, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes. The code also parses additional measurements but does not use them for positioning. The plot is drawn with `circle` elements, and the chart fills the browser window.

Mar 11, 2023
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, each color-coded via a custom marker function. The visualization loads CSV data using `d3.csv` and renders circles in an SVG container using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Each data point maps flipper length to the x-axis and body mass to the y-axis, with species distinguished by color. The chart includes labeled axes and a title, all rendered within a full-window SVG.

Mar 11, 2023
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, with each species color-coded (Adelie, Chinstrap, and Gentoo). The visualization loads CSV data via `d3.csv`, parses numeric fields, and renders circles using SVG appended to the body. Scales created with `d3.scaleLinear` map the data to screen coordinates, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart includes a title and axis labels, with circles positioned by `cx` and `cy` attributes and colored by species.

Mar 11, 2023
Loading thumbnail…

Fork of Scatter Plot Simple

A scatter plot of the Iris Dataset uses sepal length on the x-axis and petal length on the y-axis, with circles colored and positioned by species. No axes are rendered. The visualization loads data from a CSV file using the Fetch API and `d3.csvParse`, then applies `d3.scaleLinear` and `d3.extent` to map data values to pixel coordinates. Each data point is rendered as a circle with a fixed radius via `d3.selectAll` and `join`.

Mar 10, 2023
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with points colored by species and a color legend for identification. The visualization uses D3 v7 with `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular functions for axes and legends. It employs `selection.join` for dynamic element updates and loads data asynchronously via `fetch`, parsing the CSV with `csvParse`. The chart renders in a full-screen SVG with labeled axes and a categorical legend positioned in the plot area.

Mar 10, 2023
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with each circle colored by species (Adelie, Gentoo, or other). The visualization uses D3 v5 and React, rendering with SVG. It loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for axes, and draws circles with `data.join`. Axis labels and a title are added using D3’s `axisLeft`, `axisBottom`, and text elements.

Mar 10, 2023
Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping petal length, sepal length, sepal width, and petal width to the x-axis, y-axis, circle radius, and rainbow color scale, respectively. The code loads data with `d3.csv`, applies `d3.scaleLinear` to set domains and ranges, and renders SVG circles with `d3.selectAll().join()`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the color encoding uses `d3.interpolateRainbow`. The visualization fills the browser window, with tick text enlarged via CSS.

Mar 10, 2023
Loading thumbnail…

Fork of D3 Scatter Plot

This interactive scatter plot visualizes a penguin dataset, encoding sepal length, petal length, and sepal width through the x-axis, y-axis, and point radius, respectively, while petal width drives a rainbow color scale. Built with React, it uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, `axisLeft` and `axisBottom` for axes, and `interpolateRainbow` for color mapping. The SVG circles are rendered dynamically, with a full-window layout and tick labels styled at 24px.

Mar 10, 2023
Loading thumbnail…

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

This bar chart displays the ages of the ten most recent female Oscar winners, with each bar’s length encoding the year of the award. The visualization is built using React for component structure and D3 v5 for scales and layout, specifically `scaleBand` for the categorical age axis and `scaleLinear` for the year axis. The SVG rendering is generated directly through React elements, while D3’s `csv` loader fetches the data from a GitHub gist. Axes are manually drawn with `<line>` and `<text>` elements rather than using D3’s axis components.

Mar 10, 2023
Loading thumbnail…

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

This visualization displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered as SVG. It is built with React for component structure and D3 v5 for data loading and scales, specifically using `scaleBand` for the categorical country axis and `scaleLinear` for the numeric cost axis. Data is fetched from a CSV file, and the bars, axis ticks, and gridlines are drawn manually with SVG elements rather than D3’s convenience methods. The chart updates reactively when the data loads, showing the cost range across different markets.

Mar 10, 2023
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass across three penguin species, using color to distinguish Adelie, Gentoo, and Chinstrap. The visualization reads a CSV dataset and renders SVG circles with d3.select, scaleLinear, extent, axisLeft, and axisBottom. Additional variables—bill length and depth—are set as circle corner radii, though they do not visibly affect the circular marks. The chart includes labeled axes and a title, with species-specific coloring applied via a custom marker function.

Mar 10, 2023
Loading thumbnail…

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

This visualization shows the basic cost of Netflix in different countries using a bar chart. It renders with React and D3 as SVG marks, encoding the country on the y-axis and cost on the x-axis. The code uses `d3.csv` to load the dataset, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the numeric scale. It also employs `d3.axisLeft` and `d3.axisBottom` for tick formatting, with React `useState` and `useEffect` managing data loading and state.

Mar 10, 2023
Loading thumbnail…

Fork of Data Visualization- ICE-06 - Bar chart

This bar chart displays the top 100 female Oscar winners by number of awards, sorted with the highest counts at the top. Using React with D3 v5, it builds an SVG with d3.scaleBand for the vertical name axis and d3.scaleLinear for the horizontal count axis. The code manually renders tick marks, grid lines, and labels via d3.ticks and d3.max, while styling red bars and blue tick text through CSS.

Mar 10, 2023
Loading thumbnail…

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

This visualization displays the basic cost of products sold across fifteen countries, using horizontal bars whose lengths encode the financial value for each country. Built with React and D3 v5, the code renders an SVG chart by mapping country names to a d3.scaleBand y-axis and cost values to a d3.scaleLinear x-axis. The data is loaded from a CSV file via d3.csv, and the bars are drawn as SVG rectangles within a transformed group.

Mar 10, 2023
Loading thumbnail…

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

This example visualizes the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered with React and D3. It employs React hooks for state management and data fetching, with D3’s `csv` parser to load external data, `scaleBand` for categorical y-axis positioning, and `scaleLinear` for continuous x-axis scaling. The SVG bars and axes are generated manually through React components, while D3’s `max` and `format` functions handle data processing.

Mar 10, 2023
Loading thumbnail…

ICE-06: Rendering Marks and Channels with React & D3</html><title>

This visualization displays the basic costs of 15 selected services for the 2022 quarter year, presented as horizontal bars sorted by country. Built with React and D3 v5, it loads CSV data from a GitHub gist and renders an SVG chart. The code uses `d3.csv` for data parsing, `d3.scaleBand` and `d3.scaleLinear` for axes, and D3’s `max` function to determine the x-domain. React manages the state and conditional rendering, showing a loading message until the data arrives.

Mar 10, 2023
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019. Each bar’s length encodes population using a linear scale, while country names are arranged on a band scale. The visualization is built with React and D3 v5, rendering bars and axes as SVG elements. It includes custom axis components, a formatted tick label that abbreviates billions as "B", and a tooltip showing the exact population value.

Mar 10, 2023
Loading thumbnail…

Fork of ICE-06: Rendering Marks and Channels with React & D3</html><title>

This chart visualizes the basic cost of selected services for the 2022 quarter year, displaying data for 15 countries as horizontal bars. The chart uses an SVG rendering approach with React and D3 v5, employing D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded asynchronously from a CSV file hosted on GitHub, and the code includes custom tick marks and labels for both axes.

Mar 10, 2023
Loading thumbnail…

ICE-06: Rendering Marks and Channels with React & D3</html><title>

This example shows the basic costs for fifteen selected services across countries for the 2022 quarter year, displayed as a horizontal bar chart using SVG. The visualization is built with React and D3 v5, where D3’s `csv` loads and parses the data, and `scaleBand` and `scaleLinear` map the categorical countries and numeric costs to pixel positions. React renders the SVG elements, while D3 generates the axis ticks and grid lines, with bars drawn as rectangles whose widths encode the cost values.

Mar 10, 2023
Loading thumbnail…

ICE-05

This page displays information about a finance dataset, showing its size in kilobytes, row count, and column count within a pre-formatted text block. It achieves this by loading a CSV file from a GitHub gist using `d3.csv`, then computing the data length and the number of columns from the parsed result, formatting the output with `d3.csvFormat` and `Math.round`. The page also includes a styled background image and a link to the raw dataset, with the text presented in a large, bold, centered font.

Mar 4, 2023
Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas using D3.js, with its eyebrows animating up and down in a repeating two-second transition. The code builds the face with D3’s `select`, `arc`, and `transition` APIs, using SVG circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows shift vertically via chained `transition().duration()` calls, while the face itself remains static. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Feb 25, 2023