xieyunli111

@xieyunli111·7 public vizzes

Fork of Fork of Chart

This interactive visualization presents crime data against Indian women through a choropleth map of India and two animated donut charts. Users select a year and crime type from dropdown menus to update the map's color encoding and the donut charts' proportions. The donuts display the distribution of crime types for a selected year and the yearly trend for a chosen crime type. The code uses D3 v7 with `d3.scaleOrdinal` for color mapping, `d3.rollups` for data aggregation, and CSS transitions for animation. The data comes from a CSV file of crime statistics, and the map uses a TopoJSON file for Indian state boundaries.

Mar 3, 2023

Loading thumbnail…

v1 of Fork of Chart

This visualization presents an interactive dashboard for exploring crime data against Indian women. It combines a choropleth map of India with two donut charts: one filters by year, the other by crime type, using dropdown menus. Built with D3 v7, the map uses `d3.geoPath` with TopoJSON data, while the donut charts employ `d3.rollups` and `d3.arc` to aggregate and display proportional values. Simple animations enhance the updates when selections change.

Mar 3, 2023

Loading thumbnail…

Fork of Fork of NASCAR history of drivers and tracks

This visualization displays a capability matrix for an organization across multiple scenarios, using a bubble chart where each circle represents a capability within a specific scenario. The x-axis lists scenarios, the y-axis lists capabilities, circle size encodes the Finish metric, and color represents completion percentage. Built with Vega-Lite API, the chart uses `vl.markCircle()`, `vl.x().fieldN()`, `vl.y().fieldN()`, `vl.size().fieldQ()`, and `vl.color().fieldN()` encodings. Data is loaded from a local CSV file via `d3.csv()`, with tooltips showing scenario and capability details.

Mar 3, 2023

Loading thumbnail…

Dragging Elements

This example demonstrates a drag-and-drop interface for organizing items into nested containers. Users can select and move draggable cards between an available items pool, collection containers, and target containers, with support for multi-selection, cloning, and collapsible sub-containers. The interface is built with custom HTML elements and the Drag and Drop API, using `dragstart`, `dragover`, and `drop` events to manage item movement. SVG graphics render simple shapes within some draggable items, while JavaScript handles selection state, group permissions, and data saving/restoring via button controls.

Mar 3, 2023

Loading thumbnail…

明细能力匹配面板

This panel visualizes crime statistics against women in India across states and years, combining a choropleth map with two interactive donut charts. Users filter by year and crime type via dropdowns, updating the map and the donut charts, which display aggregate crime values and breakdowns. Built with D3 v7, the visualization uses `d3.geoPath` for the map from TopoJSON data and `d3.rollups` for aggregation. The donut charts incorporate simple animated transitions when data changes, with the CSV dataset sourced from a public GitHub gist.

Mar 3, 2023

Loading thumbnail…

Bar Chart

This example presents a bar chart of option prices, displaying each financial instrument’s code on the y-axis and its price on the x-axis. The visualization uses React with D3 v5, parsing data from a CSV file and rendering SVG rectangles. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` to generate tick labels, all within a custom `render` function. The data source is `data.csv`, containing option codes and prices, which are multiplied by 100 during preprocessing.

Jul 18, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a single static message, “Hello HTML!”, displayed in large, centered text on a plain white page. It demonstrates the fundamental structure of an HTML document, combining inline CSS styling for the message’s appearance with the HTML body content. The code uses standard HTML elements (`div`, `style`) and CSS properties (`font-size`, `text-align`) without any external libraries or JavaScript logic. It serves as a minimal baseline for understanding basic web page composition.

Jul 17, 2022