Database Acces page of the Violations Documentation Center in Syria.

100%

Database Acces page of the Violations Documentation Center in Syria.

✓ Published1🌍 Public

Last edited Sep 23, 2020

Created on Sep 9, 2020

Forked from Loading and Parsing CSV Data

This example summarizes a dataset from the Violations Documentation Center in Syria, displaying its size in kilobytes, row count, and column count on a page. The page uses `d3.csv` to fetch a remote CSV file from GitHub and `d3.csvFormat` to calculate byte length, with `d3` version 5 loaded via a CDN. It answers distribution questions about violation type, location, and time only by presenting the dataset’s basic dimensions, not by rendering charts. The code also includes commented alternatives using `fetch` and `d3.csvParse`.

AI-generated description

Gist: Database Acces page of the Violations Documentation Center in Syria

idea

what is the distribution of violation type? what is the distribution of violation location? what is the distribution of violation time ?

MIT Licensed

Similar vizzes

Loading thumbnail…

Violations

This interactive bar chart visualizes documented violations in Syria by province and date, sourced from the Violations Documentation Center’s aggregated CSV data. The visualization encodes date on the x-axis, a count of violations on the y-axis, and province as color, with tooltips revealing exact counts. Using the Vega-Lite API (`vl.markBar`, `vl.x().fieldT`, `vl.y().fieldQ`, `vl.color().fieldN`) rendered via `vega-lite-api`, `vega`, and `vega-lite`, the chart dynamically fits the window and applies custom axis styling from `config.js`. The `d3.csv` loader fetches the remote dataset, with the tooltip handler provided by `vega-tooltip`.

MMoooYang

75% match

Loading thumbnail…

Fork of Loading Data SyriaViolationsDocumentationCenter Francesca Sajedi

This visualization displays aggregated Syrian violation records from the Syria Violations Documentation Center, showing the count of civilian and non-civilian casualties across provinces, dates, and responsible actors. The code fetches a CSV file and parses it with `d3.csvParse`, converting the count column to numeric values. Using D3 v7, the visualization initially renders the raw data as JSON text in a `<pre>` element, with a state management pattern where data loading triggers a re-render through the `setState` function. The framework is D3 with a custom `viz` function handling the container updates.

Ffsajedi22

74% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v5. It displays a summary of the dataset, including its size in kilobytes, row count, and column count, within a large text element. The code uses `d3.csv` to fetch and parse the data asynchronously, then `d3.csvFormat` and `data.columns` to extract metadata. The dataset, sourced from a GitHub gist, contains U.S. Metro Areas Violent Crime Rates by Type across multiple years.

Yyyaaa1

73% match

Loading thumbnail…

Fork of Violations

This visualization presents a categorical bar chart of documented violations in Syria, showing the count aggregated by province and date. The chart uses a dark color scheme for readability. It loads a CSV file from a GitHub repository and processes it with d3.csv retrieval. The visualization is built using Vega-Lite API via the vl module, with tooltips enabled through the vega-tooltip Handler, and the chart dimensions are set to fit the browser window.

Ttrentjhn

71% match

Loading thumbnail…

Crimes_against_women_data

This example displays metadata about a dataset on crimes against women in India from 2012 to 2014, showing its size in kilobytes, row count, and column count. The visualization loads a CSV file from a GitHub gist using `d3.csv` and formats the raw text length with `d3.csvFormat`. It renders the resulting statistics in a large `<pre>` element, providing a minimal summary of the dataset's structure. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`.

LlzlazmSylas

71% match

Loading thumbnail…

Parsing CSV Data with D3

This visualization demonstrates how to parse CSV data using D3.js by fetching a remote file and displaying summary statistics. The page shows the dataset’s row count, column count, and file size in kilobytes within a large text element. It uses D3’s `d3.csv()` function to load and parse the CSV from a GitHub gist, then formats the data with `d3.csvFormat()` to calculate its size. The example also includes commented-out code using `fetch()`, `async`/`await`, and `d3.csvParse()` as an alternative parsing approach.

TTetiana Humeniuk

70% match

Loading thumbnail…

Loading and Parsing CSV Data

This example loads a remote CSV file containing Yemen displacement data and displays basic summary statistics: file size in kilobytes, row count, and column count. It uses d3.csv to fetch and parse the data, then d3.csvFormat to measure the formatted string length, and d3.csvParse in commented alternatives with fetch and async/await. The visualization appears as a large-text pre element, showing the parsed dataset’s dimensions without any chart or graphical rendering.

AAmit Wadhwa

69% match

Loading thumbnail…

Data Table Summary

This example presents a raw summary of Chicago crime data from December 2017, displaying the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. It uses d3.csv to load the dataset and d3.csvFormat to compute its size. The visualization appears as monospaced text on a black background with green styling, emphasizing a terminal-like aesthetic.

Ssrrajendran

69% match