Ketaki789

@Ketaki789·11 public vizzes

pieChart

Two interactive donut charts visualize crime cases against women in India across six crime types. A choropleth map of Indian states, rendered using d3.geoPath, displays the geographic distribution of the selected crime type for a chosen year. The top donut chart filters data by year with a dropdown, while the bottom chart filters by crime type. Data is loaded from a CSV dataset via fetch, and both charts use d3.rollups to aggregate values. The visualization uses d3.scaleOrdinal for color coding and includes smooth animated transitions when filters change.

Apr 9, 2023

Loading thumbnail…

Fork of 明细能力匹配面板

This interactive dashboard visualizes crime statistics against women across Indian states, combining a choropleth map with two animated donut charts. The map displays state-level case counts for a selected crime type and year, while the donuts break down yearly totals by crime category and show the distribution of all crime types for a chosen year. Users control the display through dropdown menus. Built with D3 v7, the visualization uses `d3.geoPath` for map rendering from TopoJSON data, `d3.rollups` for data aggregation, and `d3.scaleLinear` for color encoding, with simple animations updating the donut transitions. Data comes from a CSV file on crime against Indian women.

Apr 1, 2023

Loading thumbnail…

Fork of Lollipop Chart USA Flights On-time Performance

This visualization presents the on-time performance of US flights by comparing average departure and arrival delays for each day of the month. A lollipop chart connects two circles per day, with green circles marking departure delays and purple circles showing arrival delays, positioned along a shared time axis. The chart is built using D3 v4’s `scaleLinear` and `scaleBand` functions, with data drawn from a CSV file containing daily delay statistics. The SVG rendering uses D3 selections to append lines and circles, while React manages the overall application structure.

Apr 1, 2023

Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart displays the percentage distribution of IMDb ratings across six genres. It reveals, for example, that documentaries have the highest share of top ratings, while action films are most concentrated in the lowest rating category. The visualization uses the D3.js library (d3.v7) to render the chart as an SVG. It employs `d3.stack` and `d3.scaleOrdinal` to create the stacked segments, and a mouseover event triggers a tooltip showing the exact percentage for each genre and rating level, with data loaded from a CSV file.

Apr 1, 2023

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard visualizes NYC crime data as a linked map, pie chart, and bar charts. The map uses a `d3.geoMercator` projection with a `d3.geoPath` generator to render precinct boundaries, filled with a gradient legend. A pie chart using `d3.arc` breaks down crime types, while bar charts for age and race are built with `d3.scaleBand` and `d3.scaleLinear`. Users can click map regions or reset via a button, with linked views updating based on global indicators for precinct and crime type, all rendered as SVG with animation.

Apr 1, 2023

Loading thumbnail…

Fork of Religions of Largest 20 Countries

A stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Center. Hovering over bars reveals tooltips with exact population numbers per religion, while hovering over the color legend highlights specific religious groups by dimming others. The visualization is built with D3.js version 3, employing `d3.layout.stack` for stacking, `d3.scale.ordinal` for country bands, `d3.svg.axis` for axes, and the `d3-tip` library for tooltips. The SVG rendering includes a semi-transparent overlay and a foreground layer to emphasize selected categories.

Apr 1, 2023

Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This visualization presents an orthographic choropleth map of the world, coloring each country by its population using a threshold scale with sequential blue shades. The code loads GeoJSON country boundaries and CSV population data via `d3.json` and `d3.csv`, projecting them with `d3.geoOrthographic` and rendering paths through `d3.geoPath`. Hover interactions trigger opacity transitions and stroke highlights on the SVG countries, while all elements are drawn with D3 v6 in a React environment.

Mar 13, 2023

Loading thumbnail…

Scatter Plot

This bar chart displays the top 10 most populous countries, using a horizontal layout where bar length encodes population and the y-axis lists country names. The visualization is rendered as SVG using d3.v5, leveraging d3.scaleLinear for the quantitative axis, d3.scaleBand for categories, and d3.axisLeft/axisBottom for ticks. Data from data.csv is loaded via d3.csv, with population values multiplied by 1000 to reflect actual figures.

Mar 11, 2023

Loading thumbnail…

Topojson Map

This example displays a world map rendered as filled country polygons on a sphere background. It uses d3.json to load TopoJSON data from the world-atlas package, then converts it to GeoJSON features with topojson.feature. The map is drawn in SVG using d3.geoPath with a d3.geoNaturalEarth1 projection, styling countries in green and the sphere in dark blue.

Mar 5, 2023

Loading thumbnail…

DV-Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. The code loads GeoJSON country boundaries from the World Atlas dataset via unpkg and uses `d3.geoPath` with `d3.geoNaturalEarth1` to generate the map. Countries appear as distinct paths appended to an SVG element, with a sphere outline also drawn, demonstrating basic geographic mapping with D3 v7.

Mar 4, 2023

Loading thumbnail…

D3 Starter version 7

This example displays the text "Hello D3 version 7" in the center of a webpage using a massive 13em font size. It serves as a minimal starter template for D3 version 7, loading the library from a CDN via the `unpkg` distribution. The code uses the `select` function from the `d3` module to target the `body` element and then calls its `.text()` method to set the visible content. The project includes a video tutorial and is structured with a separate JavaScript bundle file, making it a simple demonstration of D3’s DOM manipulation capabilities.

Mar 4, 2023