nagarjuna1968

@nagarjuna1968·23 public vizzes

Family Tree

This example shows a hierarchical family tree of Indian states and cities, using a left-to-right dendrogram layout. The visualization renders SVG paths and text labels with colors assigned per node from a JSON dataset, including zoom and pan interactions. It uses d3.tree, d3.hierarchy, d3.linkHorizontal, and d3.zoom to compute positions, draw connections, and enable navigation, with styles from CSS.

Apr 3, 2022

Loading thumbnail…

world map

This visualization displays a world map of countries, rendered as orange-filled SVG paths on a lime background using a Natural Earth projection. It fetches GeoJSON-derived country boundaries from the world-atlas TopoJSON dataset and converts them with topojson’s `feature` method. The map is generated with d3.geoPath and d3.geoNaturalEarth1, while standard d3 selections append each country path to the SVG canvas.

Apr 3, 2022

Loading thumbnail…

country map

This example displays a choropleth-style map of India rendered as SVG paths, with each state filled using a categorical color scale from `schemeCategory10`. The visualization uses `d3-geoMercator` for projection and `d3.geoPath` to generate the state boundaries from TopoJSON data loaded via `d3.json`. A zoom interaction is enabled, and hovering over a state changes its fill to grey via CSS. The map includes a title and is built with React, though the core logic relies on D3 v5 and the `topojson` feature API.

Apr 3, 2022

Loading thumbnail…

country map

This example displays a choropleth map of India, rendering each state as a distinct colored path using geographic features loaded from a GitHub gist. The visualization employs a Mercator projection via `d3.geoMercator` and converts TopoJSON data to GeoJSON features with the `topojson.feature` function. Each state is drawn as an SVG path generated by `d3.geoPath`, with fill colors assigned from `d3.scaleOrdinal` and `schemeCategory10`. The map includes a title and uses hover styling, with all rendering handled through React and D3 v5.

Apr 3, 2022

Loading thumbnail…

Social Network

A social network diagram displays six people as labeled circles connected by weighted, orange links. The visualization uses a D3 v4 force-directed layout, specifically calling `d3.layout.force` with gravity, distance, and charge parameters to position nodes. Links are drawn as SVG lines whose stroke-width reflects each connection's weight from the JSON data. Node styling includes solid blue circles with purple text labels, and the simulation updates node transforms and link coordinates on each tick.

Apr 3, 2022

Loading thumbnail…

Fork of Country map fork

This example displays a choropleth-style map of India, with each state filled using a categorical color scale. The visualization renders geographic boundaries as SVG paths using `d3.geoPath` with a Mercator projection, loading TopoJSON data from a GitHub gist. Hovering over a state turns it yellow via CSS. The code uses `d3.json` for data fetching, `topojson.feature` for parsing, and `d3.scaleOrdinal` with `schemeCategory10` for colors, though the fill assignment references an undefined `interpolateRainbow` property rather than actual data values.

Apr 3, 2022

Loading thumbnail…

Country map fork

This example displays a choropleth map of India using the Mercator projection, with each state colored via a categorical color scale. The visualization renders SVG paths derived from TopoJSON data fetched from a GitHub gist, using `d3.geoPath` and `d3.geoMercator` for geometry and projection. The code employs `d3.select`, `d3.json`, `d3.scaleOrdinal`, and `schemeCategory10` for styling, while the `country` class applies a hover effect that turns regions yellow. The map is built within a React framework using D3 v5.

Apr 3, 2022

Loading thumbnail…

Fork of ICE 8 country map

This visualization displays a choropleth-style map of India rendered as SVG paths, with each state filled by a categorical color and hover highlighting in yellow. It uses `d3.geoMercator` and `d3.geoPath` to project and draw features from a TopoJSON file fetched via `d3.json`, with `feature` from the `topojson` library for parsing. The color scale employs `d3.scaleOrdinal` with `schemeCategory10`, while zoom is not applied.

Apr 3, 2022

Loading thumbnail…

Fork of ICE 8 country map

Apr 3, 2022

Loading thumbnail…

Fork of ICE 8 country map

Apr 3, 2022

Loading thumbnail…

ICE 8 country map

This example displays a choropleth map of India, coloring each state with a categorical color scale. The map uses the Mercator projection to render geographic boundaries from a TopoJSON file. The visualization is built with React, D3 v5, and the `topojson` library, which parse the data and generate SVG paths. The `d3.geoPath` and `d3.geoMercator` functions handle projection and rendering, while a CSS hover effect highlights individual states in yellow.

Apr 3, 2022

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, displaying petal width against sepal length for three species, each color-coded via `d3.scaleOrdinal`. Built with D3 v6 and SVG, the chart uses a reusable `scatterPlot` function that scales data with `d3.scaleLinear` and renders axes via `d3.axisLeft` and `d3.axisBottom`. The visualization is responsive, filling the window, and includes custom legend and axis labels.

Mar 28, 2022

Loading thumbnail…

