H

harika-1929

@harika-1929·46 public vizzes

Loading thumbnail…

India Map

This example displays a choropleth map of India with district-level boundaries colored by state and state outlines highlighted in green. Built with React and D3, it uses `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3.zoom` for pan and zoom interactions. The visualization renders as SVG, combining TopoJSON data from two sources—one for state borders and another for district polygons. Hovering over districts turns them black, with tooltips revealing district and state names.

Loading thumbnail…

Family Tree

This interactive family tree visualizes hierarchical relationships using a collapsible node layout. The D3.js v3 code loads JSON data and renders individuals as colored rectangles connected by directional links, with tooltips and zooming support. The tree uses `d3.layout.tree` for positioning, SVG for rendering, and CSS for styling nodes and links. Animated transitions handle node expansion and collapse when clicked, while arrow markers indicate link direction.

Loading thumbnail…

World Map

This example displays a world map rendered as an SVG using D3.js v5. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw country boundaries from a TopoJSON file loaded via `topojson.feature`. The map includes a blue sphere outline and green country shapes with strokes. The code demonstrates fundamental data binding and path generation for geographic visualization.

Loading thumbnail…

Social Network Graph

A social network graph visualizes friendships among eight people, with directed links labeled by relationship type and arrowheads indicating connection flow. Each node is a yellow circle with a name label, and hovering highlights the node border in blue. The visualization uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while drag interactions are enabled via `d3.drag`. Data is loaded from a local `data.json` file, and the SVG rendering applies CSS classes for hover effects and marker styling.

Loading thumbnail…

Car sale Analyis

This interactive 3D scatter plot visualizes car sales data across three consecutive years (year20, year21, year22) as points in three-dimensional space. Each marker’s position corresponds to a vehicle’s metrics in those years, colored blue with black outlines and 0.8 opacity. The visualization uses the Plotly JavaScript library (via `plotly-2.9.0.min.js`) and loads CSV data through d3.csv from a GitHub gist. The code defines a scatter3d trace with explicit axis titles, then renders it into a div using `Plotly.newPlot`.

Loading thumbnail…

3D Bar chart

This example visualizes car sales across multiple car models for the first six months of the year using an animated, interactive 3D bar chart rendered with the x3dom library. The chart displays multi-series data loaded from a CSV file, parsed into objects with keys for each month (January through June) and their respective sales values. The implementation uses d3-3d’s `barChartMultiSeries` component, which relies on the Three.js-based x3dom for 3D rendering, and D3 v5 for data parsing and selecting the chart holder. The bars rotate in 3D space, allowing examination from different angles.

Loading thumbnail…

Bonus ICE 3D Bar Chart

This interactive 3D bar chart visualizes car sales data across five years (2018-2022). Each actor from the Tollywood dataset is represented as a series of vertical bars, with height encoding the numeric award count for each year. The visualization is built using the d3-x3d library, which leverages X3DOM for rendering three-dimensional graphics in the browser. The chart dynamically populates by fetching and parsing CSV data from a remote GitHub repository, then re-renders the display with the actual dataset.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the static text message "Hello HTML!" centered on the screen. The page is styled entirely with CSS, using a large font size and text alignment to achieve visual emphasis. The implementation relies on plain HTML for structure and CSS for presentation, with no JavaScript or external libraries involved. The code is contained within a single `index.html` file, showcasing the fundamental building blocks of web development.

Loading thumbnail…

Area Chart

This area chart displays automobile prices over time, with a smooth curve representing cost trends across months. The visualization includes labeled axes for month and cost, with grid lines and a shaded area beneath the line to emphasize data magnitude. Built with React and D3 v5, it uses `d3.area()` and `d3.line()` with `curveBasis` for smoothing, while `d3.scaleTime()` and `d3.scaleLinear()` handle scaling. Data comes from a CSV file parsed via `d3.csv()`, with dates formatted using `d3.timeParse()`. The SVG rendering includes axis labels and tick formatting via `d3.axisBottom()` and `d3.axisLeft()`.

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

