pravallikayaram12

Fork of ICE-8 world map

This visualization displays a world map with countries rendered in green against a sky-blue spherical backdrop, using an equal-area natural Earth projection. The map is generated with d3.geoPath and d3.geoNaturalEarth1, while TopoJSON’s feature function converts raw GeoJSON topology data into geographic features for rendering. Countries are drawn as SVG paths with subtle black strokes, and the sphere’s fill emphasizes the global context. The map data is sourced from a remote GitHub raw file, and the entire scene is rendered as static SVG elements within a 960×500 canvas.

Yaram family

This visualization shows a family tree called "Yaram". Using d3.js v5 and SVG, the tree displays the hierarchy of family members, with each person's name as a label and colored according to their assigned color from the data. Parent-child relationships are shown as horizontal links. The code uses d3's tree layout, hierarchy, and linkHorizontal APIs, with a zoom feature and font sizes that vary by depth.

Fork of Fork of Swedish map

This visualization displays the counties of Sweden as solid black regions with white interior boundaries, rendered using SVG paths generated from TopoJSON data. The map uses a Mercator projection from d3-geo, with `geoPath` and `fitExtent` to scale and position the geometry within the frame. Built with React and D3 v5, the code fetches the Swedish county dataset via `d3.json` from a GitHub Gist, then applies `feature` and `mesh` from TopoJSON to extract boundaries and shared borders. The styling, defined in CSS, gives the map a high-contrast monochrome appearance.

Fork of ICE-8 WORLD MAP

This fork of ICE-8 displays a world map using a natural Earth projection, with countries filled in green and a blue sphere outline. The visualization loads country boundaries from the World Atlas TopoJSON dataset and renders them as SVG paths. It uses d3.geoNaturalEarth1 for the projection, d3.geoPath to generate path data, and topojson’s feature method to convert the TopoJSON topology into GeoJSON features. The sphere is drawn first as a separate path, followed by each country’s path.

Fork of Fork of Swedish map

This example displays a map of Swedish counties using a Mercator projection, rendered as black filled regions with white internal borders against a silver stroke. Built with React and D3 v5, the code leverages `d3.geoPath` for path generation and `topojson` to extract features and interior boundaries from the GeoJSON source. The visualization highlights the country’s administrative subdivisions through a minimal, high-contrast styling.

Fork2 of Pie chart

This visualization displays the top 10 most populous countries in 2022 as a pie chart, with each slice labeled in thousands and a legend listing country names and population values. Using D3 v5, the code fetches CSV data via `d3.csv`, computes the pie layout with `d3.pie`, and draws SVG paths with `d3.arc`. Slice colors come from `d3.scaleOrdinal`, and text labels are placed using `arc.centroid`. The chart renders in an SVG canvas with a light yellow background and includes a manual legend built from the same data.

Fork of Fork of Pie chart

This example shows the top 10 countries by population in 2022 using a pie chart with a side legend. The SVG rendering uses d3.pie and d3.arc to generate colored segments, with population values labeled in thousands on each slice. A scaleOrdinal maps section colors, and the chart draws from a CSV dataset hosted on GitHub. The legend lists each country with its corresponding population value, and the page uses a light yellow background with a blue title.

Fork of Pie Chart

A donut chart visualizes 2022 U.S. auto sales by brand, with each arc’s size proportional to year-to-date sales and a color-coded legend showing brand names and values in thousands. The visualization loads CSV data from a Gist URL using `d3.csv`, calculates the total, and renders the chart with D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `select` APIs. SVG output is drawn to a 960×500 canvas with interactive text and rectangle legends styled via CSS.

Fork of Fork of Line Chart

This line chart visualizes car sales figures from 2009 to 2019, plotting yearly totals on a blue line against a time-based x-axis and a linear y-axis. The chart uses a CSV data source loaded via D3’s `csv` function, with axes and labels rendered using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The line path is generated with `line`, and the SVG output includes styled tick marks, red axis labels, and a title.

Fork of Area Chart

This fork of an area chart visualizes car sales in India from 2009 to 2019, combining a smooth line and a filled pink area to emphasize the sales trend over time. The SVG chart uses D3 v5's `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` for smoothing, along with `axisBottom` and `axisLeft` for labeled axes. Data is loaded via `csv` from a GitHub gist, and the year values are parsed with `d3.timeParse`.

Fork of ICE 7 Area Chart

This example visualizes the sales of cars in India from 2009–19 as a horizontal bar chart, showing the age of the top ten players from a CSV dataset. The bars are rendered as SVG rectangles, with scales created using `d3.scaleBand` and `d3.scaleLinear` to map player names and ages. Data is loaded asynchronously via `d3.csv` and rendered through a React component using `React.useState` and `React.useEffect`. Grid lines and axis ticks are generated from `xScale.ticks()`, with styling applied via an external CSS file.

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020. Each slice represents a country, with its size proportional to the number of deaths, and labels show the death counts in thousands. A legend maps slice colors to country names. The visualization uses D3 v5 APIs including `pie` for computing arc segments, `arc` for generating the path data, and `scaleOrdinal` for color assignment. Data is loaded from a CSV file via `d3.csv`, and the SVG canvas is populated with `<path>` and `<text>` elements using `select` and `append`.

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by air pollution-related deaths in 2020, using a categorical color scale with labels showing death counts in thousands. The visualization is built with D3 v5, using `d3.pie` to compute arc segments and `d3.arc` for rendering paths and text placement. Data is loaded asynchronously from a CSV via `d3.csv`, with each slice’s color mapped through `scaleOrdinal` to a fixed palette. A legend lists each country, its color swatch, and the corresponding death value, formatted with `d3.format` for compact display.

