ManideepChakilam

@ManideepChakilam·25 public vizzes

Fork of USA Map with TOPO JSON Data

This example renders a stylized choropleth-free map of the United States using React and D3 v5. It displays state boundaries and landmasses as SVG paths, with aqua oceans, green land, and cream-colored interior borders, overlaid with graticules. The code loads TopoJSON data from the US Atlas (states-10m.json) via `d3.json`, converts it using `topojson.feature` and `topojson.mesh`, and projects it with `d3.geoAlbers` and `d3.geoPath`.

Apr 3, 2022

Loading thumbnail…

Fork of WorldMap with Topojson Data

This visualization displays a natural Earth projection world map, rendering country boundaries as stroked paths on a blue sphere. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to generate SVG path data from TopoJSON country geometries loaded via the world-atlas dataset. Countries are filled with a teal color using CSS classes, while the sphere outline is drawn first. The map is static and does not include interaction, with data fetched asynchronously before appending paths.

Apr 3, 2022

Loading thumbnail…

Fork of Family Tree

This interactive family tree visualizes hierarchical relationships among named individuals, with nodes color-coded by relationship type (type1 through type4) and directional links between members. The visualization uses D3.js v3’s layout tree API to compute node positions, rendering SVG elements with animated transitions on click to expand or collapse branches. The tree supports zooming and dragging through d3.behavior.zoom, and displays tooltips with relationship details when hovering over nodes. Data is loaded from a JSON file containing nested family structures with link metadata.

Apr 3, 2022

Loading thumbnail…

Fork of Network graph of Social Connections

This example visualizes a small social network as an interactive force-directed graph, displaying seven named individuals and the connections between them. Nodes are rendered as cyan circles with maroon outlines, while green links represent relationships, with thicker lines indicating stronger ties based on a weight value from the JSON data. The graph uses the older `d3.layout.force` API from d3.v2, loading data from `graphFile.json` via `d3.json`. Users can click and drag nodes to reposition them, with the simulation updating positions on each tick. The visualization is built with SVG within a React framework.

Apr 3, 2022

Loading thumbnail…

Fork of Line_chart_Tik-Tok_users

A line chart displays TikTok's annual user growth from 2013 to 2022, using a time-scaled x-axis for years and a linear y-axis for user counts. The D3 v5 code loads CSV data via `d3.csv` from a GitHub Gist, then builds the SVG visualization with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. Styling is applied through CSS, including a thick blue line and custom tick labels.

Mar 28, 2022

Loading thumbnail…

Tik-Tok Annual Users

The visualization displays TikTok’s annual user growth from 2013 to 2022 using a smooth line chart layered over an area chart, drawn as SVG paths via d3.line and d3.area with curveBasis interpolation. It uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for labeled ticks, and formats y-axis values with d3.format. Data is loaded from a GitHub-hosted CSV using d3.csv, with margins and axis labels styling the 930 by 450 pixel graphic.

Mar 28, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot animates through the Iris flower dataset, cycling the x-axis through four measured attributes while keeping sepal length on the y-axis. Data points are colored by species (setosa in red, versicolor in cyan, virginica in grey) and rendered as SVG circles. The visualization uses d3.csv for data loading, d3.scaleLinear and axis components from D3 v6, with a setInterval driving the rotating axis selection and plot redraw.

Mar 28, 2022

Loading thumbnail…

ICE - 7 Pie Chart Manideep

This pie chart visualizes the top 10 countries by number of births in 2020, with each slice’s size proportional to reported deaths and labeled with values in thousands. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and text labels, with a legend positioned to the right. Data is loaded from a CSV file via `d3.csv` from a GitHub gist, and each segment is colored using a predefined palette of ten colors.

Mar 28, 2022

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart visualizes the sales of cars in India from 2009 to 2019. The chart combines a black line plot with an orange filled area beneath it, using a smooth basis curve. The visualization is rendered as an SVG and built with D3 v5, using `scaleTime` and `scaleLinear` to map the year and sales data. The code also employs `line` and `area` generators, along with axes created by `axisLeft` and `axisBottom`. The sales data is loaded from a CSV file.

Mar 28, 2022

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes annual car sales in India from 2009 to 2019, using time-scaled X-axis years and a linear Y-axis for sales figures, with a single red path marking the trend. The code selects an SVG, parses CSV data via d3.csv, and applies d3.scaleTime and d3.scaleLinear for axes, while d3.axisBottom and d3.axisLeft generate gridlines and labels. The line is rendered with d3.line, and data parsing uses d3.timeParse to convert date strings, with axis tick formatting applied through a custom number formatter.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example shows a pie chart of the top 10 countries by deaths in 2020 attributed to air pollution, with slices labeled in thousands and an accompanying legend listing country names and values. It loads data from a CSV via `d3.csv` and renders the chart using SVG. The chart uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for slice colors, and custom text elements positioned via `arc.centroid`. Legend items are built with appended rectangles and text, with values formatted using `d3.format`.