A scatter plot cycles through four flag and stand measurements from a CSV dataset, updating the x-axis and axis label every few seconds. The visualization uses D3 v6 to render circles colored by a "color" attribute, with red, green, and blue indicated in a legend. It employs reusable scatter plot and scale functions, rendering through SVG with animation for the rotating axes and labels.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot explores relationships between four variables from the auto-mpg dataset, cycling which variable maps to the x-axis while the y-axis consistently tracks AvilaAdobe. Built with D3.js (v6.7.0), it renders circles in an SVG, with data points colored by year (pink for 2014, green for 2015, black for 2016). The chart updates via `setInterval`, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and appends legend markers and axis labels dynamically.

Loading thumbnail…

Fork of Muni Average Daily Boardings B&W Scatterplot

This scatterplot visualizes the drastic reduction in Muni’s average daily boardings from 2019 to 2020, highlighting the impact of COVID-19 on ridership. Black circles, each with a tooltip showing the boarding count, are plotted over time on an SVG canvas. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisLeft and d3.axisBottom to render them. The chart fills the browser window, with data sourced from the SFMTA’s Muni ridership reports.

Loading thumbnail…

Line Chart

This line chart shows US auto sales from 2005 to 2022, with the x-axis displaying years and the y-axis displaying sales figures. The data is loaded from a CSV file using d3.csv, then rendered as an SVG path generated by d3.line(). Axes are created with d3.axisBottom and d3.axisLeft, using d3.scaleTime and d3.scaleLinear for positioning. The chart includes axis labels and a title, with a green stroke styling the line path.

Loading thumbnail…

Fork of Fork of GDP Serbia

This line chart displays the number of actions per month, with data sourced from a CSV file. The visualization uses D3’s `scaleBand` for the x-axis months and `scaleLinear` for the y-axis action counts, rendered as an SVG with React. The chart includes a smooth curve via `line()` and `curveNatural`, circular data points with tooltips, and labeled axes. The y-axis uses dashed gridlines, and the title is centered above the plot area.

Loading thumbnail…

Pie Chart

This pie chart visualizes population figures for US states, displaying each state as a colored slice with its population value labeled in millions. The chart uses d3.pie() to compute angular segments and d3.arc() with an inner radius of zero to generate the SVG paths. A legend is rendered to the right, mapping each state name to its corresponding color and population value. The data is loaded as CSV from a GitHub gist, and colors are assigned using d3.scaleOrdinal() with a predefined array of ten distinct colors.

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart displays the distribution of student enrollment across ten prominent universities, with each slice labeled and color-coded. Hovering over a slice reveals the percentage of total students it represents via a tooltip. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a custom color range from `d3-scale-chromatic`, while rendering SVG elements and tooltip interactions are managed through D3 selections. Data is loaded from a CSV file.

Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each airline

This donut chart shows the percentage of flights delayed at departure for each airline, using color saturation to indicate the proportion of total delays per airline and tooltips to display exact percentages. It answers questions about which airline has the most delays and how many airlines fall within specific delay ranges. The visualization uses D3 v5 APIs such as `pie`, `arc`, and `scaleOrdinal` to render SVG slices with hover interactions. Data comes from a Flight Delay Analysis Dataset loaded via `d3.csv`.

Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each airline

This donut chart shows the percentage of flights delayed at departure for each airline, using color saturation to indicate the proportion of total delays per airline and tooltips to display exact percentages. It answers questions about which airline has the most delays and how many airlines fall within specific delay ranges. The visualization uses D3 v5 APIs such as `pie`, `arc`, and `scaleOrdinal` to render SVG slices with hover interactions. Data comes from a Flight Delay Analysis Dataset loaded via `d3.csv`.

Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each airline

