Srishti2398

@Srishti2398·10 public vizzes

Affection Type Unknown Map

This map of China visualizes provincial data on affection types, specifically highlighting the "Unknown" category through red circles positioned at each province’s centroid. The map uses an SVG rendering with a Mercator projection and loads geographic boundaries from a TopoJSON file while joining CSV data by province ID. Circle radii are scaled using `d3.scaleSqrt` based on unknown values, with a custom size legend showing tick values. Provinces are colored using `d3.scaleOrdinal` with `schemeCategory10`, and hover effects change fill to red. The visualization relies on `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for interaction.

May 14, 2020

Loading thumbnail…

Affection Type Unknown Map

This map of Chinese provinces visualizes the number of people with unknown affection types, alongside other categories like social, relative, and travel connections. The map renders geographic boundaries using `d3.geoPath` and `geoMercator`, with circles scaled via `d3.scaleSqrt` to represent counts for each province. The choropleth fill, using `d3.scaleOrdinal`, encodes province IDs, while hover effects highlight regions. Data comes from a CSV joined with TopoJSON from a remote GitHub source. A size legend is custom-built to aid interpretation.

May 14, 2020

Loading thumbnail…

dynamic map

This dynamic map visualizes child malnutrition metrics across eight blocks in Palghar, India, using a color-coded choropleth. The map displays the number of moderately stunted children per block, with red, yellow, and green fills indicating low, medium, and high values. Users can hover over blocks to see a tooltip with the block name and stunted child count. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` for rendering GeoJSON polygons, and zoom functionality. It supports monthly data switching from a CSV file, updating the block colors accordingly.

Feb 21, 2020

Loading thumbnail…

D3 Radar Chart

This interactive radar chart displays multivariate data across multiple axes, with options to toggle levels, axes, vertices, polygons, and labels, and to switch between stacked and faceted views. Built with React and D3 v3, it reads CSV data from the Sense Your City dataset, such as Power Grid ratings for The Avengers or mock plant season data. The visualization renders paths for polygon areas and circles for vertices, and supports custom file uploads for user-provided datasets.

Jan 31, 2020

Loading thumbnail…

Untitled

A line chart tracks stock closing prices over a three-week period in April–May 2012, with each data point drawn as a red circle from the CSV data. Interactive tooltips appear on mouseover, displaying the formatted date and closing value. The visualization uses D3.js version 3.5.17 to build an SVG with a time-scaled x-axis, linear y-axis, and animated transitions for the tooltip opacity.

Jan 21, 2020

Loading thumbnail…

Untitled

A simple bar chart visualizes population data from the United Nations Population Prospect 2017. The example primarily demonstrates a custom tooltip implemented with D3 v4, attaching mouseover, mousemove, and mouseout events to a circle element. The tooltip is a styled HTML div that appears near the cursor, displaying formatted text and an image. The SVG circle acts as a static placeholder, while the tooltip logic showcases event handling and dynamic positioning using the D3 selection API.

Jan 21, 2020

Loading thumbnail…

Scatter Plot for Density(per Km.) in India

This scatter plot displays population density per square kilometer across Indian states and union territories, using 2012 data from the United Nations Population Prospect 2017. The visualization maps states along the y-axis and density values on the x-axis, with each circle representing a state’s density. Built with D3 v5, the code uses `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom` and `axisLeft` for gridlines and labels. The SVG rendering applies a logarithmic-style tick format via `format('.3s')`, with circles colored orange against a light blue background.

Jan 5, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the literacy rates of women across 16 Indian states, with each circle representing a state and its position along the horizontal axis corresponding to the literacy percentage. The vertical axis lists the state names, using a point scale for categorical placement. The visualization is built with D3 v5, employing `scaleLinear` for the numeric axis and `scalePoint` for the categorical one, alongside `axisBottom` and `axisLeft` for the ticks. Data is loaded from a local CSV file, and the SVG rendering includes styled circles and axis labels.

Jan 5, 2020

Loading thumbnail…

Bar Chart using d3

This bar chart displays the literacy rates of women across Indian states, with horizontal bars ordered by literacy percentage, from Kerala’s high rate to Bihar’s lower rate. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft/axisBottom to render ticks. A transition.attr on rectangle widths animates the bars over two seconds. SVG rendering includes labeled title and axis, with tick lines and custom formatting for rate values.

Jan 5, 2020

Loading thumbnail…

Let's make a smiley

This example demonstrates fundamental DOM manipulation by constructing an animated smiley face. A circle forms the head, with smaller circles for eyes and rectangles for eyebrows, while an arc path creates the mouth. The eyebrows animate vertically using chained `transition().duration()` calls on a group element. Built with D3 v5, it uses `select`, `append`, and `attr` to position SVG shapes relative to a centered group, with a static background color set via inline styles.

Jan 4, 2020