Mar 27, 2022

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020 using a pie chart, with each slice labeled by its death count in thousands and accompanied by a color-coded legend. The chart is built with D3 v5, using the `d3.pie` generator to compute angles and `d3.arc` to render the segments, while `d3.scaleOrdinal` assigns SLice colors. Data is loaded as CSV from a gist URL, with text labels positioned using `arcGenerator.centroid`. The legend displays country names and values in a separate SVG group.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This visualization presents the classic Iris dataset as an animated scatter plot, cycling through different sepal and petal measurements on the x-axis while petal width remains on the y-axis. Points are colored by species—red for setosa, cyan for versicolor, and grey for virginica—with a manual legend and rotating axes labels. Built with D3 v6, the example uses `scaleLinear`, `axisLeft`, and `axisBottom` from the reusable `scatterPlot` module, with `csv` loading and `setInterval` driving the animation.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses the D3.js library to visualize the Iris Dataset, cycling through different feature combinations every two seconds. The chart displays petal and sepal measurements as circles, with axes that update to reflect the currently selected dimensions. Using D3's `scaleLinear`, `extent`, and axis functions, the visualization smoothly transitions between four variable pairings, always keeping the y-value fixed on sepal width while rotating the x-axis through petal width, sepal width, petal length, and sepal length.

Mar 23, 2022

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of anime titles ranked by view counts, drawn as SVG rectangles. It loads data from `data.csv` using D3’s `csv` function, then maps views to a linear scale and anime names to a band scale for the y-axis. The code uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes and the bars.

Mar 6, 2022

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

A vertical bar chart displays the average share of renewable energy production for EU member states from 2000 to 2020. Each bar represents a single year, with height scaled proportionally to the renewable percentage. The chart uses the p5.js API, including `loadTable` to fetch CSV data from a GitHub gist, and custom functions to draw axes, ticks, and bars via `line`, `rect`, and `text`. A light blue background and green bars render the dataset’s yearly values.

Mar 5, 2022

Loading thumbnail…

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

This visualization displays the top 10 most populous countries using a horizontal bar chart rendered with React and D3 v5. The bars encode population values through length, with countries listed along the y-axis. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is drawn as SVG using d3.scaleBand and d3.scaleLinear for scales.

Mar 5, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for individual flowers while coloring each point by species. It extends the classic example by scaling circle radii according to sepal length and width, creating a fourth dimension of data. The visualization is built with D3 v6, using `csv` to load data, `scaleLinear` for axes, and SVG circles rendered via `selectAll` and `join`. Axis labels clarify the chart’s structure, and the code applies a custom `marker` function to assign distinct colors to the three flower species.

Mar 5, 2022

Loading thumbnail…

Fork of 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. It displays the file size in kilobytes, row count, and column count from an external CSV file fetched via `d3.csv`. The page also includes an SVG city illustration and uses HTML elements like `<pre>` and `<h1>` for text presentation. The code relies on D3 v7’s `d3.csv` and `d3.csvFormat` APIs to process the data asynchronously.

Feb 27, 2022

Loading thumbnail…

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 a web page. The visualization includes a static SVG illustration of a city skyline alongside the text output. The code uses the `d3.csv` method to fetch data from a GitHub gist and `d3.csvFormat` to calculate its byte length. The page is built with plain HTML, CSS, and vanilla JavaScript, relying on D3 v7 for data handling.

Feb 27, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow face composed of three SVG circles: a large head and two eyes. The code uses React to define the component structure and D3 v7 for utility functions, rendering the shapes through SVG. It demonstrates the use of JSX with inline style expressions to set coordinates and dimensions, and leverages ReactDOM to mount the visualization into the page.

Feb 27, 2022

Loading thumbnail…

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

This example demonstrates how to load and parse a CSV file with D3.js, displaying the resulting dataset’s size, row count, and column count in a styled HTML page. It uses the `d3.csv` method to fetch data from a GitHub Gist URL, then `d3.csvFormat` to calculate the data length in kilobytes. The visualization includes a decorative SVG illustration with geometric shapes, while the text output appears in a `<pre>` element. The implementation relies on D3 v7 and vanilla JavaScript within a React-compatible HTML scaffold.

Feb 25, 2022

Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a continuous up-and-down motion, using a yellow circle for the face, two circles for eyes, and an arc for the mouth. The code selects the SVG element, appends groups and shapes with `select` and `append`, and drives the eyebrow movement with chained `transition` calls that alternate between two vertical positions over two-second durations. The face is centered via a transform, and all dimensions are computed from the SVG's width and height attributes.

Feb 21, 2022

Loading thumbnail…

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

A smiley face, drawn with yellow SVG shapes, demonstrates a looping eyebrow animation in D3.js v5. The code uses `d3.select` and `d3.arc` to construct the static face, while chained `transition().duration()` calls move the eyebrow rectangles up and down. All rendering occurs in an SVG container, with the face centered via a translation transform. The example illustrates fundamental DOM manipulation and basic animation sequencing in D3.

Feb 20, 2022

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation and transitions with D3.js. The face is built using SVG shapes including circles for the eyes, a path created with `d3.arc` for the mouth, and rectangles for the eyebrows. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down repeatedly, while the static face elements remain centered via a translated `<g>` element. The code imports `select` and `arc` from the D3 v5 library and renders entirely in SVG within a 960×500 viewport.

Feb 20, 2022