J

juanmy400

@juanmy400·19 public vizzes

Loading thumbnail…

Fork of Chart

This interactive visualization of crime data in India combines a state-level choropleth map with two donut charts. Users can filter the map and charts by year and crime type, such as rape or dowry deaths, to explore patterns across Indian states. Built with D3.js (v7), the map uses topojson for geographic features, while the donut charts are rendered using D3’s arc and pie functions. The data comes from a CSV file on crime against women in India. Simple animations update the charts upon selection changes, providing immediate visual feedback.

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries, with population values from the United Nations World Population Prospects 2019 dataset. The chart uses React and d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering bars as SVG rectangles. Tick labels are formatted with d3.format using the '.2s' specifier to abbreviate values like billions. The visualization includes axes generated by custom AxisBottom and AxisLeft components, with a native SVG `<title>` element providing tooltips on hover.

Loading thumbnail…

Fork of United Nations Bar Chart with SVG

This bar chart visualizes the top 10 most populous countries in 2019 using UN population data. Built with React and D3 v7, the example loads CSV data via `d3.csv` and renders horizontal bars with SVG, including country flags displayed at the end of each bar using `<image>` elements. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with gridlines and tick labels generated from the scales.

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, with each horizontal bar segmented by religion proportion. Hovering over a bar displays a tooltip with the exact population count for that religion and country, while hovering over the color legend highlights that religion’s segments across all bars by fading others. Built with D3.js version 3, the chart uses `d3.layout.stack`, `d3.scale.ordinal`, `d3.svg.axis`, and `d3.legend.color`, with data sourced from Pew Research’s Global Religious Landscape. The SVG renders with interactive tooltips via `d3-tip`.

Loading thumbnail…

Untitled

This interactive network visualization shows a force-directed graph with labeled nodes and directed links. The graph is loaded from a remote JSON file and rendered using SVG. The visualization uses the D3.js force simulation API, specifically `d3.forceSimulation()` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, to position nodes. Users can drag nodes, which restarts the simulation. Link labels are rotated to stay upright, and arrowheads mark link direction. The code relies on `d3.selection` extensions for event handling.

Loading thumbnail…

Fork of Making a Bar Chart

A fork of "Making a Bar Chart" visualizes the 2018 population estimates for the top ten most populous countries, using a horizontal bar chart with a linear x-axis and a banded y-axis. The D3 v5 code loads data from a CSV file and applies custom axis formatting, converting large numbers to abbreviated labels. It uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with the rendering output as SVG.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries based on United Nations World Population Prospects 2019 data, with horizontal bars colored teal against a clean Poppins font layout. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, rendering SVG rects via the Marks component. The visualization includes formatted tick labels using `d3.format` to abbreviate billions, plus tooltips showing exact population values.

Loading thumbnail…

Running Total of TMDb Movies by Year

This example shows a cumulative running total of TMDb movies released per year, with each year’s total plotted as a vertical bar. The chart uses D3.js scales and SVG elements to map the year-based date values from a local CSV file to the x-axis, while the running total is mapped to the y-axis. The code loads data with d3.dsv, parses the year column into Date objects, and sets linear scales for both axes. It then appends the bars and axis labels, though the incomplete selections remain placeholders.

Loading thumbnail…

Polished Scatter Plot with Menus and dynamic selection

This interactive scatter plot visualizes the Iris dataset, displaying four measurements (sepal and petal length/width) with species color-coded. Dropdown menus dynamically select which attributes map to the x and y axes, while hovering over the color legend highlights the corresponding species by increasing its opacity and dimming others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered from CSV data.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length against sepal width with species encoded by color. Hovering over a color legend entry highlights the corresponding species’ circles while dimming all others. Built with React and D3 v5, the code uses d3.scaleLinear, d3.scaleOrdinal, and d3.extent for scales, while rendering SVG circles via custom components. The legend triggers hover states that filter data for emphasis, and axes are generated with d3-format for tick labels.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing the user to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via dropdown menus. The visualization is built with React and D3 v5, using D3’s `scaleLinear` for axis scaling and the `csv` function to load data. SVG circles represent each iris, with axis ticks and labels rendered by custom React components.

Loading thumbnail…

Polished World Map

Using React and D3 v5, this example displays a world map with country borders, a graticule grid, and a distinct teal color scheme. The visualization renders landmasses and interior boundaries from the World Atlas TopoJSON dataset via `d3.geoPath`, applying a `geoNaturalEarth1` projection. A styled sphere and graticules are drawn using the same projection, while the `topojson` library converts the TopoJSON topology into GeoJSON features and a mesh.

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature variations in San Francisco using the Data Canvas Sense Your City dataset. The chart displays a smooth, natural curve connecting temperature readings over time, with small circular markers positioned at each data point. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and d3.csv for data loading. The minimalist design features a teal color scheme, Poppins typography, and native SVG rendering with hover tooltips showing formatted dates.

Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, using a time-scaled x-axis and linear y-axis. The visualization employs React components with D3 v5 scales and SVG rendering, where each circle represents a temperature measurement with a tooltip showing the date. The code uses `scaleTime` and `scaleLinear` for axis scaling, `timeFormat` for tick labels, and custom React `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist URL.

Loading thumbnail…

Stylized Scatter Plot

A scatter plot displays the relationship between petal length and sepal width in the Iris Dataset, with each point representing a flower sample. The visualization uses React to render SVG elements, with D3 v5 functions like `scaleLinear`, `extent`, and `format` handling scales and tick label formatting. Axes are built as reusable React components that map data values to screen coordinates, while circles with tooltip titles show the data points against a muted color palette.

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying an equal slice of a circle. It loads color data from a CSV file using d3.csv, then computes pie angles with d3.pie and generates SVG paths with d3.arc. React manages the component state and renders the SVG, while D3 handles data loading and geometry. The resulting chart displays all named colors around a central point, using their hex values as fills.

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset of CSS named colors from a GitHub gist using D3's `csv` utility within a React application. It displays key statistics about the data—file size in kilobytes, row count, and column count—in a large text format. The app uses React state and the `useEffect` hook to fetch the data asynchronously, showing a "Loading..." message until the fetch completes. The D3 `csv` function parses the remote CSV, and `d3.csvFormat` calculates the byte size for the summary.

Loading thumbnail…

Fork of Smiley Face Part II

A grid of eighteen randomly generated smiley faces is rendered with React and D3 v7, each face varying in eye offset, radius, stroke width, and mouth curvature. The code builds faces from reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which compose SVG circles and an arc path. The Mouth component uses `d3.arc()` with randomized inner and outer radii and a fixed angular range, while the face positions and sizes are defined by `d3.range()` and `Math.random()`.