NaveenrajaYalagandula

World Map

A world map is rendered on a natural Earth projection using React and D3.js, displaying landmasses in teal, graticules as light gray lines, and country borders as thin strokes. The visualization pulls geographic data from the World Atlas TopoJSON file (countries-50m.json) and converts it to GeoJSON using the `feature` and `mesh` functions from TopoJSON. D3’s `geoNaturalEarth1` projection and `geoPath` generate the SVG paths for the sphere, graticule grid, land polygons, and internal boundaries.

Apr 4, 2022

Fork of Different Family Tree

This visualization presents a family tree as a horizontal dendrogram, with nodes connected by orange links and labeled with names from a JSON dataset. Node color encodes different branches of the lineage, while font size decreases with each generation to show depth. The example uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` components to compute the layout, with SVG rendering and zoom functionality enabled via D3’s `zoom` and `event` APIs. The visualization is built within a React framework, and text elements are styled with a Playfair Display font.

Apr 4, 2022

Fork of Family Tree ICE-8

This interactive family tree visualization displays a hierarchical dataset of named individuals connected by directional links. It uses D3.js v3 with SVG rendering to draw collapsible nodes, where each person is represented by a colored rectangle based on type, and animations smoothly transition nodes when clicked. The layout is computed with `d3.layout.tree`, while zoom and drag behavior is enabled via `d3.behavior.zoom`. Tooltips and arrow markers are included, and CSS defines styling for links, nodes, and selection states.

Fork of Hello VizHub

This example demonstrates a minimal D3.js application that loads the library via UNPKG and uses ES6 modules to render a static message on a web page. The code imports the `select` function from D3 and a custom `message` string from a local module, then sets the text content of a `#message` div. The page styling is defined in `styles.css`, and the data file contains a hierarchical tree of names and links, though the visualization does not currently render this data. The example highlights basic D3 setup, local module imports, and DOM manipulation.

USA Country Map

This visualization displays a map of the United States, with each state rendered as a green SVG path that turns darker on hover and includes a tooltip showing the state name. The map uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the geography from TopoJSON data loaded via `d3.json`. State boundaries appear in blue with partial opacity, and the example demonstrates basic data binding with `selectAll`, `enter`, and `append` to create the paths.

USA Country Map with Topojson data

This example displays a choropleth-style map of the United States, with each state rendered as a separate SVG path using a topojson dataset. It shows state boundaries and names via tooltips. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to generate the paths, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The map is drawn with SVG elements, and the data is loaded asynchronously from a GitHub gist using D3’s `json` method.

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a blank page, with the message scaled to a massive font size of 13 em. It demonstrates a minimal setup using plain HTML, CSS, and JavaScript without any external libraries or frameworks. The styling is applied via a `<style>` block in the document head, targeting the `.message` class, while the page structure consists solely of a single `<div>` element. No data sources or rendering APIs are used; the visualization relies entirely on static markup and CSS for its visual output.

Fork of ICE 7 Pie Chart

This pie chart shows the production of waste by different countries, using data loaded from a CSV file via `d3.csv`. The visualization renders an SVG with proportionate slices sized by each country’s 2018 total value, using `d3.pie` and `d3.arc`. A legend, generated with `d3.scaleOrdinal` for colors, displays country names alongside formatted values (in thousands) using `d3.format`. The chart is positioned with SVG transforms and styled through an external CSS file.

Fork of Pie Chart

This visualization presents 2022 US auto sales by brand as a pie chart built with D3 v5, using SVG for rendering. Each slice’s size encodes the brand’s year-to-date sales, with a color-coded legend showing brand names and formatted sales values (in thousands). The code loads CSV data via `d3.csv` from a GitHub gist, computes the pie layout with `d3.pie()`, draws arcs using `d3.arc()`, and assigns categorical colors via `d3.scaleOrdinal`. Sales values are formatted using D3’s `format` helper for the legend.

ICE 7 Area Chart

The ICE 7 Area Chart visualizes mobile purchase trends in India from 2010 to 2020. It combines a line and area chart to show the growth in purchases over time, with the line highlighting the trend and the filled area emphasizing the magnitude. The visualization uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.line`, `d3.area`, and `d3.curveBasis` to render the smooth curves. It loads CSV data from a GitHub gist and renders the result as SVG, with the line in orange and the area fill in yellow.

Fork of Fork of line chart section 3

This line chart displays mobile purchases in India from 2010 to 2020, with time on the x-axis and purchase counts on the y-axis. The visualization uses d3.csv to load external data, then applies d3.scaleTime and d3.scaleLinear for scaling, with d3.axisBottom and d3.axisLeft for labeled gridlines. A d3.line generator creates the red path rendered as SVG, while d3.timeParse converts year strings into date objects for proper temporal positioning.

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. The plot cycles through four variable combinations on the x-axis every three seconds, while the y-axis remains fixed on sepal length. Built with D3.js version 6.7.0, the visualization uses SVG rendering and animation. The code implements a reusable scatter plot component with configurable scales, axes, and symbol types, following the "Towards Reusable Charts" pattern. The Iris data is loaded from a GitHub gist, with points symbolized by species.

Fork of Fork of Stylized Scatter Plot with Color Legend

This visualization displays the Iris Dataset, with each circle representing an iris flower, positioned by petal length and sepal length to emphasize clustering by species. A color legend distinguishes the three species using a categorical scale. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, d3.axisBottom and d3.axisLeft for axes, and the d3-legend library’s legendColor with circle shapes. Rendered as SVG, it includes custom axis labels and a hidden domain for a cleaner, stylized appearance.

Mar 7, 2022

ICE 6 Bar Chart

This bar chart displays waste production from 1990 to 2010 for ten countries, with each bar’s length representing the 2010 population value. A React component renders SVG rectangles via the `Marks` component, using d3’s `scaleBand` and `scaleLinear` for axes and positioning. The data loads with `d3.csv` from a GitHub gist, and the chart includes axes rendered by `AxisBottom` and `AxisLeft`, plus tooltips showing formatted values on hover.

Mar 7, 2022

Fork of vendas_por_grupo_bar_chart

This fork displays horizontal bars comparing product group names to quantities sold, using an SVG rendered with D3 v7 scales and axes. Data from CSV is parsed via `d3.csv` and loaded through a React hook; the chart applies `scaleLinear` for values and `scaleBand` for categories, with hover titles showing exact counts.

Mar 6, 2022

Loading and Parsing data with CoronovirusData

This example demonstrates how to load and parse a CSV file containing coronavirus data using D3.js within a React framework. The page displays a static SVG illustration of a cartoonish face alongside a message container that summarizes the dataset. The code fetches the CSV from a GitHub gist via `d3.csv`, then uses `d3.csvFormat` to calculate the file size in kilobytes, and reports the row and column counts. The rendered output is styled with custom CSS, including a colored header and a formatted `<pre>` element for the data summary.

Feb 28, 2022

Fork of Loading CSV data through D3

A React-based smiley face SVG is displayed alongside a text summary of a CSV file loaded from a GitHub gist. The page uses `d3.csv()` to fetch and parse the geographical data, then prints the file size, row count, and column count into a styled `<pre>` element. The visualization combines a static SVG icon with dynamically loaded data statistics, demonstrating how React components can be integrated with D3 for data retrieval and summary display in a single dashboard.

Feb 27, 2022