Srividya Panchagnula

@srividyap98·13 public vizzes

Choropleth Map NU

This choropleth map visualizes the World Happiness Report 2019, using a color scale to show each country's happiness score. Built with React and rendering to an SVG element, it uses the `d3.geoPath` API to draw country boundaries and a tooltip div to display the underlying data values. The map is centered within a styled container, with a legend and title above the visualization.

May 21, 2023

Loading thumbnail…

Happiness Choropleth Map

This choropleth map visualizes national happiness scores for 2017, with countries colored on a sequential yellow-orange-red scale based on their reported Happiness Score. The visualization uses a Natural Earth projection rendered as SVG, with country boundaries, graticules, and a sphere outline drawn via d3.geoPath. Data combines the World Happiness Report with ISO country codes, joined to TopoJSON world atlas geometries, and missing countries appear in gray. React manages the component state and rendering, while d3.scaleSequential and interpolateYlOrRd generate the color encoding.

May 15, 2023

Loading thumbnail…

Fork of Chart

This example displays crime statistics against women in India with an interactive choropleth map and two donut charts. The map visualizes state-level case counts for a selected year and crime type via dropdown menus, while the donut charts show annual crime distribution across all types and within a single type. The visualization uses D3 v7 for data binding, scales, and SVG rendering, with topojson parsing state geometries. Animations are implemented through simple transition effects, and the dataset comes from a CSV file containing state-level crime records.

May 13, 2023

Loading thumbnail…

Fork of World Map Simple

This example displays a world map using the Natural Earth projection, rendered as SVG paths for country boundaries, a graticule grid, and an outline. It loads geographic data from the visionscarto world-atlas TopoJSON file via `fetch`, converts it to GeoJSON with `topojson.feature`, and renders it using `d3.geoPath` and `geoNaturalEarth1`. The visualization uses `d3.select` for DOM manipulation and a simple state management pattern to handle asynchronous data loading.

May 13, 2023

Loading thumbnail…

Fork of ILINet Flu Surveillance Data

This line chart tracks total ILI flu cases in the US per week, with individual curves for each year from 2015 to 2019, using an ordered color scale where darker shades indicate more recent years. Built with the vega-lite-api and d3.csv to load CDC FluView data, the visualization aggregates ILITOTAL by year, region, and week before encoding week on the x-axis, case totals on the y-axis, and year as an ordinal color field. The result enables direct year-over-year comparisons, highlighting seasonal peaks and variations without interaction.

May 13, 2023

Loading thumbnail…

Fork of Polished World Map

This example displays a natural Earth projection world map with graticule lines, landmasses in teal, and interior borders highlighted in a lighter cyan. Built with React and D3 v5, it loads geospatial data from the World Atlas TopoJSON file and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The map is rendered as SVG paths via `d3.geoPath` with a `geoNaturalEarth1` projection, while `geoGraticule` generates the background latitude and longitude grid.

May 9, 2023

Loading thumbnail…

Fork of Menus with React

This example shows an interactive dropdown menu for selecting a pet from six options, with the current choice logged to the console. It uses React 16.9 and the `useState` hook to manage the selected value, while a reusable `Dropdown` component renders a native `<select>` element whose `onChange` event updates the state. The code imports React, ReactDOM, and the `Dropdown` component, and the UI displays a label and the dropdown with large fonts. No data source or rendering library beyond React is used.

May 9, 2023

Loading thumbnail…

Fork of Stylized Line Chart

This interactive line chart visualizes time-series data from the Data Canvas Sense Your City dataset, plotting time against measured values across a week. The visualization is built with React and D3 v5, using SVG for rendering. It employs D3's scaleTime function for the x-axis to handle temporal data, while the line path is drawn using the `line` and `curveNatural` functions from D3 to create a smooth, stylized curve. Though circle marks are defined in the code, they are commented out, leaving only the line and axes visible. The chart features a clean design with a Poppins font and muted color scheme for a professional appearance.

May 9, 2023

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes insurance charges against age, mapping the records from Data Canvas Sense Your City and insurance datasets into a single line chart. The React application loads CSV data with d3.csv, then scales the x and y axes with d3.scaleLinear and extent, while applying a natural curve via d3.line’s curveNatural to render the path as an SVG stroke. Axis components generate tick marks and labels using d3’s scale methods, and the chart is styled with Poppins font and muted grays and blues.

May 9, 2023

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the relationship between bill depth and body mass for penguins, using data from the Iris Dataset. Built with React and D3, it renders circles as SVG marks positioned by linear scales, with formatted axis ticks and labels. The code imports `csv`, `scaleLinear`, `extent`, and `format` from D3 to load and scale the data, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the chart elements. Styling uses the Poppins font and a teal color scheme for the marks.

May 9, 2023

Loading thumbnail…

Female population Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars representing their 2020 female population, rendered as an SVG with no axes or labels. The code uses React hooks to load data from a CSV provided by the United Nations World Population Prospects 2019, parsing the population values with `d3.csv`. It scales the bar widths using `scaleLinear` and positions them with `scaleBand`, while React's `useState` and `useEffect` manage the asynchronous data fetching and rendering.

May 9, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented by an equal-sized arc emanating from the center of an SVG canvas. The React component loads the color dataset using D3’s `csv` utility, then uses D3’s `pie` layout and `arc` generator to compute and render the paths. Each path’s fill is set from the `RGB hex value` column in the data, while React manages the component state and rendering lifecycle.

May 9, 2023

Loading thumbnail…

Hello HTML

This example shows a grid of 18 randomly generated cartoon faces, each composed of SVG circles and arcs. Built with React components and D3’s arc generator, the faces vary in eye position, eye radius, mouth radius, and mouth width. The background circle’s fill uses a random HSL color, and React renders each face inside a shared SVG container. The layout is static, with no interaction or animation.

Apr 21, 2023