area chart

This area chart visualizes car sales over time, using a yellow filled region beneath a smooth line to emphasize the trend up to 2009. The code employs D3 v5’s `area` and `line` generators with `curveBasis` for smoothing, scaling time and linear axes via `scaleTime` and `scaleLinear`. Data is loaded from a CSV using `d3.csv`, with dates parsed via `timeParse`. SVG output includes styled grid lines, axis labels, and a title.

Mar 28, 2022

Loading thumbnail…

line chart

This line chart displays alcohol sales over time, with years on the x-axis and total sales on the y-axis. The visualization uses D3 v5 APIs including `scaleTime` for the date-based x-axis, `scaleLinear` for the y-axis, `axisBottom` and `axisLeft` for the axes, and `line` for the path generator. The chart reads data from a CSV file hosted on GitHub, parses the year values, and renders the colored line path in SVG. Gray gridlines extend from the ticks, with axis labels and a cursive font for annotation.

Mar 28, 2022

Loading thumbnail…

Fork of India population

This visualization shows India’s CO2 emissions per capita over time using a filled area chart. The chart plots yearly data points with a smooth curved area, colored maroon, against axes labeled “Year” and “CO2 emissions (per capita)”. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG. Data is loaded from a CSV file containing annual emissions values, and the title appears above the plot.

Mar 28, 2022

Loading thumbnail…

Pie Chart

A pie chart shows the top 10 causes of death in 2013, with each slice labeled in thousands using `d3.arc` and `d3.pie`. The chart is rendered as SVG with `d3.select` and `d3.scaleOrdinal` assigning colors from a fixed array. Data is loaded as CSV from a GitHub gist, and a legend lists each country alongside a colored square and its death count. Text formatting uses `d3.format` with the `~4g` specifier.

Mar 28, 2022

Loading thumbnail…

Design of scatter plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length. Points are colored by species (setosa, versicolor, virginica) with white strokes against a blue background. The visualization uses D3.js APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to map data coordinates. Data loads from a CSV URL and renders as SVG circles with a configurable radius. A custom module pattern enables dynamic updates to the x-axis value, which cycles through different columns.

Mar 27, 2022

Loading thumbnail…

Design of scatter plot

This example demonstrates the use of D3.js version 5 to load external libraries via UNPKG and integrate local ES6 modules. It displays the text "Hello VizHub!" in a large, centered message using the `d3.select` API to target the HTML element with the ID `message`. The code imports both D3 functions and a custom message from a separate module, showcasing modular JavaScript development. The styling is handled through a linked CSS file, which sets the font size and alignment for the message.

Mar 27, 2022

Loading thumbnail…

Color Legend

This example visualizes the Iris Dataset, showing clustered circles that represent individual iris flowers based on their sepal and petal lengths. The data is loaded via `d3.csv` and rendered as an SVG scatter plot using `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping by species. A categorical color legend is added with `d3.legendColor`, and axis styling includes custom tick lines and labels.

Mar 6, 2022

Loading thumbnail…

marks

This visualization displays a horizontal bar chart of the top 20 anime entries, with blue bars representing each anime’s GDP value. The chart uses React to manage state and render SVG elements, while D3’s `scaleBand` and `scaleLinear` map categorical ratings and numerical values to pixel positions. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are manually constructed with tick marks and labels using D3’s scale methods. The code relies on React hooks like `useState` and `useEffect` to fetch and update the dataset, with all SVG marks generated declaratively within the JSX structure.

Mar 6, 2022

Loading thumbnail…

Rendering Marks

This example displays a horizontal bar chart of the top 20 companies by brand value, using a dataset loaded from a CSV file via `d3.csv`. The visualization renders SVG marks with React, mapping each company to a `rect` whose width is scaled by its brand value using `d3.scaleLinear` and whose vertical position is determined by `d3.scaleBand`. Axes are composed manually from tick marks and labels generated by the scales, with gridlines drawn as blue SVG lines.

Mar 6, 2022

Loading thumbnail…

Smartphone

This example demonstrates how to load and parse a CSV dataset using D3 v7, displaying basic file statistics in a styled HTML page. The code uses `d3.csv` to fetch the Smartphone dataset from a GitHub gist, then computes and presents the file size in kilobytes, row count, and column count inside a `<pre>` element. The page also includes an embedded SVG illustration of a smartphone and surrounding decorative elements, rendered as static markup. The example focuses on data loading and parsing rather than interactive visualization, with a simple message container updating via the DOM API.

Feb 27, 2022

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This example uses D3 v7 to draw a simple smiley face on an SVG canvas. The code creates three circles—a large green face with a blue stroke and two smaller ones for eyes—then appends a mouth using the `arc` function with an inner and outer radius and specified start and end angles. The visualization is rendered directly in the HTML with static coordinates, and the minimal JavaScript selects the SVG element to append the mouth path, demonstrating basic SVG shape creation and D3's arc generator.

Feb 21, 2022