Dhiva21

@Dhiva21·7 public vizzes

Fork of Making BarChart

This horizontal bar chart displays the population of the ten most populous countries, using a linear scale for population and a band scale for country names. Built with D3 v5, it loads data from a CSV file via `d3.csv` and renders bars as SVG rectangles. The chart includes a formatted x-axis with tick labels shortened using `d3.format`, a title, and removes redundant axis lines. Margins are applied through a transformed group element.

Jul 10, 2023

Loading thumbnail…

Fork of Fork of Exploring survey data interactively - y-axis

An interactive bar chart explores survey data by displaying average values for student interest groups, with a dropdown menu to select which variable appears on the y-axis. The visualization uses d3.json to load survey data and d3.nest to aggregate it, while d3.scaleBand and d3.scaleLinear handle the axes. The chart updates dynamically through the general update pattern, redrawing bars and the y-axis via selectionChanged when a new variable is chosen. SVG rendering and d3.axisLeft and d3.axisBottom provide the visual layout.

Feb 8, 2023

Loading thumbnail…

Fork of Exploring survey data interactively - y-axis

This interactive bar chart explores survey data by grouping respondents by their academic subject preference on the x-axis while a dropdown menu selects the y-axis variable, such as average height or stress levels. The visualization uses d3.scaleBand and d3.scaleLinear to map the data, and a d3.select form element triggers a `selectionChanged` handler that updates the axis and bar heights using the general update pattern. Data is loaded from a remote JSON source and processed with d3.nest, d3.mean, and d3.sum to aggregate values per preference group.

Feb 8, 2023

Loading thumbnail…

Fork of barchart-sorted

This interactive bar chart compares child nutrition indicators across eight blocks in Palghar district, showing Height%, Weight%, and combined Height+Weight% values. Users select a month and metric from dropdown menus, triggering animated transitions that re-sort and re-color the bars using a sequential color scale. The visualization uses D3.js with `scaleLinear`, `scaleBand`, and `transition.attr` for smooth updates, while a tooltip displays exact values on hover. Data comes from the provided CSV files, with SVG rendering and Bootstrap for layout.

Feb 8, 2023

Loading thumbnail…

Fork of a complete barchart

This example shows a simple bar chart visualizing an array of nine numeric values as blue rectangles with value labels above each bar. The chart includes axes on the left and bottom. It uses D3 v5 with SVG rendering in a React-friendly HTML setup, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the ticks. Bars are appended via data joins, with custom margins and padding.

Feb 8, 2023

Loading thumbnail…

Fork of neues barchart v3

This example visualizes the absolute frequencies of categorical data columns ("note" and "student") as a bar chart. A dropdown menu selects which column to display, and each bar shows the count alongside a tooltip on hover, with highlighted bars displaying divergence annotations. Built with React and D3 v5, it uses `d3.nest()` for data aggregation, `scaleBand` and `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes. SVG rendering includes animated hover effects and mouse event handlers for interactivity.

Feb 6, 2023

Loading thumbnail…

Fork of Fork of Fork of India Map

A choropleth map of India renders each state as a filled SVG path, with colors assigned via d3.scaleOrdinal and d3.schemeCategory10. State names appear as SVG text labels positioned using d3.geoPath.centroid. The code loads TopoJSON state boundaries from a GitHub repository, projects them with d3.geoMercator, and uses d3.json, d3.geoPath, and topojson.feature to process the data.

Jan 30, 2023