Fork of Fork of Fork of ICE7 Pie Chart

This example shows a pie chart of the top ten cricketers’ career runs, with each slice sized proportionally to a player’s total. A legend lists each player name alongside its value. The code loads data from a JSON file, uses d3.pie to compute angles and d3.arc to generate SVG path segments, while d3.scaleOrdinal with d3.schemeCategory10 assigns slice colors. Legends are manually appended as SVG rectangles and text elements, with run values formatted using d3.format.

Fork of Pie Chart

This fork of a pie chart visualizes 2022 US auto sales by brand, showing each brand’s year-to-date sales as a colored arc with a legend listing brand names and scaled values (in thousands). The chart uses D3 v5’s `pie` and `arc` generators to compute segment angles and paths, with `scaleOrdinal` mapping sales values to a fixed color palette. Data is loaded asynchronously from a CSV file via `d3.csv`, and the SVG is rendered with appended `path` and `rect` elements. The legend and chart are positioned using SVG transforms.

ice 7

This visualization displays the top 10 countries with the highest deaths in 2020 attributed to air pollution, using a pie chart with legend. The data is loaded from a CSV file via `d3.csv`, and each slice’s value is formatted in thousands using `d3.format`. The chart renders with SVG, using `d3.pie` and `d3.arc` to generate segments, while a `d3.scaleOrdinal` maps colors to data values. Text labels and a detailed legend are appended directly to the SVG.

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using colored segments with labels showing death counts in thousands, plus a legend listing country names and values. The example loads CSV data from a GitHub gist via `d3.csv`, calculates the pie layout with `d3.pie()`, and draws the chart using `d3.arc()` on an SVG canvas. Colors are assigned via `d3.scaleOrdinal()` with an explicit array, and all styling is applied through D3 selections and inline attributes.

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by air pollution-related deaths in 2020, using categorical colors and labels showing death counts in thousands. Data is loaded from a CSV via `d3.csv`, parsed with `d3.pie`, and rendered as SVG paths generated by `d3.arc`. The visualization includes a legend with colored rectangles, country names, and values, while labels are positioned using `arc.centroid`. The code relies on D3 v5 selection and scale APIs, with colors assigned through `d3.scaleOrdinal`.

Fork of ICE-7 Pie Chart

This example displays a pie chart of cricket players’ total runs, highlighting the proportionate contribution of each player to the overall team score. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw SVG path segments, with a `scaleOrdinal` color scheme distinguishing players. A legend to the right maps each color to a player name and their runs formatted in thousands. Data is loaded asynchronously from a CSV gist via `d3.csv`.

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris flower dataset, animating through different feature combinations. A larger scatter plot displays sepal and petal dimensions, while a smaller legend shows color-coded species (setosa, versicolor, and virginica). Built with D3 v6, the `scatterPlot` module uses `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Data is loaded from a CSV file, and a `setInterval` timer cycles through four x-axis variables—petal width, sepal width, petal length, and sepal length—updating the chart's axes and labels dynamically. The SVG rendering includes colored circles, axis labels, and a titled legend.

Fork of Reusable D3 Scatter Plot- ICE7

Fork of Reusable D3 Scatter Plot- ICE7

An animated scatter plot of the Iris dataset cycles through four flower measurements on the x-axis while keeping petal width fixed on the y-axis. The visualization uses D3 v6’s `selectAll`, `data`, `join`, and `scaleLinear` to render SVG circles colored by species, with `setInterval` updating the x-scale domain and axis labels every few seconds. Data is loaded from a CSV via `d3.csv`, and the reusable chart module `scatterPlot.js` encapsulates the axes and marks.

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

This visualization displays a bar chart of the top 10 most populous countries, ranked by their 2019 population figures. Built with React and D3 v5, the app fetches CSV data from a GitHub gist and renders the chart as an SVG. The code uses `d3.csv` for data loading, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis, with React `useState` and `useEffect` managing the asynchronous data loading and rendering lifecycle.

Mar 3, 2022

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js version 7, fetching the "Mall_Customers.csv" dataset from a remote URL. The page displays a summary message about the data, including its size in kilobytes, the number of rows, and the number of columns. The code uses the `d3.csv()` function to retrieve and parse the data, `d3.csvFormat()` to calculate the file size, and updates a DOM element to present the statistics. A static SVG illustration of a person is also embedded in the page.

Feb 28, 2022

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size in kilobytes, row count, and column count on an HTML page. It also includes a static SVG city illustration. The code uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to compute its data size. The parsed results are inserted into a `<pre>` element via the DOM’s `textContent` property, with styling applied through embedded CSS.

Feb 27, 2022