Jyothicherukuri

@Jyothicherukuri·41 public vizzes

Fork of US states map : with colorScale. One color for each country

This example displays a map of US states, with each state filled by a unique color from a categorical scale and its name in a tooltip on hover. It uses a TopoJSON file from the us-atlas package, projected with `geoAlbersUsa()`, and rendered via `d3.geoPath` into SVG paths. The view also uses `d3.scaleOrdinal` with `schemeCategory10` for the color mapping.

Apr 3, 2022

Loading thumbnail…

Fork of Portland Map

This visualization displays the neighborhoods of Portland as a collection of polygon outlines rendered in SVG. The map uses a conic equal-area projection configured with `d3.geoConicEqualArea` and `d3.geoPath` to draw each neighborhood boundary from the Data Canvas Sense Your City dataset. The React-based application loads TopoJSON data via a custom `useData` hook, converts it to GeoJSON with topojson’s `feature` function, and colors the shape edges pink against a clean white background.

Apr 3, 2022

Loading thumbnail…

Network tree

This network tree visualization displays nine named nodes connected by nine directed links, with node size and color depth varying according to connection count. The graph uses d3.forceSimulation with forceLink, forceCenter, forceX, forceY, and forceManyBody to position elements, while d3.drag makes nodes interactive. Links render as curved paths via the tick function’s arc calculation, and nodes appear as SVG circles with labels offset to the upper right.

Apr 3, 2022

Loading thumbnail…

Fork of ICE-8 : Network Tree

This example displays a small family-style network as a force-directed tree, with nine labeled nodes connected by curved, red or black links whose style varies according to link weight. Node radius and blue fill intensity reflect the number of connections per node. Built with D3 v5, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position nodes, while SVG paths and circles render the graph. Users can drag nodes to reposition them, and the simulation updates continuously via tick events.

Apr 3, 2022

Loading thumbnail…

My Family tree

This visualization displays a family tree as an animated hierarchical diagram, with each person represented by a red circle and labeled with their name. The code uses D3.js (v6) alongside React to render the data, employing `d3.stratify` and `d3.tree` to compute the layout from a flat list of parent-child relationships. SVG paths show connections between nodes, while transitions animate the lines, circles, and text over time to reveal the tree structure.

Apr 3, 2022

Loading thumbnail…

Fork of array to tree

This example converts a shuffled array of integers into a hierarchical tree structure. Using D3 v6’s `d3.stratify` and `d3.tree` layouts, it maps array indices to parent-child relationships and renders nodes as red-bordered circles connected by black paths. Text labels display each node’s value, with transitions animating their appearance based on tree depth. The visualization updates dynamically by re-rendering with a new random array, demonstrating data binding and enter/update/exit patterns in an SVG.

Apr 3, 2022

Loading thumbnail…

Fork of Portland Map

This visualization renders a map of Portland neighborhoods as a choropleth of vector paths. The code uses d3.geoConicEqualArea with a custom projection and d3.geoPath to draw the geographic features, while topojson’s feature method extracts the neighborhood boundaries from a TopoJSON file. The React component loads the data asynchronously and displays the SVG paths with a teal stroke, sourced from the Data Canvas Sense Your City dataset.

Apr 3, 2022

Loading thumbnail…

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

This example maps world countries using the Natural Earth projection, rendering landmasses as black paths against a blue sphere. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json` and converts it with `topojson.feature`. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG path data, appending each country as a separate `<path>` element with the `country` class.

Apr 3, 2022

Loading thumbnail…

Fork of World Map

This example displays a world map using an August projection, showing landmasses, country borders, graticules, and a sphere outline. The map is rendered as SVG using React, with d3.geoPath generating the geographic paths from TopoJSON data loaded from the world-atlas package. The visualization applies a teal color scheme to the land, gray strokes for interiors, and a light gray background for the sphere, with graticules drawn using d3.geoGraticule.

Apr 3, 2022

Loading thumbnail…

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

This fork of "Let's make a map with D3.js!" displays a world map of countries, filled in light green over a blue sphere, using a natural Earth projection. The visualization loads geographic data from the world-atlas package and renders the sphere and country boundaries as SVG paths with D3’s geoPath. It uses the d3 and topojson libraries, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to project and draw the map.

Apr 3, 2022

Loading thumbnail…

Area Chart

This area chart displays the number of USA pandemic cases from 2013 to 2021, using a red filled area beneath a black line to emphasize the trend over time. The visualization is built with D3 v5, employing `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smooth interpolation, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes labeled axes for year and case counts.

