Skip to main content
100%

Loading dataset WWW18

✓ Published0🌍 Public
Aannemariet
Last edited Apr 23, 2018
Created on Apr 23, 2018

This block loads a small CSV dataset on street harassment experiences and renders it as a static grouped bar chart in SVG. The data records counts of reported actions (e.g., “sexual comments about a woman/girl’s body parts or appearance,” “whistling while a woman or a girl is passing by”) across perceived types of assault, respondent gender, and age group. Each row is drawn as a thin rectangular bar with no fill, and a separate black line marks the overall value per category. The visualization demonstrates a minimal approach to binding external tabular data to SVG elements using D3 v4, without animation or data-binding complexities.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/f4baa95d363ee21d0952ca561cd2a0e5'>D3 bar chart without data-binding</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/292553c451ddbb5230d661c9e745601f'>D3 bar chart without data-binding</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/f865e7c5c05c805759486a3cf435a548'>D3 bar chart without data-binding</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/3de5bef36f106673278b7ec182c262a6'>D3 bar chart with animation</a>

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/d031b358308609d2c106fd5f7eb2c1c3'>Loading dataset WWW18</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple animated bar chat dataset

A simple bar chart built with D3 v4 reads a semicolon-delimited CSV file from the local gist, parsing it with `d3.dsvFormat(';')` and `dsv.parse(raw)`. The SVG rendering creates a 960-by-500 canvas and uses `d3.scaleLinear` for both the x- and y-axes, with the y-domain computed from the maximum value in the dataset. Ten labeled bars (A through J) are positioned using the x-scale, though the chart currently lacks displayed rectangles and only renders the category names as text. The data source is a small `dataset.csv` included with the block.

EEnzoTheBrown
73% match
Loading thumbnail…

Dynamic Bar Chart

This dynamic bar chart visualizes crimes against women in India, showing the number of assault cases for each state in a selected year. A dropdown menu lets users switch between years, while bars transition smoothly to updated values and re-sort in descending order. The visualization uses D3 v7 APIs including `csv`, `rollups`, `scaleLinear`, and `scaleBand`, with `transition` and `easeLinear` for animation. Bars change opacity on hover, and value labels appear at the end of each bar. The dataset comes from a CSV hosted in a GitHub gist.

GGabrielle Nyirjesy
73% match
Loading thumbnail…

EDAV7_1_axes

This example animates a bar chart of crime data against Indian women, showing values for female and male respondents with yes/no categories across multiple years. The bars transition through six sequential datasets, each with a two-second duration and two-second delay, alternating between cornflower blue and forest green. Built with D3 v7, the visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition` with duration and delay parameters to update bar heights. The data comes from a CSV file referenced in the README, and the SVG rendering includes a light blue background and axis labels.

HHelen-Luwei-Zhang
72% match
Loading thumbnail…

Bar Chart with D3.js!

This example shows a blank SVG canvas awaiting data, with the code loading a CSV of country populations using `d3.csv` and logging the parsed data to the console. The bar chart visualization itself is not yet implemented, so the current behavior only demonstrates data loading and preparation. Rendered with D3 v5 in an SVG element sized 960 by 500 pixels, the example highlights the foundational step of fetching and inspecting dataset structure before creating visual marks.

Rrjohnson5016
72% match
Loading thumbnail…

simple bar chat dataset

A simple bar chart displays a static dataset of eleven named values, rendered as outlined rectangles with monospaced labels below each bar. The visualization loads a semicolon-delimited CSV file containing name-value pairs and maps the values to bar heights using linear scales. Built with D3 v4, the code parses the dataset with `d3.dsvFormat`, computes the maximum value to set the y-domain, and appends SVG `text` and `rect` elements to the document body. The bars are positioned with translated groups, and both axes are implicit rather than explicitly drawn.

EElisaDnr
72% match
Loading thumbnail…

simple bar chat dataset

This simple bar chart visualizes a small dataset of categorical values loaded from a semicolon-delimited CSV file. The chart uses SVG rectangles, with each bar’s height proportional to its numeric value, while the category names are displayed as text labels above the bars. The code relies on `d3.text` to fetch the dataset, `d3.dsvFormat(';')` to parse the semicolon-separated values, and `d3.scaleLinear` for the x- and y-axes’ positioning and scaling. Rectangles and text are appended using D3’s data-join pattern, with styling applied via CSS.

HHectorDt
72% match
Loading thumbnail…

Bar Chart

This example demonstrates a bar chart that loads population data from a CSV file and renders it as SVG rectangles using D3.js. The code uses `d3.csv` to parse the data, `d3.scaleLinear` to map population values, and `d3.select` with `append('rect')` for DOM manipulation. The resulting visualization displays raw rectangles without axes or labels, showing only the initial data-binding step. The chart is constructed with a fixed width and height for each bar, leaving the scaling incomplete.

Aa-ydobon
72% match
Loading thumbnail…

index(11823810).html

This interactive D3 visualization demonstrates how to load and explore CSV data, displaying it as a bar chart and computing summary statistics. Users can filter the dataset by category and previous value through dropdown menus, with hover tooltips showing detailed records. The page also includes a small SVG icon showcase and prominent metric cards alongside the main visualization. The implementation uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for scales, and d3.transition for animated bar updates.

Vvineelaviswanadham07@gmail.com
72% match