This donut chart shows the percentage of flights delayed at departure for each airline, using color saturation to indicate the proportion of total delays per airline and tooltips to display exact percentages. It answers questions about which airline has the most delays and how many airlines fall within specific delay ranges. The visualization uses D3 v5 APIs such as `pie`, `arc`, and `scaleOrdinal` to render SVG slices with hover interactions. Data comes from a Flight Delay Analysis Dataset loaded via `d3.csv`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris dataset, showcasing four flower measurements including petal width and sepal length. The visualization cycles through different x-axis variables every few seconds, displaying the data points color-coded by species—orange for setosa, blue for versicolor, and black for virginica. The chart uses D3 v3 with SVG rendering, incorporating reusable chart patterns via the scatterPlot function and axis components. A color legend identifies the three species, and axis labels dynamically update to reflect the currently displayed measurement.

Loading thumbnail…

Fork of Dinosaur D3 Scatter Plot

A scatterplot of dinosaur length versus weight, plotted with D3 scales and axes. Each point is a circle positioned by `d3.scaleLinear` domains, with an SVG `<title>` tooltip revealing the genus, period, diet type, length, and weight on hover. Data comes from a JSON dataset via `d3.json`, parsed with a custom row-accessor, and rendered using SVG circles and `d3.axisLeft`/`d3.axisBottom`. Values are formatted with `d3.format` for comma-separated weight labels.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository. It displays each car as a red, semi-transparent circle positioned according to its two numerical attributes. The plot is rendered as an SVG using D3 v5, employing `scaleLinear` to map data to chart coordinates, `axisBottom` and `axisLeft` to draw axes with gridlines, and `csv` to load the dataset. Both axes are labeled with their respective measurements.

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This example shows an animated scatter plot of the Iris dataset, cycling through four different measurements (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. Data points are colored by species (setosa, versicolor, virginica) and change position via a `setInterval` that updates the chart’s x-scale. The visualization uses D3 v6 with SVG rendering, including axes, a static legend, and custom title labels. It demonstrates a reusable `scatterPlot` module built with D3’s `scaleLinear`, `extent`, and axis functions, with data loaded from a CSV file.

Loading thumbnail…

Line Chart

A line chart displays smoothed daily COVID-19 death counts over time for the top 50 countries, colored by data from the Johns Hopkins Coronavirus Dataset. It uses a logarithmic y-scale and a Gaussian kernel blur to smooth the time series. Hovering over a Voronoi overlay, generated with `d3.Delaunay`, highlights the nearest data point and illuminates the corresponding country’s line, while a tooltip shows the country, date, and approximate death total. The chart is built with React and D3 v5, rendering SVG paths via `d3.line` and axes with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Pie Chart

This pie chart displays the pollution levels of ten US states, with each slice labeled and colored to represent a state’s relative contribution. The visualization uses D3.js v5’s `d3.pie()` and `d3.arc()` generators to compute slice angles and paths, rendering the chart as SVG elements in a 900×450 pixel canvas. The code assigns slice colors based on an ordinal scale and includes a legend alongside the chart. The data is embedded directly in the script, and the title indicates the focus on state-level pollution metrics.

Loading thumbnail…

ICE6

This visualization displays the total physical absorption values of Dark Souls 3 armor sets as a horizontal bar chart, with the data sorted in descending order. It uses React for the component structure and D3 v5 for data loading, scaling (d3.scaleBand and d3.scaleLinear), and axis generation (d3.axisLeft, d3.axisBottom). The data is fetched as a CSV from a GitHub gist and rendered as SVG rectangles with gold gridlines.

Loading thumbnail…

ICE6 Scattered plot

This scatter plot visualizes the iris dataset, showing petal length on the x-axis and sepal length on the y-axis, with data points colored by species (black for setosa, red for versicolor, darkgreen for virginica). The visualization uses D3 v6 with React, rendering as SVG via d3.select and d3.scaleLinear for mapping the data. Axes are generated with d3.axisLeft and d3.axisBottom, while the CSV data is loaded asynchronously using d3.csv with custom parsing to convert numeric fields.

Loading thumbnail…

ICE6

This example displays a horizontal bar chart ranking Dark Souls 3 armor sets by their total physical absorption value, using dark green bars sorted from highest to lowest. The visualization loads CSV data from a GitHub gist and renders with React, using d3.csv for parsing, d3.scaleBand and d3.scaleLinear for positioning, and d3.max for domain calculation. Axes are custom-drawn with tick lines and labels, while the SVG output is managed through React’s declarative rendering.

Loading thumbnail…

Marks and Channels

This bar chart displays the types of movies released in a particular year, using horizontal bars to compare counts across categories. The visualization loads CSV data from a GitHub gist, parsing numeric year values, and renders the top 20 records as an SVG. Built with React and D3 v5, the chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and maps each movie type to a filled rectangle whose length encodes the year’s value. The chart includes custom axes and grid lines drawn with SVG elements.

Loading thumbnail…

ICE6

A horizontal bar chart displays the top ten countries in the 2019 World Population dataset, with each bar's length proportional to population and country labels on the y-axis. The visualization is built with React, using D3's `scaleBand` and `scaleLinear` to map data to SVG rectangles within a responsive `<svg>` container. Axes and tick marks are generated via D3's `axisLeft` and `axisBottom` functions, styled with CSS. The chart updates asynchronously after fetching and parsing the CSV via `d3.csv`.

Loading thumbnail…

Fork of Fork of ICE6

This example displays a horizontal bar chart comparing the population of ten countries. D3.js loads the data from a remote CSV file, and React renders the visualization as SVG elements. The chart uses D3's scale functions to map data values to pixel coordinates, with axis ticks generated from the linear scale. Bars are drawn as SVG rectangles, showcasing how D3 and React can be combined for data-driven graphics.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with each bar’s length representing the 2020 population estimate. Drawn using React and D3 v5, the SVG renders rectangles positioned via `scaleBand` along the y-axis and scaled by `scaleLinear` on the x-axis. No axes are drawn; the chart intentionally appears minimal. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and sliced to the first ten rows.

Loading thumbnail…

Fork of ICE6.1

This visualization displays the classic Iris dataset, plotting petal length against sepal length as colored points. Each species (setosa, versicolor, virginica) is assigned a distinct color. The code uses D3 v6 with SVG rendering in React, employing `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render the scatterplot. Axis labels and tick formatting are customized, with circles drawn using `selectAll` and `join`.

Loading thumbnail…

Data Visualization

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

Loading thumbnail…

Data Visualization

A stylized SVG diagram of a branching organic structure is rendered with dark, blurred strokes and colored ellipses, overlaying a white background. The visualization uses D3.js v7 to load and summarize a CSV dataset, displaying the file size in kilobytes, row count, and column count in a text element. The SVG paths and shapes are static, while the data summary is generated dynamically via the `d3.csv` and `d3.csvFormat` APIs, showing how D3 can combine declarative SVG graphics with data-driven text output.

Loading thumbnail…

Data Visualization

This example displays a simple dashboard that presents a hello message from the author and summarizes a dataset loaded from a GitHub gist. The text announces the file’s approximate size in kilobytes, the number of rows, and the column count. The visualization uses D3.js version 7, specifically the `d3.csv` and `d3.csvFormat` APIs, to fetch and parse the CSV data and then inject the computed summary into an HTML `<pre>` element. The page also embeds an external SVG image and relies on basic CSS for styling.

Loading thumbnail…

Data Visualization

This example displays a data summary message generated from a CSV file loaded via d3.csv. The code calculates the file size in kilobytes, row count, and column count, then renders these statistics in a large, styled pre element. The page also includes a heading, a greeting, and an embedded image reference from VizHub. The visualization uses D3 v7 and React, with the CSV data sourced from a GitHub gist.

Loading thumbnail…

Data Visualization

This example presents a simple HTML page that displays a greeting message and loads a remote CSV dataset using D3 version 7. It prints statistics about the data, including its size in kilobytes, row count, and column count, by utilizing `d3.csv` and `d3.csvFormat`. The page also includes an SVG image showing a black ellipse and a filled polygon. The D3 library is loaded via a CDN, and the visualization is rendered through standard HTML and SVG elements.

Loading thumbnail…

Data Visualization

This example displays a static SVG composition featuring a black ellipse overlaid by a triangular form, paired with a text summary of a dataset. The page loads CSV data from a GitHub gist using `d3.csv` and reports its size in kilobytes, row count, and column count. The visualization uses D3 v7 for data parsing, while React is not actively employed despite being listed in the framework metadata, and the SVG rendering is hardcoded in the markup.

Loading thumbnail…

ICE5

This example displays a simple geometric composition of a black ellipse and triangle layered on a white background, paired with a text summary of a dataset. The visualization uses D3 v7 to load a CSV file via `d3.csv`, then computes and displays the file size in kilobytes, the number of rows, and the number of columns in a preformatted text element. The rendering is purely SVG, with the graphic embedded as an external image file, while the data summary is generated dynamically from the fetched CSV content.

Loading thumbnail…

ICE5

This example presents a simple geometric composition rendered as an SVG, featuring a black ellipse intersecting with a triangular wedge against a white background. The visualization accompanies a message that displays dataset statistics loaded remotely via `d3.csv` from a GitHub gist, reporting file size, row count, and column count in a preformatted text container. The page also includes a minimal login form styled with CSS, though its functionality is not demonstrated. The SVG shape itself serves as a static decorative element rather than an interactive data encoding.

Loading thumbnail…

Fork of Surprised Emoji for submission

This visualization shows a stylized surprised emoji face rendered as SVG, with a yellow circular head, white eyes, black pupils, and an open mouth composed of two arcs. Built with React and D3 v6, the code uses D3’s `arc()` generator to create the mouth paths and React’s `ReactDOM.render` to mount the SVG to the DOM. The design hardcodes geometric values for radii, stroke widths, and positions, presenting a half-finished smiley face as a step toward a fuller expression.

Loading thumbnail…

Fork of Jake - The Dog

This visualization uses SVG to render a simplified, yellow dog face inspired by Jake from Adventure Time. It draws black and white circular shapes for the eyes, a larger mouth path, and an ellipse for the nose, all positioned within a 960 by 500 viewport. The page relies on basic SVG elements like `circle`, `path`, and `ellipse`, with a solid background color and no JavaScript libraries or data sources.

Loading thumbnail…

Fork of homework smiley face

The visualization displays a cartoon smiley face centered in an SVG canvas, constructed with a grey face, white outline, two black-pupiled eyes, and a simple smile. The code uses React to render the SVG elements, while D3’s `arc` API generates the mouth arc path. Additional black lines create stylized hair and eyebrows, all drawn with explicit coordinates and stroke widths within a single grouped transformation.

Loading thumbnail…

Fork of homework smiley face

This visualization renders a stylized smiley face using React and D3.js, drawn entirely as SVG shapes. It constructs the face with circles for the head and eyes, lines for eyebrows and hair, and a D3 arc path for the mouth, all positioned relative to a central coordinate system. The code leverages React's declarative component structure and D3's `arc` helper to generate the mouth shape, while all other elements are defined as primitive SVG tags.

Loading thumbnail…

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

A D3.js smiley face animates by moving its eyebrows up and down on an SVG canvas. The code uses `d3.select` to append SVG elements including circles for the eyes and mouth, and rectangles for the eyebrows. A `transition` with a 2000-millisecond duration moves the eyebrow group vertically, then back, creating a repeating animation. The face is centered using SVG transforms, with dimensions read from the SVG attributes. The mouth is drawn using the `d3.arc` path generator.