Mar 28, 2022

Loading thumbnail…

Car Sales

This line chart shows car sales by year from 2013 to 2021, with the years on the x-axis and total sales on the y-axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator with data loaded via `csv` from a GitHub gist. The chart includes gridlines from tick marks, rotated axis labels, and a red path for the trend line.

Mar 28, 2022

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes deaths by country, using a dataset fetched from a CSV file. Each slice is labeled with its value in thousands, and a legend lists each country with its corresponding color and death count. The visualization is rendered in SVG using D3 v5, with the `pie` and `arc` generators constructing the chart, `scaleOrdinal` assigning colors, and `csv` loading the data from a GitHub gist. Text labels are positioned using arc centroid calculations.

Mar 28, 2022

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart visualizes US cancer cases from 2009 to 2022, showing the trend of cases over time with a smooth, curved line and a filled area beneath it. The chart uses D3 v5 APIs including `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.line`, and `d3.area` with a basis curve. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes gridlines and labeled axes for year and case count.

Mar 28, 2022

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes the sales of cars in India from 2009 to 2019, with the x-axis representing time and the y-axis showing sales volume. The chart uses D3.js v5 with `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grid lines, while a `line` generator draws the trend line. Data is loaded from a CSV file, parsed with `d3.timeParse`, and rendered as an SVG. The dark background and red styling highlight the sales trend over the decade.

Mar 27, 2022

Loading thumbnail…

Fork of ICE 7 Line Chart

This visualization shows annual sales of cars in India from 2009 to 2019, with a single red line tracing the trend over time. Built with D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.axisBottom` and `d3.axisLeft` for grid lines, and a `d3.line` generator to create the path. Data is loaded from a CSV file, with the year parsed via a time format. The SVG rendering includes styled tick labels and an axis label, all with a dark background.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Line Chart

This line chart visualizes US cancer cases from 2009 to 2022, plotting yearly case counts as a red path. The code uses d3.csv to load data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear for the axes, with d3.axisBottom and d3.axisLeft generating gridlines. A d3.line generator maps years to x-coordinates and case numbers to y-coordinates within an SVG, with margins and axis labels styled via external CSS.

Mar 27, 2022

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart visualizes the top 10 car production countries in the world for 2019, sourced from a CSV file loaded via `d3.csv`. The visualization shows each country's total production value as a slice of the pie, with a legend on the right listing country names and their corresponding values in thousands. Using D3 v5, the chart is rendered as an SVG with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to define the segments and colors, while `d3.format` displays the values. The code appends paths and legend elements to the SVG, positioning the pie at coordinates (250,220) with a 175-pixel outer radius.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart of the top 10 countries by air pollution-related deaths in 2020, with each slice labeled in thousands and a corresponding legend listing country names and values. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate the chart, while `d3.csv` fetches data from a GitHub gist. Text labels are positioned via `arc.centroid`, and the SVG rendering includes custom styling for the title and legend.

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, displayed as a pie chart with labeled segments and a color-coded legend. It uses d3.csv to load data, d3.pie to compute arc angles, d3.arc for SVG path generation, and d3.scaleOrdinal for color mapping. Each slice is annotated with abbreviated death counts (in thousands) positioned via arc.centroid, while a legend lists countries with their corresponding values.

Mar 27, 2022

Loading thumbnail…

Fork of Pie Chart

This example visualizes 2022 US auto sales by brand as a pie chart, with a legend displaying brand names and sales values in thousands. The chart uses D3 v5 APIs including `d3.pie` to compute arc segments, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` for categorical color mapping. Data is loaded asynchronously from a CSV file hosted on a GitHub gist using `d3.csv`. The visualization renders to an SVG canvas with a fixed 960×500 viewport, and the legend labels are positioned manually via SVG transforms.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart displays 2022 U.S. auto sales by brand, with each slice’s size proportional to the brand’s year-to-date sales. A legend on the right hand side lists each brand with its corresponding sales value in thousands. Built with d3.js v5, the visualization uses the `pie` layout and `arc` generator to create the SVG paths, with a `scaleOrdinal` color scheme for slice fills. Data is loaded from a CSV file via `csv` and formatted using `format`.

Mar 27, 2022

Loading thumbnail…

Fork of 3D Scatter Plot with Iris Dataset

This interactive 3D scatter plot visualizes the Iris dataset, displaying sepal length, sepal width, and petal length as coordinates in three-dimensional space. Each flower specimen appears as a marker, with a second trace plotting the same sepal dimensions against petal width in a 2D scatter overlay, both using semi-transparent styling to reveal overlapping points. The visualization is built with Plotly’s JavaScript library, specifically using `Plotly.newPlot` to render the chart into a dedicated div, while data is loaded asynchronously via `d3.csv` from a remote GitHub-hosted CSV file. The code defines two traces—one `scatter3d` and one `scatter2d`—with custom marker sizes, colors, and opacity, and removes all layout margins for a clean presentation.

Mar 27, 2022

Loading thumbnail…

Fork of 3D Scatter Plot with Iris Dataset

This example shows a 3D scatter plot of the Iris dataset, visualizing sepal and petal measurements from the data loaded via a CSV file. It renders two traces: one as a flat scatter2d layer and another as a scatter3d layer, both using markers with varying colors and opacity. The code uses the Plotly.js library to create the chart inside a div with the ID `myDiv`, while D3.js handles CSV parsing and data unpacking. The layout margins are set to zero to maximize the plot area.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris Dataset, displaying sepal and petal measurements for three iris species. Users can select which attributes appear on the x and y axes via dropdown menus, with data points colored by species. The visualization is built using React and D3 v5, leveraging `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. SVG rendering includes labeled axes, adjustable scales, and gridlines, with transitions triggered by menu selections.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. The visualization uses dropdown menus to dynamically switch which attribute is mapped to the x-axis and y-axis, with axes and labels updating accordingly. Built with D3 v5 and React, the example uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles colored by species, with gridlines and axis labels providing clear context for the selected variables.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds. The visualization is created with D3 and follows a reusable chart pattern, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from the `d3` library. It renders as an SVG, with circles positioned by the current x and y value scales, and axes that update on each interval.

Mar 27, 2022

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This example visualizes the Iris dataset as a scatter plot, mapping petal length and petal width to x and y positions on a D3 v6 SVG. Points are colored by species—light blue for setosa, black for versicolor, and red for virginica—with fixed radius, while each circle also carries the sepal length and width as unused `rx` and `ry` attributes from the CSV data. The code uses `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load and render the plot, with axis labels indicating petal length and sepal length.

Mar 6, 2022

Loading thumbnail…

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

This example shows a horizontal bar chart comparing population figures for six countries, with the bars rendered as rectangles and axes labeled using text marks. The visualization loads CSV data from a remote URL, parsing the 2016 population column, and uses D3’s scaleBand and scaleLinear to map country names and population values to screen coordinates within an SVG container. React manages the component state and renders the marks, while D3 v5 provides the data loading and scaling functions, including explicit tick generation and manual axis line and label placement.

Mar 6, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries using a horizontal bar chart. The chart displays population counts for the year 2020, sourced from the United Nations World Population Prospects 2019 dataset. Built with React, D3 v5, and SVG, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and D3's `format` function to display population labels in billions. The SVG rectangles include tooltips, and the chart employs a Poppins font with a teal color scheme for the bars.

Mar 6, 2022

Loading thumbnail…

Fork of United Nations Bar Chart with SVG

This example displays a horizontal bar chart of the top 10 most populous countries in 2019 from the United Nations population dataset. It uses React to manage state and render the SVG, while D3 v7’s `scaleBand` and `scaleLinear` position the bars and axis ticks. Flag images from an external SVG collection are placed at the end of each bar, using the group’s bandwidth to set the flag height and width, with a grey stroke rectangle framing each flag.

Mar 6, 2022

Loading thumbnail…

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

This bar chart displays population estimates for the top ten countries, with each country’s bar length proportional to its population and labels on the vertical axis. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for rendering axes. Bars are drawn as SVG `rect` elements, styled with a steelblue fill, and the chart is rendered within a fixed 960×500 SVG canvas with margins applied.

Mar 6, 2022

Loading thumbnail…

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

This visualization shows the top 10 most populous countries in 2019 using horizontal bar marks, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles, with blue grid lines and tick labels generated from the linear scale. The code uses React hooks (`useState`, `useEffect`) to load and transform CSV data via `d3.csv`, then creates scales with `d3.scaleBand` and `d3.scaleLinear`. Axes and ticks are manually positioned using React elements rather than D3 axis components, combining React's declarative rendering with D3's data manipulation and scaling utilities.

Mar 6, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length and width for individual flowers while representing sepal dimensions through the horizontal and vertical radii (rx and ry) of each elliptical mark. The flowers are color-coded by species—blue for setosa, red for versicolor, and black for virginica. The scatter plot is rendered as an SVG using D3 v6, with data loaded via `d3.csv`, axes generated through `d3.axisLeft` and `d3.axisBottom`, and scales defined with `d3.scaleLinear` and `d3.extent`. The visualization fills the entire browser window.

Mar 6, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal length onto the horizontal and vertical axes. Each flower is drawn as a circle with a fixed radius. The visualization uses the D3.js v6 API, including `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to render tick labels. The SVG canvas fills the browser window, with circles positioned via data-driven coordinates.

Mar 6, 2022

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across multiple household accounts, with each bar segmented by account number and colored via d3.scaleOrdinal with d3.schemeCategory10. The visualization uses d3.stack to transform grouped CSV data by read date, then renders SVG rectangles with d3.scaleBand and d3.scaleLinear axes. Interactive hover effects change bar opacity and show a tooltip via appended title elements, while axis labels and a legend clarify account mappings.

Mar 6, 2022

Loading thumbnail…

Fork of United Nations Bar Chart with SVG

This horizontal bar chart ranks the ten most populous countries in 2020 using United Nations population data. Each bar is labeled with the country name, and the flag of each nation is displayed to the right of its bar. The visualization is built with React and D3 v7, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` elements to draw the bars. Flags are loaded as external SVG images via `xlink:href`.

Mar 5, 2022

Loading thumbnail…

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

This visualization demonstrates how to load and parse CSV data using D3.js version 7 within a React framework. The page displays a summary of the dataset’s size, row count, and column count in a styled text container, alongside a decorative SVG star and circle graphic. The code uses `d3.csv` to fetch data from a GitHub gist URL, then `d3.csvFormat` to calculate the file size in kilobytes. The example also includes a static inline SVG illustration and an external SVG image, rendered as part of the overall layout.

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 v7 within a React environment. The page displays summary statistics about the dataset, including file size in kilobytes, row count, and column count, rendered as text in a styled HTML element. The code uses the `d3.csv` function to fetch data from a GitHub Gist URL and the `d3.csvFormat` method to calculate its string length. The visualization features a decorative SVG illustration alongside the text output.

Feb 25, 2022

Loading thumbnail…

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

This example uses D3.js to construct a smiley face out of basic SVG shapes, then animates it. The code builds a blue circle for the head, eyes, and a mouth using `d3.arc`, while two rectangular eyebrows are moved up and down via chained `transition.attr` calls with a 2000ms duration. The animation runs in a loop, demonstrating select-and-append DOM manipulation and declarative transitions on SVG elements.

Feb 20, 2022

Loading thumbnail…

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

This example creates an animated smiley face using D3.js v5. The visualization renders a yellow circle head with eyes, eyebrows, and a mouth as SVG elements. The eyebrows animate by moving up and down over two seconds using D3's transition system. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending shapes with attributes like position and fill color. It also uses D3's arc function to generate a path for the mouth.

Feb 19, 2022